ListView学习（一）

最近了解了LIstView的用法，在听了孙老师的课程后，终于对Adapter有了一定的理解,特作此文记之。

---

ListView在App当中应用相当广泛，比如QQ好友列表、微博等等，都是某种特定的列表，所以这也是一个基本的组件，是我等小白不可不跨的槛。

要完成一个ListView的设计，主要需要以下部件：

• main.xml
• item.xml
• Adapter
• 数据
  
  其中，main.xml包含ListView整体组件，item.xml则是ListView中每一项的具体布局，Adapter则是将视图中组件与数据绑定的桥梁。

首先，当然要设计好界面，我这里设计了一个类似微博的界面。

一、layout/main.xml

在main布局文件内，仅一个简单的ListView组件

    <ListView
        android:id="@+id/lv_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:dividerHeight="5dp"/>

二、layout/item.xml

然后在item文件内写了丑陋的单条微博界面

<?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"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_margin="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv_avatar"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/avatar1"
            android:layout_alignParentLeft="true"
            />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginStart="5dp"
            android:orientation="vertical"
            android:layout_toEndOf="@+id/iv_avatar">

            <TextView
                android:id="@+id/tv_nickname"
                android:layout_width="wrap_content"
                android:layout_height="25dp"
                android:text="黑冰"/>

            <TextView
                android:id="@+id/tv_news_source"
                android:layout_width="wrap_content"
                android:layout_height="25dp"
                android:text="来自 weibo.com"/>

        </LinearLayout>

        <Button
            android:id="@+id/btn_follow"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:text="+ 关注"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"/>

    </RelativeLayout>

    <TextView
        android:id="@+id/tv_body"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginVertical="3dp"
        android:textSize="15sp"
        android:text="特朗普动用特权建墙？
California, N.Y. and other states sue Trump over national emergency to fund border wall"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_forward"
            android:layout_marginHorizontal="5dp"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:text="转发3000"/>

        <Button
            android:id="@+id/btn_comment"
            android:layout_marginHorizontal="5dp"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:text="评论1000"/>

        <Button
            android:id="@+id/btn_love"
            android:layout_marginHorizontal="5dp"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:text="赞1000"/>
    </LinearLayout>
</LinearLayout>

效果如下，请勿吐槽：

三、/MyAdapter.java

下一步，就是编写自定义Adapter（因为ArrayAdapter和SimpleAdapter比较简单，不再赘述）

package com.example.administrator.bloglistview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;
import java.util.Map;

public class MyAdapter extends BaseAdapter {

    List<Map<String, Object>> list;
    LayoutInflater inflater;

    public MyAdapter(Context context){
        this.inflater = LayoutInflater.from(context);
    }

    public void setList(List<Map<String, Object>> list) {
        this.list = list;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;

        if(convertView == null) {
            convertView = inflater.inflate(R.layout.item, null);
            holder = new ViewHolder();
            holder.avatar = convertView.findViewById(R.id.iv_avatar);
            holder.nickname = convertView.findViewById(R.id.tv_nickname);
            holder.newsSource = convertView.findViewById(R.id.tv_news_source);
            holder.follow = convertView.findViewById(R.id.btn_follow);
            holder.body = convertView.findViewById(R.id.tv_body);
            holder.forward = convertView.findViewById(R.id.btn_forward);
            holder.comment = convertView.findViewById(R.id.btn_comment);
            holder.love = convertView.findViewById(R.id.btn_love);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        Map map = list.get(position);
        holder.avatar.setImageResource((Integer) map.get("avatar"));
        holder.nickname.setText((String)map.get("nickname"));
        holder.newsSource.setText((String)map.get("newsSource"));
        holder.body.setText((String)map.get("body"));

        return convertView;
    }

    public static class ViewHolder {
        ImageView avatar;
        TextView nickname;
        TextView newsSource;
        Button follow;
        TextView body;
        Button forward;
        Button comment;
        Button love;
    }
}

这里要注意两点：一是inflater，二是数据绑定。

首先，inflater要在构造函数里定义好，再去getView方法里调用inflate静态方法，以将xml视图转化为View对象。

对于数据绑定，我们用的是自定义类ViewHolder来控制。首先是将视图里所有组件与ViewHolder类里的属性绑定，再取数据赋值。

可以看出，在MyAdapter类里，最重要的就是getView方法，因为它完成了布局与数据的连接。

四、/MainActivity.java

最后，在Main文件里传入数据，并设置好适配器即可。

package com.example.administrator.bloglistview;

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

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

public class MainActivity extends AppCompatActivity {

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

        ListView lvMain = findViewById(R.id.lv_main);
        List<Map<String, Object>> list = new ArrayList<>();

        Map<String, Object> map = new HashMap<>();
        map.put("avatar", R.drawable.avatar1);
        map.put("nickname", "基笃山伯爵");
        map.put("newsSource", "来自 iPhone客户端");
        map.put("body", "【“凯奇莱案”卷宗丢失等问题调查结果公布：系王林清故意所为】今天，中央政法委牵头，中央纪委国家监委、最高检、公安部参加的联合调查组，公布了最高人民法院二审审理的陕西榆林“凯奇莱案”卷宗丢失等问题的调查结果。经查明：最高法民一庭助理审判员王林清因工作中对单位产生不满，于2016年11月25");
        list.add(map);

        map = new HashMap<>();
        map.put("avatar", R.drawable.avatar2);
        map.put("nickname", "赵丽颖颖生活轧机");
        map.put("newsSource", "来自 iPhone客户端");
        map.put("body", "#为了不上学做过的事#\n孙子：爷爷，我不想上学。\n爷爷：不，大孙子，你必须想!");
        list.add(map);

        map = new HashMap<>();
        map.put("avatar", R.drawable.avatar3);
        map.put("nickname", "羊咩咩爱羊");
        map.put("newsSource", "来自 荣耀8青春版 颜值担当");
        map.put("body", "看上去很温柔的人，不一定都是好脾气，不生气不代表没脾气，不计较不代表脾气好，只是自己的修养克制了心中的怒火。如果你非要触及我的底线，我可以告诉你，我并非善良。 \u200B\u200B\u200B \u200B\u200B\u200B\u200B");
        list.add(map);

        map = new HashMap<>();
        map.put("avatar", R.drawable.avatar4);
        map.put("nickname", "英国报姐");
        map.put("newsSource", "来自 iPhone客户端");
        map.put("body", "再来品一下欧洲老醋王格林德沃的这句“Do you think Dumbledore will mourn for you”有多阴阳怪气[酸]本来以为预告里已经是醋意大发了，没想到正片里是一字一句顿出来的简直酸到爆！德普自己都说格林德沃就是嫉妒纽特，你们校园黄昏恋能不能放过学长！！");
        list.add(map);

        map = new HashMap<>();
        map.put("avatar", R.drawable.avatar5);
        map.put("nickname", "Mr_张教主");
        map.put("newsSource", "来自 iPhone客户端");
        map.put("body", "人生如梦，岁月无情。蓦然回首，才发现人活着是一种心情。穷也好，富也好，得也好，失也好。一切都是过眼云烟。不论昨天、今天、明天，能豁然开朗就是美好的一天。不论亲情、友情、爱情，能永远珍惜就是好心情。 \u200B\u200B\u200B\u200B");
        list.add(map);

        MyAdapter adapter = new MyAdapter(this);
        adapter.setList(list);
        lvMain.setAdapter(adapter);
    }
}

运行后，界面如下：

以上只是手动的写入了一些数据，现实情况肯定要从数据库中取，不会这么蠢的，不必纠结。

且目前所有按钮都是空的，下节再实现按钮功能。