Android中ListView實現圖文並列並且自定義分割線(完善仿微信APP)
昨天的(今天凌晨)的博文《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):
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">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="list_item_line">1dp</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="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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="聯絡人管理"
android:textSize="30sp"/>
<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="1.0" encoding="utf-8"?>
<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="5dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/friend_iv"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:id="@+id/friend_tv"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:text="wu"
android:textSize="15dp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="@color/colorline"/>
</LinearLayout>
第三步:重寫昨天java中對應的ContactListFragment.java檔案
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.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 2016/12/25.
*/
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;
}
}
}
今天就到這了,明天我們繼續對此佈局功能進行擴充套件,睡覺啦。