如何制作 Instagram 聊天屏幕 (UI) 以便向左滑动以查看 iOS 中的时间

Question

我们尝试向左滑动，但未能在 iOS 本机应用程序中实现像 Instagram 消息 UI。请建议我可以做什么以及如何实施。

Answer 1

你只需要在tableViewConstraints中做一些修改。使 table 视图尾随约束为负值，这将使 table 视图移出超级视图，我使用了 -50，如图

所示

现在，当您制作 tableViewCell 的 Xib 时，也会在同一个 Xib 中包含右侧标签。

还转到情节提要和 select 您的 tableView 并在 scrollView 部分的属性检查器中启用所有三个选项，如下图所示：

现在尝试一下，如果您有任何疑问，请随时提出。

这就是它的样子：

Answer 2

与您分享代码：

而不是使用 viewForHeaderInSection 使用 cellForRowAt 创建 header
此外，当为 header 单元格制作 Xib 时，请记住您必须将标签保持在视图的中心。

import UIKit
class ViewController: UIViewController {

@IBOutlet weak var tableView: UITableView!

var headersIndex = [IndexPath]()
override func viewDidLoad() {
    super.viewDidLoad()

    tableView.register(UINib(nibName: "cell", bundle: Bundle.main), forCellReuseIdentifier: "cell")
    tableView.register(UINib(nibName: "HeaderTableViewCell", bundle: Bundle.main), forCellReuseIdentifier: "HeaderTableViewCell")
}
}
extension ViewController: UITableViewDataSource,UITableViewDelegate {
func numberOfSections(in tableView: UITableView) -> Int {
    return 5
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if indexPath.row == 5 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "HeaderTableViewCell") as! HeaderTableViewCell
        cell.centerLabel.text = "sanjay"
        cell.centerLabel.center.x = view.center.x
        if !headersIndex.contains(indexPath) {
            headersIndex.append(indexPath)
        }
        return cell
    } else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! cell
        cell.leftLabel.text = "Message \(indexPath.row)"
        cell.rightLabel.text = indexPath.row.description
        return cell
    }
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
    for i in headersIndex {
        if let cell = tableView.cellForRow(at: i) {
            if tableView.visibleCells.contains(cell) {
                let header = cell as! HeaderTableViewCell
                header.centerLabel.center.x = view.center.x + scrollView.contentOffset.x
            }
        }

    }

}
}

Answer 3

这是我早先分享的解决方案，没有完成，等聊完再更新。

import 'package:flutter/material.dart';

void main() {
 runApp( MyApp());
}

class MyApp extends StatefulWidget {
 MyApp({Key key}) : super(key: key);

 @override
 State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
   final ScrollController _scrollController = ScrollController(keepScrollOffset: 
   true, initialScrollOffset: 0.0);

@override
void initState() {
 super.initState();
}

@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: Scaffold(
      appBar: AppBar(
        title: const Text('Flutter chat insta'),
      ),
      body: GestureDetector(
        onHorizontalDragUpdate:(offset){
          _scrollController.animateTo(offset.localPosition.distance
              , duration: const Duration(microseconds: 800), curve: Curves.easeInBack);
        },
        onHorizontalDragEnd: (dragState){
          _scrollController.animateTo(_scrollController.initialScrollOffset, duration: const Duration(seconds: 1), curve: Curves.ease);
        },
        child: ListView(
          physics: const NeverScrollableScrollPhysics(),
          scrollDirection: Axis.horizontal,
          controller: _scrollController,
          children: [
            DataTable(
              columns: const [
                DataColumn(
                    label: Text('ID',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold))),
                DataColumn(
                    label: Text('Name',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold))),
                DataColumn(
                    label: Text('Profession',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold))),
                DataColumn(
                    label: Text('',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold))),
                DataColumn(
                    label: Text('TIme',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold))),
              ],
              rows: const [
                DataRow(cells: [
                  DataCell(Text('1')),
                  DataCell(Text('Stephen')),
                  DataCell(Text('Actor')),
                  DataCell(Text('')),
                  DataCell(Text('1:30 Pm')),
                ]),
                DataRow(cells: [
                  DataCell(Text('5')),
                  DataCell(Text('John')),
                  DataCell(Text('Student')),
                  DataCell(Text('')),
                  DataCell(Text('1:30 Pm')),
                ]),
                DataRow(cells: [
                  DataCell(Text('10')),
                  DataCell(Text('Harry')),
                  DataCell(Text('Leader')),
                  DataCell(Text('')),
                  DataCell(Text('1:30 Pm')),
                ]),
                DataRow(cells: [
                  DataCell(Text('15')),
                  DataCell(Text('Peter')),
                  DataCell(Text('Scientist')),
                  DataCell(Text('')),
                  DataCell(Text('1:30 Pm')),
                ]),
              ],
            )
          ],
        ),
      )),
   );
   }
 }

如何制作 Instagram 聊天屏幕 (UI) 以便向左滑动以查看 iOS 中的时间

How to make instagram chat screen(UI) for left swipe to see time in iOS

ios

swift

uitableview

user-interface

uicollectionviewlayout