In Android, ListView achieves parallel image and text and custom split lines (improved like WeChat APP), androidlistview

In Android, ListView achieves parallel image and text and custom split lines (improved imitation APP), androidlistview

In the blog post Fragment and ViewPager in Android yesterday (early this morning), we used Fragment and ViewPager to simulate the layout framework. Today, we will use ListView to implement the basic view of the contact column. The effect is as follows:

To achieve the effect, we need to use two knowledge points:

1. Here we use custom adaptation to implement the image and text list (SimpleAdapter can also be used)

By inheriting the BaseAdapter (abstract class) custom adapter, You can implement a more flexible and complex list.

Optimization of custom adapter ListView:

(1) using a ListView with fixed width and height (match_parent) helps avoid repeated rendering of the ListView component when filling the item (layout of each row in the ListView), resulting in repeated calls to the getView method.

(2) Convertview is used to reuse the items that have been shadow, so as to avoid repeated creation of view objects for each item.

(3) Use ViewHolder optimization to improve the efficiency of searching components in containers.

2. ListView custom split line

By default, the split line (Divider) is added to ListView. However, this default split line is too ugly. We often need to customize the split line style to improve the user experience. Here we will introduce two methods.

(1) AddAndroid: divider = "# FFFFFF ",Then, use the View component in the item layout of the ListView to add a split line (as shown in later generations)

(2) create an inset file in drawable to define the position and color of the split line, and add the attribute to define the width (dp) of the split line in diments. xml under values)

Drawable creates an inset file as follows:

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:Defines embedded plotting resources. It must be a root element. ATTRIBUTES are as follows (ATTRIBUTES ):

Xmlns: android string value, required. It defines the namespace of XML and must be: http://schemas.android.com/apk/res/android

Android: drawable: required resource to be drawn. It points to a ready-to-be-embedded resource.

Android: insetTop: dimension value. Use a Dimension value or Dimension resource to define the embedding position on the top.

Android: insetRight: dimension value. Use a Dimension value or Dimension resource to define the right embedded position.

Android: insetBottom: size value. Use a Dimension value or Dimension resource to define the bottom embedded position.

Android: insetLeft: dimension value. Use the Dimension value or Dimension resource to define the left embedded position.

The diments. xml file in values is as follows (list_item_line is the custom split line width ):

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>

Declaration method in ListView (the divider and dividerHeight attributes are set to drable and custom styles in diments respectively ):

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"/>

The above are the main knowledge points we used this time. Next we will continue the code of yesterday to demonstrate the overall effect:

Step 1: refactor the contactlist_fragment.xml file in layout yesterday:

Add in ListView componentAndroid: divider = "# FFFFFF"To make the default split line invisible

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 = "Contact Management" 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>

Step 2: add the item layout file contactlist_item.xml corresponding to listView in layout.

The View component is added later for customizing the split line.

 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>

Step 3: rewrite the ContactListFragment. java file in java yesterday.

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 = {"guo jia", "Huang yueying", "Hua Yu", "Liu Bei ", "Lu Xun", "Lu Bu", "Lu Meng", "Ma Chao", "Sima Yi", "Sun Quan", "Sun shangxiang", "xia Hou Yu", 18 "Xu Yu ", "Yang Xiu", "Zhang Fei", "Zhao Yun", "Ji", "Zhou Yu", "Zhuge Liang"}; 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 VL; 52 if (convertView = null) {53 convertView = LayoutInflater. from (context ). inflate (R. layout. contactlist_item, null); 54 VL = new ViewHold (); 55 Vl. iv = (ImageView) convertView. findViewById (R. id. friend_iv); 56. TV = (TextView) convertView. findViewById (R. id. friend_ TV); 57 convertView. setTag (vh); 58} 59 FLAC = (ViewHold) convertView. getTag (); 60 consecutive seconds. iv. setImageResource (icons [position]); 61 Vl. TV. setText (names [position]); 62 return convertView; 63} 64 class ViewHold {65 ImageView iv; 66 TextView TV; 67} 68} 69}

Today is the end of the day. We will continue to expand the layout function and go to bed tomorrow.