A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 就业部_安卓组 于 2017-1-11 14:59 编辑

写这篇文章的时候我一直在想怎样的标题才是最合适的。最终定下了这个标题,原因是 ListView 绝对可以称得上是 Android 中最常用而又最难用的控件之一,差不多我们只要动手写一个 App,肯定都会用到这个控件。而为什么这么说呢?因为等你看完就明白了。

当我们的程序某个页面数据庞大,并且需要用一个类似列表的形式展示出来的时候,这个时候我们就需要用到 ListView ,举例来说,比如我们的手机联系人页面或者短信界面。这么多数据都需要展示,并且一个屏幕上还展示不下,必须要滑动,而且数据量庞大。这些数据展示到界面上我们怎么做呢?难道我们 for 循环,然后用 TextView 一个一个的往上加吗?
太 low 了!
而 ListView 就可以很简单的做这件事情了,先讲讲 ListView 的简单用法。

ListView 的基本用法

概念,前文说的差不多了,我们去写一点代码来展示一下,首先打开 studio 创建一个 ListViewApp 的项目,然后修改 activity_main.xml 文件的代码,如下所示:
[XML] 纯文本查看 复制代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mesmerize.listviewapp.MainActivity">

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

</RelativeLayout>

这个很简单,由于 ListView 只是一个简单的控件,所以直接给它指定一个宽高,然后指定 id 就可以了,然后可以看到 preview 视图显示如下:



右边还有个滚动条,而且里面的视图都是 Item 1 ,Sub Item 1等等一次类推,就是一个列表的展示形式,接下来我们回到 MainActivity.java ,去写一些代码。
[Java] 纯文本查看 复制代码
package com.mesmerize.listviewapp;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private List<String> list = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initData();

        ArrayAdapter<String> adapter = new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1, list);
        ListView mListView = (ListView) findViewById(R.id.lv_listview);

        // 设置适配器
        mListView.setAdapter(adapter);
    }

    /**
     * 初始化数据
     */
    private void initData(){

        for (int i = 0; i < 20; i++) {

            list.add("我是测试数据第 " + i + " 条");
        }
    }
}

这里代码量很少,稍微讲一下,ArrayAdapter adapter = new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1, list); 这行代码比较长,意思其实就是创建一个 Adapter 适配器对象。而这个适配器的作用就是 mListView.setAdapter(adapter); 这句话,setAdapter 这个方法需要一个 Adapter,而我们在上面已经创建好了。那么这个 ArrayAdapter里面一大堆参数什么意思呢?
首先第一个参数就是上下文,在这里咱们写 MainActivity.this,第二个参数要传进去一个 xml 布局,就是显示的样式,待会让大家看到显示效果之后再详细讲这个参数,第三个参数就是数据源,就是需要填充的数据。
接下来运行,看一下运行显示效果。




只显示7条数据,还有十几条数据到哪里了?不用担心,慢慢往下滑,可以滚动的。




这就是这个界面的实现方式,是不是感觉代码量很少,很简单,很神奇?其实就是这么简单,接下来说说 ArrayAdapter 里面参数的意思。
我们可以看到需要三个参数,第一个上下文,第三个数据源,第二个这么长,究竟是怎么回事,什么叫 ListView 显示布局?咱们上面写的那个 android.R.layout.simple_list_item_1 这么长又是什么东西?
首先,我们要知道,Android 有一些比较常见的布局的一些示例,而 android.R.layout.simple_list_item_1 就是其中之一,这是系统给我们提供的一个布局,我们点进去看看这个布局是什么
[XML] 纯文本查看 复制代码
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2006 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          [url=http://www.apache.org/licenses/LICENSE-2.0]http://www.apache.org/licenses/LICENSE-2.0[/url]

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:paddingStart="?android:attr/listPreferredItemPaddingStart"
    android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
    android:minHeight="?android:attr/listPreferredItemHeightSmall" />


点进去之后发现,其实就是一个简单的 TextView 而已,省去了我们再创建一个 xml 布局然后写一个 TextView 的事情了。那为什么 ListView又有一个布局呢?当前 Activity 不是已经有了一个 activity_main.xml 布局了吗?为什么这又多出来一个?
咱们仔细想一想,activity_main.xml 这个只是当前界面 Activity 的布局,也就是最外面最大的。回想一下,咱们在这个里面加入了一个 ListView 的控件,对吧?那接下来就是这个 ListView 的事情了,跟那个 activity_main.xml 没关系了。先理清这一点,那既然如此,ListView 长什么样子呢?咱们是不是应该给它指定一个样式呢?要知道 ListView 里面动则几十条上百条的数据,而且每一条长的都一样,那每一条应该长什么样子呢?这就好像我跟你说去给我买十条裤子,你是不是要问买什么颜色的,多长的?
这个例子里对照 ArrayAdapter 就像这样的关系:
ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1, list);
ArrayAdapter<>( 上下文 , 布局样式 , 数据源);
ArrayAdapter<>( 我 , 裤子颜色、长短 , 10条裤子);
以上就是关于适配器的一些简单讲解。
我们要知道 ListView 是用来展示大量数据的,所以我们要提前把数据准备好,不管你这个数据是哪里来的。但是要切记,数据是无法直接传递给 ListView 的,我们是需要借助 Adapter 适配器来完成这项工作。当我们创建好了适配器之后,接下来调用 ListView 的 setAdapter 方法就可以了,这样 ListView 和数据之间的关联就建立完成了。
当然适配器不止 ArrayAdapter 这一种,还有其他很多适配器的实现类,ArrayAdapter 只是其中一种,其他的在后面我们慢慢会介绍到。

自定义我们的 ListView

也许你还沉浸在几行代码搞定无数个条目的喜悦中,但我们是一群追求更高水准的程序员,不能止步不前。仔细想一想,其实只能显示一个文本内容,单纯的用一个 TextView 实在是有点单调了,接下来就来看看如何写出更炫酷的界面呢?
这个 ListView 长什么样子呢?首先你打开你的手机,进入 QQ 然后看一眼“消息”页面,咱们今天就模仿这个 ListView 来写一个相同的界面。在这里我预先准备了八张图片,用于头像显示,八张图片如下:





咱们就用这八张来作为头像的显示,然后分析怎么来做数据。首先每一条信息都要有头像、昵称、最近一条聊天内容、时间。需要这四个内容,所以咱们要准备这些数据,然后接下来开始写代码。
目前我给出需求,最终效果图如下:


大家想想,针对这种该怎么写呢?
我会在下一篇里面着重讲述这个界面如何写以及它的运行效率和优化,在这之前,大家想想,如果是你,你该怎么来分析怎么来做呢?


做好之后来看一看下一篇:
Android 开发必备:ListView(下)





       Android 人事+技术总贴
       Android 基础篇总贴
       Android 进阶篇总贴
       Android 讨论区

       以上言论,如有错误或者表达不准确或者有纰漏的地方还请指正,同时欢迎大家在评论区留言给予一定的建议,我会根据大家的意见进行相应的改正,谢谢各位!





03.png (13.36 KB, 下载次数: 20)

03.png

05.png (282.13 KB, 下载次数: 18)

05.png

ListViewApp.zip

1.25 MB, 下载次数: 90

1 个回复

倒序浏览
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马