详解Android中ListView实现图文并列并且自定义分割线（完善仿微信APP）

2019-12-12 04:13:12

字体：大中小

来源：转载

供稿：网友

昨天的（今天凌晨）的博文《Android中Fragment和ViewPager那点事儿》中，我们通过使用Fragment和ViewPager模仿实现了微信的布局框架。今天我们来通过使用ListView实现其中联系人一栏的基本视图，效果如下：

要实现上图的效果，我们要用到两个知识点：

1、这里我们使用自定义适配实现图文列表（当然也可以用SimpleAdapter）

通过继承BaseAdapter（抽象类）自定义适配器可以实现更灵活更复杂的列表。

自定义适配器ListView的优化：

（1）使用固定宽高（match_parent）的ListView，有助于在填充item（ListView中每行的布局）时避免重复渲染ListView组件，导致重复多次调用getView方法。

（2）Convertview用来重复使用已被影藏的item对象，从而避免重复创建每个item的view对象。

（3）使用ViewHolder优化提高容器中查找组件的效率。

2、ListView自定义分割线

中默认添加分割线（Divider），但这个默认分割线太丑，我们往往需要自定义分割线样式提升用户体验，这里介绍两种方法

（1）在layout中的ListView组件中添加android:divider ="#FFFFFF"，然后在ListView对应的item布局中使用View组件添加分割线（后面代中会演示）

（2）在drawable建立inset文件来定义分割线的位置以及颜色，在values下的diments.xml中添加属性定义分割线的粗细（dp）

drawable建立inset文件如下：

 <?xml version="1.0" encoding="utf-8"?><inset xmlns:android="http://schemas.android.com/apk/res/android"   android:insetLeft="5dp"   android:insetRight="5dp"   android:drawable="@color/colorline"> </inset>

inset属性：定义嵌入的可绘制资源。它必须是根元素。属性如下（ATTRIBUTES）：

xmlns:android 字符串值，必须的。它定义了XML的命名空间，必须是：http://schemas.android.com/apk/res/android

android:drawable ：要绘制的资源，必须的，它指向一个要嵌入的可绘制资源。

android:insetTop ：尺寸值。用尺寸值或Dimension资源定义顶部的嵌入位置。

android:insetRight ：尺寸值。用尺寸值或Dimension资源定义右边的嵌入位置。

android:insetBottom ：尺寸值。用尺寸值或Dimension资源定义底部的嵌入位置。

android:insetLeft ：尺寸值。用尺寸值或Dimension资源定义左边的嵌入位置。

values下的diments.xml文件如下（list_item_line为自定义的分割线粗细）：

 <resources>   <!-- Default screen margins, per the Android Design guidelines. -->   <dimen name="activity_horizontal_margin">dp</dimen>   <dimen name="activity_vertical_margin">dp</dimen>   <dimen name="list_item_line">dp</dimen> </resources>

ListView中的声明方式（添加divider以及dividerHeight属性分别设置为drable以及diments中自定义的样式）：

 <ListView   android:id="@+id/contact_list"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:layout_alignParentTop="true"   android:layout_alignParentStart="true"   android:divider="@drawable/list_item_divider"   android:dividerHeight="@dimen/list_item_line"/>

以上就是我们本次主要使用的知识点，下面我们继续昨天的代码，做整体效果演示：

第一步：重构昨天layout中contactlist_fragment.xml文件：

ListView组件中添加android:divider ="#FFFFFF"，使默认分割线不可见

 <?xml version="." encoding="utf-"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:orientation="vertical">   <TextView     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:text="联系人管理"     android:textSize="sp"/>   <ListView     android:id="@+id/contact_list"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_alignParentTop="true"     android:layout_alignParentStart="true"     android:divider ="#FFFFFF"/> </LinearLayout>

第二步：layout中添加listView对应的item布局文件contactlist_item.xml

后面添加了View组件用于自定义分割线

 <?xml version="." encoding="utf-"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:orientation="vertical" android:layout_width="match_parent"   android:layout_height="match_parent">   <LinearLayout     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:padding="dp"     android:orientation="horizontal">     <ImageView       android:id="@+id/friend_iv"       android:layout_width="dp"       android:layout_height="dp"       android:background="@mipmap/ic_launcher" />     <TextView       android:id="@+id/friend_tv"       android:layout_width="match_parent"       android:layout_height="dp"       android:layout_marginLeft="dp"       android:gravity="center_vertical"       android:text="wu"       android:textSize="dp" />   </LinearLayout>   <View     android:layout_width="match_parent"     android:layout_height="dp"     android:layout_marginLeft="dp"     android:layout_marginRight="dp"     android:background="@color/colorline"/> </LinearLayout>

第三步：重写昨天java中对应的ContactListFragment.java文件

 import android.content.Context; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.ListView; import android.widget.TextView; /** * Created by panchengjia on //. */ public class ContactListFragment extends Fragment {   ListView contact_list;   String[] names = {"郭嘉", "黄月英", "华佗", "刘备", "陆逊", "吕布", "吕蒙", "马超", "司马懿", "孙权", "孙尚香", "夏侯",       "许褚", "杨修", "张飞", "赵云", "甄姬", "周瑜", "诸葛亮"};   int[] icons = {R.mipmap.guojia, R.mipmap.huangyueying, R.mipmap.huatuo,       R.mipmap.liubei, R.mipmap.luxun, R.mipmap.lvbu, R.mipmap.lvmeng,       R.mipmap.machao, R.mipmap.simayi, R.mipmap.sunquan, R.mipmap.sunshangxiang,       R.mipmap.xiahoudun, R.mipmap.xuchu, R.mipmap.yangxiu, R.mipmap.zhangfei,       R.mipmap.zhaoyun, R.mipmap.zhenji, R.mipmap.zhouyu, R.mipmap.zhugeliang};   @Nullable   @Override   public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {     View view = inflater.inflate(R.layout.contactlist_fragment,container,false);     contact_list= (ListView) view.findViewById(R.id.contact_list);     contact_list.setAdapter(new MyListViewAdapter(getContext()));     return view;   }   class MyListViewAdapter extends BaseAdapter{     Context context;     public MyListViewAdapter(Context context) {       this.context = context;     }     @Override     public int getCount() {       return names.length;     }     @Override     public Object getItem(int position) {       return names[position];     }     @Override     public long getItemId(int position) {       return position;     }     @Override     public View getView(int position, View convertView, ViewGroup parent) {       ViewHold vh;       if (convertView == null) {         convertView = LayoutInflater.from(context).inflate(R.layout.contactlist_item, null);         vh = new ViewHold();         vh.iv = (ImageView) convertView.findViewById(R.id.friend_iv);         vh.tv = (TextView) convertView.findViewById(R.id.friend_tv);         convertView.setTag(vh);       }       vh = (ViewHold) convertView.getTag();       vh.iv.setImageResource(icons[position]);       vh.tv.setText(names[position]);       return convertView;     }     class ViewHold {       ImageView iv;       TextView tv;     }   } }

今天就到这了，明天我们继续对此布局功能进行扩展，睡觉啦。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Android中Listview下拉刷新和上拉加载更多的多种实现方案

下一篇：详解Android的内存优化--LruCache