Android Studio——自定义ListView子项目布局

之前学习的ListView都是采用android系统自带的子项目布局，比如android.R.layout.simple_list_item_1（单行文字），以及android.R.layout.simple_list_item_2(双行文字)

但是实际软件开发中我们更希望ListView的子项目的布局更加丰富，不仅有文字还有图片，图标之类的。当然位置也可以自定义了。下面我就来接受下怎么制作一个自定义的ListView的Item布局并通过BaseAdpater绑定 显示。

当然首先你需要设计一个输入自己ListView选项Item的布局：比如我设计的就是下面这样

每个ListView选项包括一个头像ImageView, 姓名TextView,动态Dynamic，以及一个查看Button。点击查看Button的时候会在最顶部的两个TextView中显示点击选项的姓名和动态文字。效果如下面所示:

下面是选项布局文件holderlistviw.xml中的代码:

<span style="font-size:14px;"><?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="120dp"
    android:orientation="horizontal" >
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="5dp"
        android:orientation="vertical" >
        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:textSize="20sp" />
        <TextView
            android:id="@+id/dynamic"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:layout_marginTop="10dp"
            android:textSize="25sp" />
    </LinearLayout>
    <LinearLayout
        android:gravity="right" 
        android:layout_width="match_parent"
   		 android:layout_height="match_parent"
   		 android:orientation="horizontal"
         >
        <Button 
    	    android:layout_alignParentRight="true"
            android:layout_width="40dp"
            android:layout_height="match_parent"
            android:text="查 看"
            android:id="@+id/check"
            android:textSize="20sp"
            android:layout_gravity="right"
            />
    </LinearLayout>
</LinearLayout></span>

注意:之所在Button中嵌套一个LinearLayout是为了让按钮靠最右边.这就是在创建项目中查看按钮的OnClickListener的时候，为了获得选项中的名字和动态，需要先获得选项的View。这时候需要把代码携程View myView = (View)checkButton.getParent().getParent().因为嵌套了两个LinearLayout布局，这个一定要注意，如果携程View myView = (View)checkButton.getParent()会引起程序崩溃。

接着要创建一个自定义的ListViewAdapter，继承BaseAdapter，重写getCount()和getView（）方法。对应的ListViewAdapter.java中代码如下:

<span style="font-size:14px;">package com.example.fileoperator;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class ListViewAdapter extends BaseAdapter {
	private List<String> name = null;
	private List<String> dynamic = null;
	private int[] imageId = null;
	private LayoutInflater myLayoutInflater = null;
	private Context context = null;
	private Button.OnClickListener myButtonListener = null;
	private static class ViewHolder{//创建一个内部类ViewHolder，设置选项布局中的元素
		public ImageView imageView = null;
		public TextView nameTextView = null;
		public TextView dynamicTextView = null;
		public Button checkButton = null;
	}
	public void setItemCheckButtonListener(Button.OnClickListener myButtonListener){
		this.myButtonListener = myButtonListener;
	}
	public ListViewAdapter(List<String> name, List<String> dynamic,
			int[] imageId, Context context) {  //传入Adapter的参数，并创建Adapter
		this.context = context;
		this.name = name;
		this.dynamic = dynamic;
		this.imageId = imageId;
		this.myLayoutInflater = LayoutInflater.from(context);
	}

	@Override
	public int getCount() {
		int count = 0;
		if(imageId==null||name==null|dynamic==null){
			return count;
		}else
			return name.size();
	}

	@Override
	public Object getItem(int position) {
		return position;
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public View getView(int position, View view, ViewGroup viewGroup) {
		ViewHolder holder = null;
		if(view == null){
			holder = new ViewHolder();
			view = myLayoutInflater.inflate(R.layout.holderviewlayout, null);
			holder.imageView = (ImageView)view.findViewById(R.id.image);
			holder.nameTextView = (TextView)view.findViewById(R.id.name);
			holder.dynamicTextView = (TextView)view.findViewById(R.id.dynamic);
			holder.checkButton = (Button)view.findViewById(R.id.check);
			view.setTag(holder);
		}else{
			holder = (ViewHolder) view.getTag();
		}
		holder.imageView.setImageResource(imageId[position]);
		holder.nameTextView.setText(name.get(position).toString());
		holder.dynamicTextView.setText(dynamic.get(position));
		holder.checkButton.setOnClickListener(myButtonListener);
		return view;
	}
}
</span>

通过LayoutInflater可以将xml布局文件转换为View对象。LayoutInflater.from(context)可以从一个上下文context获得它的LayoutInflater.

这里的ViewHolder是一个内部类，用它来加载布局中的元素，然后改变元素的属性。

最后用一个ListActivity实现最终效果，主程序ListViewActivity.java文件中代码:

<span style="font-size:14px;">package com.example.fileoperator;

import java.util.ArrayList;
import java.util.List;

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;

public class ListViewActivity  extends ListActivity{
	private TextView textView1 = null;
	private TextView textView2 = null;
	private String[] myStringArr;
	private String[] myDaynamic;
	private ListView myListView = null;
	private int[] imageId={R.drawable.image1,R.drawable.image2,R.drawable.image3,
			R.drawable.image4,R.drawable.image5,R.drawable.image6,R.drawable.image7,
			R.drawable.image8,R.drawable.image9};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		myStringArr = getResources().getStringArray(R.array.myarrayname);
		myDaynamic = getResources().getStringArray(R.array.dynamic);
		textView1 = (TextView)this.findViewById(R.id.mytextview1);
		textView2 = (TextView)this.findViewById(R.id.mytextview);
		List<String> name = new ArrayList<String>();
		List<String> dynamic = new ArrayList<String>();
		for(int i=0;i<myStringArr.length;i++){
			name.add(myStringArr[i]);
			dynamic.add(myDaynamic[i]);
		}
		ListViewAdapter myAdatper = new ListViewAdapter(name,dynamic,imageId,this);
		myAdatper.setItemCheckButtonListener(myButtonListener);
		myListView = getListView();
		myListView.setAdapter(myAdatper);
	}
	private Button.OnClickListener myButtonListener = new Button.OnClickListener() {
		@Override
		public void onClick(View view) {
			<span style="color:#ff0000;">View myItemView = (View) view.getParent().getParent();//注意！</span>
			String name = ((TextView)myItemView.findViewById(R.id.name)).getText().toString();
			String dynamic = ((TextView)myItemView.findViewById(R.id.dynamic)).getText().toString();
			textView1.setText(name);
			textView2.setText(dynamic);
		}
	};
}
</span>

By  the Way，主程序中用到了两个string-array资源，他们定义在res/values/strings.xml中，具体代码如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">fileoperator</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
	<string-array 
	    name = "myarrayname">
	    <item>yangwan</item>
	    <item>chenyan</item>
	    <item>Tom</item>
	    <item>Jim</item>
	    <item>Xiaoxiao</item>
	    <item>Alice</item>
	    <item>Gerny</item>
	    <item>Tony</item>
	    <item>Afusen</item>
	</string-array>
	<string-array 
	    name = "dynamic">
	    <item>1.我很强壮</item>
	    <item>2.我很懒</item>
	    <item>3.我很开心</item>
	    <item>4.我很失落</item>
	    <item>5.我是吃货</item>
	    <item>6.我很笨</item>
	    <item>7.你很坚强</item>
	    <item>8.你神经</item>
	    <item>9.我无语</item>
	</string-array>
</resources>

关于BaseAdapter适配的知识我这里就不说了。这样一个自定义的ListView就完成了