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 <ListView2     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     <ListView12         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         <ImageView11             android:id="@+id/friend_iv"12             android:layout_width="40dp"13             android:layout_height="40dp"14             android:background="@mipmap/ic_launcher" />15         <TextView16             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     <View25         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  */15 public class ContactListFragment extends Fragment {16     ListView contact_list;17     String[] names = {"郭嘉", "黃月英", "華佗", "劉備", "陸遜", "呂布", "呂蒙", "馬超", "司馬懿", "孫權", "孫尚香", "夏侯惇",18             "許褚", "楊修", "張飛", "趙雲", "甄姬", "周瑜", "諸葛亮"};19     int[] icons = {R.mipmap.guojia, R.mipmap.huangyueying, R.mipmap.huatuo,20             R.mipmap.liubei, R.mipmap.luxun, R.mipmap.lvbu, R.mipmap.lvmeng,21             R.mipmap.machao, R.mipmap.simayi, R.mipmap.sunquan, R.mipmap.sunshangxiang,22             R.mipmap.xiahoudun, R.mipmap.xuchu, R.mipmap.yangxiu, R.mipmap.zhangfei,23             R.mipmap.zhaoyun, R.mipmap.zhenji, R.mipmap.zhouyu, R.mipmap.zhugeliang};24     @Nullable25     @Override26     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {27         View view = inflater.inflate(R.layout.contactlist_fragment,container,false);28         contact_list= (ListView) view.findViewById(R.id.contact_list);29         contact_list.setAdapter(new MyListViewAdapter(getContext()));30         return view;31     }32     class MyListViewAdapter extends BaseAdapter{33         Context context;34         public MyListViewAdapter(Context context) {35             this.context = context;36         }37         @Override38         public int getCount() {39             return names.length;40         }41         @Override42         public Object getItem(int position) {43             return names[position];44         }45         @Override46         public long getItemId(int position) {47             return position;48         }49         @Override50         public View getView(int position, View convertView, ViewGroup parent) {51             ViewHold vh;52             if (convertView == null) {53                 convertView = LayoutInflater.from(context).inflate(R.layout.contactlist_item, null);54                 vh = new ViewHold();55                 vh.iv = (ImageView) convertView.findViewById(R.id.friend_iv);56                 vh.tv = (TextView) convertView.findViewById(R.id.friend_tv);57                 convertView.setTag(vh);58             }59             vh = (ViewHold) convertView.getTag();60             vh.iv.setImageResource(icons[position]);61             vh.tv.setText(names[position]);62             return convertView;63         }64         class ViewHold {65             ImageView iv;66             TextView tv;67         }68     }69 }

今天就到這了，明天我們繼續對此布局功能進行擴充，睡覺啦。