ListView的简单应用

这是效果图

效果图

ListView

ListView是用来展示数据的，例如上面的效果图，其中的每一行是ListView的一个子项（Item），每一个子项的布局都是一致的：左边是一个ImageView，ImageView的右边有两个TextView，一上一下，上面的TextView用来显示标题，下面的TextView用来显示内容。

ListView的使用涉及到3个方面

1. ListView的添加
2. ListView的子项的布局
3. 适配器

ListView的添加

只需要在主界面的布局文件中加入ListView的标签即可，如果为了美观的话，可以设置一下它的属性。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ListView
    android:id="@+id/list_view"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp" />

ListView的Item的布局

item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:paddingLeft="10dp"
        android:id="@+id/pic"
        android:layout_width="60dp"
        android:layout_height="60dp" />

    <TextView
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/pic"
        android:textColor="#000000"
        android:id="@+id/text"
        android:padding="2dp"
        android:textSize="20sp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/content"
        android:gravity="center"
        android:layout_alignBottom="@id/pic"
        android:layout_marginLeft="10dp"
        android:layout_below="@id/text"
        android:layout_toRightOf="@id/pic"
        android:textColor="#999999"
        android:textSize="12sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

适配器

适配器是连接展示数据和ListView之间的桥梁。ListView展示数据的原理是这样的：

首先ListView通知适配器要显示第几行数据，然后适配器根据ListView的子项的布局文件，将数据填充到Item布局中的View中，
然后把填充好的布局文件转换为一个View返回给ListView，最后ListView显示该View

MainActivity.java

package com.dadaozhijian.apidemo;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * ListView的使用步骤：
 * 1. 准备数据源
 * 2. 新建适配器，并将数据和适配器绑定
 * 3. 视图（ListView、GridView等）加载适配器
 */
public class MainActivity extends Activity implements AdapterView.OnItemClickListener, AbsListView.OnScrollListener {

    private ListView mListView;
    // 准备数据
    private String[] mTitle = {"出汗", "淫笑", "淫笑2", "装可爱", "无语", "得意", "惊讶", "要哭了"};
    private String[] mContent = {"表达了很无语，被惊呆的感觉！",
            "有点坏，有点害羞的感觉！",
            "无语中.....", "撒娇，想被捏脸！",
            "表达了很无语，鄙视的感觉！",
            "吃货吧，这个表情！",
            "被惊呆了！表示很崇拜!",
            "很可怜，装可怜！！！！"};
    private int[] mPic = {R.drawable.one, R.drawable.two, R.drawable.three, R.drawable.four, R.drawable.five, R.drawable.six, R.drawable.seven, R.drawable.eight};

    private SimpleAdapter mSimpleAdapter;
    // SimpleAdapter的数据源
    private List<Map<String, Object>> mData;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mListView = (ListView) findViewById(R.id.list_view);

        mData = new ArrayList<>();
        /**
         * SimpleAdapter(context,data,resource,from,to)
         * context:当前的Context
         * data：数据源(List<? extends Map<String,?>> data)一个Map所组成的List集合
         *       每一个Map对应ListView列表中的一行
         *       每一个Map中的键必须包含所有在from中所指定的字符串
         * resource:列表项的布局文件的Id
         * from:Map中的键名，是一个String数组
         * to:绑定数据视图中的ID-与from对应（也就是每个列表项的布局中的view的id）
         */
        mSimpleAdapter = new SimpleAdapter(this, getData(), R.layout.item, new String[]
                {"pic", "title","content"}, new int[]{R.id.pic, R.id.text,R.id.content});

        mListView.setAdapter(mSimpleAdapter);

        mListView.setOnItemClickListener(this);
        mListView.setOnScrollListener(this);
    }

    /**
     * 准备数据源
     *
     * @return 数据源
     */
    private List<Map<String, Object>> getData() {

        for (int i = 0; i < mTitle.length; i++) {
            Map<String, Object> map = new HashMap<>();
            map.put("pic", mPic[i]);
            map.put("title",mTitle[i]);
            map.put("content",mContent[i]);
            mData.add(map);
        }
        return mData;
    }

    /**
     * 当ListView中的Item被点击时，调用这个方法
     *
     * @param parent   The AdapterView where the click happened
     * @param view     The view within the AdapterView that was clicked (this will be a view provided by the adapter)
     * @param position The position of the view in the adapter
     * @param id       The row id of the item that was clicked
     */
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

        Toast.makeText(this, (CharSequence) mData.get(position).get("title"), Toast.LENGTH_SHORT).show();

    }

    /**
     * 当视图在滚动时，调用
     *
     * @param view        滚动的视图
     * @param scrollState 滚动的状态
     *                    SCROLL_STATE_FLING
     *                    由于手指离开屏幕时用力划了一下，视图在惯性下滚动
     *                    SCROLL_STATE_IDLE
     *                    视图停止滚动
     *                    SCROLL_STATE_TOUCH_SCROLL
     *                    视图在手指的带动下滚动
     */
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        switch (scrollState) {

            case SCROLL_STATE_FLING:
                Log.d("Main", "由于手指离开屏幕时用力划了一下，视图在惯性下滚动");
                break;
            case SCROLL_STATE_IDLE:
                Log.d("Main", "视图停止滚动");
                break;
            case SCROLL_STATE_TOUCH_SCROLL:
                Log.d("Main", "手指带动视图滚动");
                break;
        }
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

    }
}