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实现复杂布局,只是初学者,欢迎大家提出宝贵意见。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值