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