1. 程式人生 > >自定義ListView子專案佈局

自定義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就完成了