代码之家 › 专栏 › 技术社区 › pradip kikani

如何在iOS中制作instagram聊天屏幕(UI)以便左键滑动查看时间

uicollectionviewlayout user-interface uitableview swift ios

pradip kikani · 技术社区 · 6 年前

我们尝试向左滑动,但未能在iOS原生应用程序中实现类似Instagram的消息用户界面。请建议我可以做什么,以及如何实施。

3 回复 | 直到 6 年前

sanjaykmwt 6 年前

与您共享代码:

而不是使用 viewForHeaderInSection 使用 cellForRowAt 创建标题
在制作 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
            }
        }

    }

}
}

sanjaykmwt 6 年前

您只需要在tableViewConstraints中进行一些修改。将table view trailing约束设置为负值,这将使table view移出superview,我使用了-50,如图所示

现在,当您将tableViewCell的Xib也包含在同一个Xib中的右侧标签时。

同时转到故事板,选择tableView,并在scrollView中的属性检查器部分启用所有三个选项,如下图所示:

现在试着问问你是否有任何疑问。

这就是它的样子:

Parth Pitroda 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')),
                ]),
              ],
            )
          ],
        ),
      )),
   );
   }
 }