zoukankan      html  css  js  c++  java
  • 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自定义分割线

    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  */
    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     @Nullable
    25     @Override
    26     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         @Override
    38         public int getCount() {
    39             return names.length;
    40         }
    41         @Override
    42         public Object getItem(int position) {
    43             return names[position];
    44         }
    45         @Override
    46         public long getItemId(int position) {
    47             return position;
    48         }
    49         @Override
    50         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 }

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

  • 相关阅读:
    JQuery中的id选择器含有特殊字符时,不能选中dom元素
    解决Mac下MySQL登录问题
    Mac 安装mysql
    禁止chrome浏览器自动填充表单的解决方案
    Eclipse 编译错误 Access restriction: The type 'JPEGCodec' is not API (restriction on required library 'C:Program FilesJavajre7lib t.jar')
    羊皮纸月亮计划
    ActionSupport.getText()方法
    linux入门经验之谈
    tomcat设置默认启动项
    网页设置下载apk
  • 原文地址:https://www.cnblogs.com/panhouye/p/6220955.html
Copyright © 2011-2022 走看看