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

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

昨天的（今天凌晨）的博文《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自定义分割线

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

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

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

drawable建立inset文件如下：

1 <?xml version="1.0" encoding="utf-8"?>
2 <inset xmlns:android="http://schemas.android.com/apk/res/android"
3     android:insetLeft="5dp"
4     android:insetRight="5dp"
5     android:drawable="@color/colorline">
6 </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为自定义的分割线粗细）：

1 <resources>
2     <!-- Default screen margins, per the Android Design guidelines. -->
3     <dimen name="activity_horizontal_margin">16dp</dimen>
4     <dimen name="activity_vertical_margin">16dp</dimen>
5     <dimen name="list_item_line">1dp</dimen>
6 </resources>

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

1 <ListView
2     android:id="@+id/contact_list"
3     android:layout_width="wrap_content"
4     android:layout_height="wrap_content"
5     android:layout_alignParentTop="true"
6     android:layout_alignParentStart="true"
7     android:divider="@drawable/list_item_divider"
8     android:dividerHeight="@dimen/list_item_line"/>

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

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

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

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical">
 6     <TextView
 7         android:layout_width="match_parent"
 8         android:layout_height="wrap_content"
 9         android:text="联系人管理"
10         android:textSize="30sp"/>
11     <ListView
12         android:id="@+id/contact_list"
13         android:layout_width="wrap_content"
14         android:layout_height="wrap_content"
15         android:layout_alignParentTop="true"
16         android:layout_alignParentStart="true"
17         android:divider ="#FFFFFF"/>
18 </LinearLayout>

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

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

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical" android:layout_width="match_parent"
 4     android:layout_height="match_parent">
 5     <LinearLayout
 6         android:layout_width="match_parent"
 7         android:layout_height="wrap_content"
 8         android:padding="5dp"
 9         android:orientation="horizontal">
10         <ImageView
11             android:id="@+id/friend_iv"
12             android:layout_width="40dp"
13             android:layout_height="40dp"
14             android:background="@mipmap/ic_launcher" />
15         <TextView
16             android:id="@+id/friend_tv"
17             android:layout_width="match_parent"
18             android:layout_height="40dp"
19             android:layout_marginLeft="10dp"
20             android:gravity="center_vertical"
21             android:text="wu"
22             android:textSize="15dp" />
23     </LinearLayout>
24     <View
25         android:layout_width="match_parent"
26         android:layout_height="1dp"
27         android:layout_marginLeft="5dp"
28         android:layout_marginRight="5dp"
29         android:background="@color/colorline"/>
30 </LinearLayout>

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

 1 import android.content.Context;
 2 import android.os.Bundle;
 3 import android.support.annotation.Nullable;
 4 import android.support.v4.app.Fragment;
 5 import android.view.LayoutInflater;
 6 import android.view.View;
 7 import android.view.ViewGroup;
 8 import android.widget.BaseAdapter;
 9 import android.widget.ImageView;
10 import android.widget.ListView;
11 import android.widget.TextView;
12 /**
13  * Created by panchengjia on 2016/12/25.
14  */