一个iOS开发者的android修行之路二:UITableView和ListView的对比探究

尽管现在主流的移动设备的屏幕尺寸都越来越大,特别是iPhone X的出现,以后的趋势都是全屏手机,但是一屏的显示的内容还是有限的,当我们需要有大量数据需要展示时就可以使用这两个控件。这两个控件的相同点都是允许用户上下滑动,以便展示屏幕区域外的内容。很多主流的应用,比如微信、QQ的消息列表,微信朋友圈,微博等等应用的很多界面都是使用这两个控件实现的。

UITableView的基本使用

  1. iOS添加一个UITableView有两种方式。一是:纯代码初始化一个UITableView;二是在storyboard中直接拖入一个UITableView并且设置约束添加,同时设置tableView的dataSource和delegate为ViewController。这两种方式并没有优劣之分,使用第二种方式是苹果推荐的快速开发的方式。我的事例代码选择的第二种方法。
    在storyboard添加UITableView的四步曲
  2. 自定义UITableViewCell,勾选同时勾选xib,我这里命名为TestTableViewCell,里面添加两个控件ImageView和Label,同时设置应用。同时设置xib中的重用identifier为:TestTableViewCell
  3. 注册重用的cell,在ViewControllerviewDidLoad方法中注册自定义cell。

    1
    2
    let nib = UINib(nibName: "TestTableViewCell", bundle: nil)
    tableView.register(nib, forCellReuseIdentifier: "TestTableViewCell")
  4. 配置tableView显示的数据源,实际项目中为网络请求的数据,demo中为模拟了100条假数据。

  5. 实现tableView的数据源和代理方法。
    其中这两个数据源方法必须实现:func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Intfunc tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell,否则会app会闪退。其中第一个方法用来指明cell的个数,第二个方法用来设置cell的数据,demo中的设置UIImageView和UILabel。
    cell点击事件的响应,则需要实现代理方法func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
    下面是整个ViewController代码:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    //
    // ViewController.swift
    // iOSTableViewDemo
    //
    // Created by romance on 2017/11/28.
    // Copyright © 2017年 firstleap. All rights reserved.
    //

    import UIKit

    final class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    final fileprivate var dataList = [TestModel]()

    override func viewDidLoad() {
    super.viewDidLoad()

    let nib = UINib(nibName: "TestTableViewCell", bundle: nil)
    tableView.register(nib, forCellReuseIdentifier: "TestTableViewCell")
    setupData()
    }

    private func setupData() {
    for _ in 0...100 {
    let model1 = TestModel(imageName: "set_icon_about", title: "关于")
    dataList.append(model1)
    let model2 = TestModel(imageName: "set_icon_change", title: "头像")
    dataList.append(model2)
    let model3 = TestModel(imageName: "set_icon_clean", title: "清楚")
    dataList.append(model3)
    let model4 = TestModel(imageName: "set_icon_edit", title: "修改")
    dataList.append(model4)
    }
    }

    }

    extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return dataList.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "TestTableViewCell", for: indexPath) as! TestTableViewCell
    let model = dataList[indexPath.row]
    cell.icon?.image = UIImage(named: model.imageName);
    cell.title?.text = model.title
    return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    tableView.deselectRow(at: indexPath, animated: true)

    let model = dataList[indexPath.row]
    let showtitle = model.title
    let label = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 30))
    label.text = showtitle
    label.textAlignment = .center
    label.backgroundColor = .lightGray
    label.center = view.center
    label.alpha = 0
    self.view.addSubview(label)

    UIView.animate(withDuration: 0.25, animations: {
    label.alpha = 1
    }) { (b) in
    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 2, execute: {
    UIView.animate(withDuration: 0.25, animations: {
    label.alpha = 0
    }, completion: { (b) in
    label.removeFromSuperview()
    })
    })
    }
    }
    }

ListView的基本使用

  1. activity_main.xml中添加ListView布局,充满父容器,其实iOS中的storyboard和xib文件也是xml语言编写(也就是说和android的xml文件类似),只不过苹果公司开发Xcode可以图形化界面进行设置约束,而Android Studio尽管也可以通过拖控件进行布局,但是一般都不使用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
    android:id="@+id/list_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

    </LinearLayout>
  2. 设置ListView子项布局test_item.xml。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
    android:id="@+id/test_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/set_icon_about"/>

    <TextView
    android:id="@+id/test_tile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:text="hehe"
    android:textSize="21sp"
    android:layout_marginLeft="8dp"/>

    </LinearLayout>
  3. 自定义ListView的适配器TestAdapter

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    public class TestAdapter extends ArrayAdapter {

    private int resourceID;

    public TestAdapter(@NonNull Context context, int resource, List<TestModel> objects) {
    super(context, resource,objects);
    resourceID = resource;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
    TestModel testModel = (TestModel)getItem(position);
    View view;
    ViewHolder viewHolder;
    if (convertView == null) {
    view = LayoutInflater.from(getContext()).inflate(resourceID, parent, false);
    viewHolder = new ViewHolder(view);
    view.setTag(viewHolder);
    } else {
    view = convertView;
    viewHolder = (ViewHolder)view.getTag();
    }
    viewHolder.imageView.setImageResource(testModel.getImageID());
    viewHolder.textView.setText(testModel.getTitle());
    return view;
    }

    class ViewHolder {
    ImageView imageView;
    TextView textView;
    ViewHolder(View view ) {
    imageView = (ImageView)view.findViewById(R.id.test_image);
    textView = (TextView)view.findViewById(R.id.test_tile);
    }
    }

    }
  4. 添加Adapter数据,同iOS类似,demo添加了100条假数据。

  5. onCreate方法中创建一个TestAdapter对象adapter,并且设置为listView的适配器。为ListViewitem子项添加点击事件。
    MainActivity的代码如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    public class MainActivity extends AppCompatActivity {
    private List<TestModel> dataList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    initsData();
    TestAdapter adapter = new TestAdapter(MainActivity.this,R.layout.test_item,dataList);
    ListView listView = (ListView)findViewById(R.id.list_view);
    listView.setAdapter(adapter);
    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
    TestModel model = dataList.get(i);
    Toast.makeText(MainActivity.this,model.getTitle(),Toast.LENGTH_SHORT).show();
    }
    });
    }

    private void initsData() {
    for (int i = 0; i < 100; i ++) {
    TestModel testModel = new TestModel(R.drawable.set_icon_about,"关于");
    dataList.add(testModel);
    TestModel testModel2 = new TestModel(R.drawable.set_icon_change,"头像");
    dataList.add(testModel2);
    TestModel testModel3 = new TestModel(R.drawable.set_icon_clean,"清楚");
    dataList.add(testModel3);
    TestModel testModel4 = new TestModel(R.drawable.set_icon_edit,"修改");
    dataList.add(testModel4);
    }
    }
    }

UITableView和ListView的对比

相同点:

  1. 都有重用机制,来提高滑动性能;
  2. 见文章开头所写;

不同点:

  1. UITableView继承自UIScrollView是一个滑动的View,而ListView则不是集成ScrollView。(或许这两点并没有没有可比性,毕竟是两个不同框架提供的库)
  2. UITableView有两种样式,group和plain。而ListView只有一种类似于iOS的plain模式,
    group样式
    plain样式

最后,文中使用的控件对比:
iOS图片显示控件UIImageView与Android的ImageView控件对应,文本显示控件iOS是UILabel,对应Android的TextView。
GitHub demo地址