QMUI Android框架使用探索与详细步骤4-列表框ListView的使用

列表使用的最多，项目中经常用到，所以这个必须得整合到项目中。

列表控件listview的使用，可以先参考官方的demo。代码参考QDDialogFragment.java文件，布局layout参考fragment_listview.xml和simple_list_item.xml这2个文件。

经过前面几次的折腾，现在使用起来也很简单了。

1、新建一个项目：QMUI_Practise，选择空白布局。删除默认的hello world控件。添加状态栏和一个listview。activity_main.xml布局文件代码如下。注意要添加fitsSystemWindows="true"。

2、在代码文件MainActivity.java中，先定义成员变量、绑定事件。

@BindView(R.id.listview_contact)    ListView mListView_contact;

3、自定义一个初始化ListView的函数initListView( )，用于在ListView显示一些默认数据。我们主要用于显示联系人姓名。

    private void initListView() {
        String[] listItems = new String[]{
                "舒淇", "周杰伦", "古天乐", "姚明", "刘德华", "谢霆锋",
                "朱时茂", "朱军", "周迅", "赵忠祥", "赵薇", "张国立",
                "赵本山", "章子怡", "张艺谋", "张卫健", "张铁林", "袁泉",
                "俞小凡", "杨丽萍", "杨澜", "汪峰", "唐国强", "孙楠",
                "宋祖英", "斯琴高娃", "撒贝宁", "秦海璐", "任泉", "周杰"
        };
        mListView_contact.setAdapter(new ArrayAdapter(
                MainActivity.this,
                android.R.layout.simple_list_item_1, listItems
        ));
    }

4、在onCreate中调用初始化列表函数即可，代码如下。

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 沉浸式状态栏
        QMUIStatusBarHelper.translucent(this);
        
        View root = LayoutInflater.from(this).inflate(R.layout.activity_main, null);
        ButterKnife.bind(this, root);
        //初始化状态栏
        initTopBar();
        //初始化列表
        initListView();
        
        setContentView(root);
    }

MainActivity.java文件的代码结构如下。初始化状态栏的，就不贴出来了，上篇文章中有。

package com.example.baiyu.qmui_practise;

import ...

public class MainActivity extends Activity {
    @BindView(R.id.topbar)    QMUITopBar mTopBar;
    @BindView(R.id.listview_contact)    ListView mListView_contact;

    @Override
    protected void onCreate(Bundle savedInstanceState) {... }

    private void initListView() {...}

    private void initTopBar() {...}

现在运行起来，看看效果。数据已经成功加载，列表框也出来了。

我们现在使用的ListView布局，所Android系统自带的，在setAdapter中绑定的是android.R.layout.simple_list_item_1。现在采用自定义布局。

1. 从官方项目中，把layout下的simple_list_item.xml文件，拷贝到我们的项目中。
2. 修改适配器的布局绑定。将setAdapter函数的第2个参数，由android.R.layout.simple_list_item_1改成R.layout.simple_list_item，采用我们自定义的layout文件。
3. 修改activity_main.xml文件。在ListView的属性中添加divider和dividerHeight属性，否则就会有2条分隔线。自己可以测试看看加与不加这2个属性的效果。

现在运行起来，看看效果。和之前的还是稍微有点差异。分隔线的左边和边框有一定的间隔，不像前面的顶到了左边距。现在的显得更好看一点。

布局文件的ListView部分的代码，最后2行是新增加的。

simple_list_item.xml的代码就不用贴了，框架自带的有。

数据源我们使用的所String数组，官方的demo将String数组转为为ArrayList之后，再进行绑定。如果我们参照官方的，会将代码修改如下。

 String[] listItems = new String[]{
                "舒淇", "周杰伦", "古天乐", "姚明", "刘德华", "谢霆锋"
        };
 List data = new ArrayList<>();
        Collections.addAll(data, listItems);
        mListView_contact.setAdapter(new ArrayAdapter<>(MainActivity.this, R.layout.simple_list_item, data));
     }

运行起来，效果是一样的。至于是否要转换，我觉得没有必要。因为ArrayAdapter本身就支持String[]类型的参数，可以直接赋值进去。转换反而还增加了内存开销和时间。

如果要将ListView设置为多列，可参考下一篇文章：

多列ListView链接：QMUI Android框架使用探索5-列表框ListView实现多列与点击响应