最近了解了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);
}
}
运行后,界面如下:
以上只是手动的写入了一些数据,现实情况肯定要从数据库中取,不会这么蠢的,不必纠结。
且目前所有按钮都是空的,下节再实现按钮功能。