Android_ListView 用多样式item实现复杂布局显示

类似上面两张的布局，可以一个一个添加至布局，也可以分别使用ListView，也可以用同一个ListView，用多个item填充。即将所有的item分类，分成几种item。重点是写ListView的适配器Adapter。

用ListView完成复杂布局的流程如下图所示：



接下来，将通过一个详细的例子说明，在聊天工程中的设置页面，页面运行时的页面如下图所示：



页面布局代码如下：

<?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="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:text="@string/chat_setting"
android:background="@color/black"
android:textColor="@color/white"
android:textSize="16sp"
android:layout_gravity="center"
android:gravity="center"/>

<ListView
android:id="@+id/lv_chat_setting"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:dividerHeight="1dp"
android:divider="@color/backg_gray"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/backg_gray"/>
<Button
android:id="@+id/bt_chat_setting_quit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/btn_chat_quit"
android:textColor="@color/white"
android:text="@string/chat_setting_quit"/>

</LinearLayout>

个人信息设置的item代码如下：

<?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="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_item_chat_set_user_func"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:textSize="18sp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"/>
<ImageView
android:id="@+id/iv_item_chat_set_user"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_width="60dp"
android:layout_height="60dp"
android:visibility="gone"/>
<TextView
android:id="@+id/tv_item_chat_set_user_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:textSize="14sp"
android:textColor="@color/gray_divider"
android:layout_gravity="center"
android:gravity="center"
android:visibility="gone"/>
<ImageView
android:id="@+id/iv_item_chat_set_user_go"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/login_icon_go"
android:layout_gravity="center"
android:layout_marginRight="20dp"
android:background="@android:color/transparent"/>
</LinearLayout>

分界线的item代码：

<?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="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="@color/backg_gray"/>
</LinearLayout>

个人功能的item代码如下：

<?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="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_height="15dp"
android:layout_width="15dp"
android:layout_gravity="center_vertical"
android:id="@+id/iv_item_chat_setting_func_logo"
android:scaleType="centerCrop"
android:layout_marginLeft="20dp"/>

<TextView
android:id="@+id/tv_item_chat_setting_func"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:textSize="16sp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"/>
<ImageButton
android:id="@+id/ib_item_chat_setting_func_go"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:layout_gravity="center"
android:src="@drawable/login_icon_go"
android:background="@android:color/transparent"/>

</LinearLayout>

重写的baseAdapter代码如下：

package com.ppl.get_loc.chat;

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

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.ppl.get_loc.R;
import com.ppl.get_loc.utils.PublicData;

public class ChatSetAdapter extends BaseAdapter {
private static final int SET = 0;
private static final int FUNC = 1;
private Context mContext;
private List<String> userSet;       //用户设置的几条
private List<ChatUserFunc>userFunc; //用户功能

private List<Object>data;           //保存所有ListView的Item

public ChatSetAdapter(Context mContext, List<String> userSet,
List<ChatUserFunc> userFunc) {
super();
this.mContext = mContext;
this.userSet = userSet;
this.userFunc = userFunc;

initData();
}

private void initData() {
// TODO Auto-generated method stub
data = new ArrayList<Object>();
for(int i=0;i<userSet.size();i++){
data.add(userSet.get(i));
}
data.add(1);        //分割线
for(int i=0;i<userFunc.size();i++){
System.out.println(data.size() + ": "+userFunc.get(i).toString());
data.add(userFunc.get(i));
}
}

@Override
public int getViewTypeCount() {
// TODO Auto-generated method stub
return 3;
}

@Override
public int getItemViewType(int position) {
System.out.println("getItemViewType : position : "+position);
return data.get(position) instanceof ChatUserFunc ? FUNC :SET;
}

@Override
public int getCount() {
System.out.println("getCount :  "+data.size());
return data.size();
}

@Override
public Object getItem(int arg0) {
System.out.println("getItem arg0: "+arg0 +"  :  "+data.get(arg0).toString());
return data.get(arg0);
}

@Override
public long getItemId(int arg0) {
System.out.println("getItemId : "+ arg0);
return arg0;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
int viewType = getItemViewType(position);
System.out.println("getView viewType: "+viewType);
return viewType == FUNC ? getFunnView(position,convertView) : getSetView(position,convertView);
}
private View getSetView(int position, View convertView){
System.out.println("getSetView position: "+position);
ViewSetHolder holder;

holder = new ViewSetHolder();
convertView = View.inflate(mContext, R.layout.item_chat_setting_user, null);
holder.iv_avatar = (ImageView) convertView.findViewById(R.id.iv_item_chat_set_user);
holder.tv_setConn = (TextView)convertView.findViewById(R.id.tv_item_chat_set_user_func);
holder.tv_userName = (TextView)convertView.findViewById(R.id.tv_item_chat_set_user_username);

if(position < 3){
System.out.println("getSetView position: "+position);
String tmpFunc = (String)getItem(position);
System.out.println("tmpFunc :"+tmpFunc);
holder.tv_setConn.setText(tmpFunc);
if(position == 0 && !PublicData.bu.getNick_URL_LOCAL().equals(PublicData.noNike)){
holder.iv_avatar.setVisibility(View.VISIBLE);
Bitmap bmp = BitmapFactory.decodeFile(PublicData.bu.getNick_URL_LOCAL());
holder.iv_avatar.setImageBitmap(bmp);
}else{
holder.iv_avatar.setVisibility(View.INVISIBLE);
}
if(position == 1){
holder.tv_userName.setVisibility(View.VISIBLE);
holder.tv_userName.setText(PublicData.bu.getUsername());
}else{
holder.tv_userName.setVisibility(View.INVISIBLE);
}
}
else if(position == 3){
convertView = View.inflate(mContext, R.layout.item_chat_setting_divider, null);
}
return convertView;
}
private View getFunnView(int position, View convertView){
System.out.println("getFunnView position: "+position);
ViewFuncHolder holder;
holder = new ViewFuncHolder();
convertView = View.inflate(mContext, R.layout.item_chat_setting_func, null);
holder.iv_logo = (ImageView) convertView.findViewById(R.id.iv_item_chat_setting_func_logo);
holder.tv_funn = (TextView)convertView.findViewById(R.id.tv_item_chat_setting_func);

ChatUserFunc tmpData = (ChatUserFunc) getItem(position);
holder.iv_logo.setImageResource(tmpData.getImgSource());
holder.tv_funn.setText(tmpData.getConn());
return convertView;
}
static class ViewSetHolder{
TextView tv_setConn;
ImageView iv_avatar;
TextView tv_userName;
}
static class ViewFuncHolder{
ImageView iv_logo;
TextView tv_funn;
}
}

至此，即可实现用ListView实现复杂布局，只是初学者，欢迎大家提出宝贵意见。