詳解Android中ListView實(shí)現(xiàn)圖文并列并且自定義分割線（完善仿微信APP）
昨天的（今天凌晨）的博文《Android中Fragment和ViewPager那點(diǎn)事兒》中，我們通過使用Fragment和ViewPager模仿實(shí)現(xiàn)了微信的布局框架。今天我們來通過使用ListView實(shí)現(xiàn)其中聯(lián)系人一欄的基本視圖，效果如下：
要實(shí)現(xiàn)上圖的效果，我們要用到兩個(gè)知識(shí)點(diǎn)：
1、這里我們使用自定義適配實(shí)現(xiàn)圖文列表（當(dāng)然也可以用SimpleAdapter）
通過繼承BaseAdapter（抽象類）自定義適配器可以實(shí)現(xiàn)更靈活更復(fù)雜的列表。
自定義適配器ListView的優(yōu)化：
（1）使用固定寬高（match_parent）的ListView，有助于在填充item（ListView中每行的布局）時(shí)避免重復(fù)渲染ListView組件，導(dǎo)致重復(fù)多次調(diào)用getView方法。
（2）Convertview用來重復(fù)使用已被影藏的item對(duì)象，從而避免重復(fù)創(chuàng)建每個(gè)item的view對(duì)象。
（3）使用ViewHolder優(yōu)化提高容器中查找組件的效率。
2、ListView自定義分割線
中默認(rèn)添加分割線（Divider），但這個(gè)默認(rèn)分割線太丑，我們往往需要自定義分割線樣式提升用戶體驗(yàn)，這里介紹兩種方法
（1）在layout中的ListView組件中添加android:divider ="#FFFFFF"，然后在ListView對(duì)應(yīng)的item布局中使用View組件添加分割線（后面代中會(huì)演示）
（2）在drawable建立inset文件來定義分割線的位置以及顏色，在values下的diments.xml中添加屬性定義分割線的粗細(xì)（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 ：要繪制的資源，必須的，它指向一個(gè)要嵌入的可繪制資源。
android:insetTop ：尺寸值。用尺寸值或Dimension資源定義頂部的嵌入位置。
android:insetRight ：尺寸值。用尺寸值或Dimension資源定義右邊的嵌入位置。
android:insetBottom ：尺寸值。用尺寸值或Dimension資源定義底部的嵌入位置。
android:insetLeft ：尺寸值。用尺寸值或Dimension資源定義左邊的嵌入位置。
values下的diments.xml文件如下（list_item_line為自定義的分割線粗細(xì)）：
<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屬性分別設(shè)置為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"/>
以上就是我們本次主要使用的知識(shí)點(diǎn)，下面我們繼續(xù)昨天的代碼，做整體效果演示：
第一步：重構(gòu)昨天layout中contactlist_fragment.xml文件：
ListView組件中添加android:divider ="#FFFFFF"，使默認(rèn)分割線不可見
<?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="聯(lián)系人管理"
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對(duì)應(yīng)的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中對(duì)應(yīng)的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 = {"郭嘉", "黃月英", "華佗", "劉備", "陸遜", "呂布", "呂蒙", "馬超", "司馬懿", "孫權(quán)", "孫尚香", "夏侯惇",
"許褚", "楊修", "張飛", "趙云", "甄姬", "周瑜", "諸葛亮"};
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;
}
}
}
今天就到這了，明天我們繼續(xù)對(duì)此布局功能進(jìn)行擴(kuò)展，睡覺啦。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android仿微信圖片點(diǎn)擊瀏覽的效果，Android 2D平滑放大顯示ImageView,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
OpenGL Shader實(shí)例分析（3）等待標(biāo)識(shí)效果
這篇文章主要介紹了OpenGL Shader實(shí)例分析第3篇，等待標(biāo)識(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
大家好，本篇文章主要講的是Android基礎(chǔ)之常用控件屬性介紹，感興趣的同學(xué)趕快來看一看吧，對(duì)你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12
Android RefreshLayout實(shí)現(xiàn)下拉刷新布局
這篇文章主要為大家詳細(xì)介紹了Android RefreshLayout實(shí)現(xiàn)下拉刷新布局,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了Android仿微信語音消息的錄制和播放功能,需要的朋友可以參考下2017-09-09
Android編程實(shí)現(xiàn)popupwindow定時(shí)消失的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)popupwindow定時(shí)消失的方法,結(jié)合實(shí)例形式分析了Android使用定時(shí)器實(shí)現(xiàn)popupwindow定時(shí)消失的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
Android 中RxPermissions 的使用方法詳解
這篇文章主要介紹了Android 中RxPermissions 的使用方法詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
android Launcher AppWidget添加步驟介紹
大家好，本篇文章主要講的是android Launcher AppWidget添加步驟介紹，感興趣的同學(xué)趕快來看一看吧，對(duì)你有幫助的話記得收藏一下，方便下次瀏覽2022-01-01
Android自定義控件eBook實(shí)現(xiàn)翻書效果實(shí)例詳解
這篇文章主要介紹了Android自定義控件eBook實(shí)現(xiàn)翻書效果的方法,結(jié)合實(shí)例形式分析了Android自定義控件實(shí)現(xiàn)翻書效果的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2016-10-10
Android 使用【AIDL】調(diào)用外部服務(wù)的解決方法
本篇文章是對(duì)Android中使用AIDL調(diào)用外部服務(wù)的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06