ListView之聊天界面的实现和ListView的动态改变布局

转发请注明出处：http://blog.csdn.net/qq_28055429/article/details/51493339

(1)聊天界面

一，特点：两个布局界面

二，方法：

(1)返回第position个Item是什么类型的

@Override

public int getItemViewType(int position){

return  type ;

}

(2)返回布局总数

public  int getViewTypeCount(){

return number ;

}

三，见代码：

（1）布局文件：三个

chat_item_iteint.xml布局：

<?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="horizontal"
    android:padding="10dp">
    <ImageView
        android:id="@+id/icon_in"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/d2"/>
    <TextView
        android:id="@+id/text_in"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/chatitem_in_bg"
        android:gravity="center"
        android:textSize="20sp"/>

</LinearLayout>

char_item_itemout.xml布局：

<?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:gravity="center_vertical|right"
    android:orientation="horizontal"
    android:padding="10dp">


    <TextView
        android:id="@+id/text_out"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/chatitem_out_bg"
        android:gravity="center"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/icon_out"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/d10" />

</LinearLayout>

activity_main.xml文件：

<?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"
    android:padding="5dp">

   <ListView
       android:id="@+id/listView_chat"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:divider="@null"
       android:listSelector="@android:color/transparent" />

</LinearLayout>

（2）类：三个

封装聊天信息的实体类 ChatItemListViewBean ：

package com.maiyu.testlistview;

import android.graphics.Bitmap;

/**保存聊天信息的类
 * Created by maiyu on 2016/5/24.
 */
public class ChatItemListViewBean {
    private int type ;          //类型，用于表示是哪个家伙
    private String text ;       //文本信息
    private Bitmap icon ;       //图片

    public ChatItemListViewBean(){
    }

    //三个get方法和三个set方法
    public int getType(){
        return  type ;
    }

    public void setType(int type){
        this.type   =   type ;
    }

    public String getText(){
        return text ;
    }

    public void setText(String text){
        this.text   =   text ;
    }

    public Bitmap getIcon(){
        return icon ;
    }

    public void setIcon(Bitmap icon){
        this.icon   =   icon ;
    }

}

主类：

ChatItemListViewAdapter;

package com.maiyu.testlistview;

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

import java.util.List;
import com.maiyu.testlistview.ChatItemListViewBean ;

/**
 * Created by maiyu on 2016/5/23.
 */
public class ChatItemListViewAdapter extends BaseAdapter {
    private List<ChatItemListViewBean> mData;       //创建ChatItemListViewBean类型的List表
    private LayoutInflater mInflater;               //定义线性布局过滤器

    public ChatItemListViewAdapter(Context context , List<ChatItemListViewBean> data){
        this.mData = data ;
        mInflater = LayoutInflater.from(context);       //获取布局
    }

    /**
     * 得到列表长度
     * @return
     */
    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public long getItemId(int position) {
        return position;    //得到子项位置id
    }

    /**
     * 获取列表对应位置的子项
     * @param position
     * @return
     */
    @Override
    public Object getItem(int position) {
        return mData.get(position);
    }

    /**
     * 获取对应Positon的type值
     * @param position
     * @return
     */
    @Override
    public int getItemViewType(int position){
        ChatItemListViewBean    bean    =   mData.get(position);
        return bean.getType();
    }

    /**
     * 返回总数
     * @return
     */
    @Override
    public int getViewTypeCount(){
        return 2 ;
    }


    /**
     *
     * @param position
     * @param convertView
     * @param parent
     * @return
     */
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder ;
        //判断是否缓存
        if(convertView == null){
            if(getItemViewType(position)  ==  0) {      //如果类型是0
                holder = new ViewHolder();
                //通过LayoutInflater实例化布局
                convertView = mInflater.inflate(R.layout.chat_item_itemin, null);
                //绑定id
                holder.img = (ImageView) convertView.findViewById(R.id.icon_in);
                holder.title = (TextView) convertView.findViewById(R.id.text_in);
            }
            else{
                holder  =   new ViewHolder() ;
                convertView =   mInflater.inflate(R.layout.chat_item_itemout , null) ;
                holder.img  =   (ImageView)convertView.findViewById(R.id.icon_out) ;
                holder.title    =   (TextView)convertView.findViewById(R.id.text_out);
            }
            convertView.setTag(holder);         //为View设置tag
        }
        else{
            holder  =   (ViewHolder)convertView.getTag();      //通过tag找到缓存的布局
        }
        //设置布局中控件要显示的视图
        holder.img.setImageBitmap(mData.get(position).getIcon());
        holder.title.setText(mData.get(position).getText());
        return convertView;     //返回一个view
    }

    /**
     * 实体类
     */
    public final class ViewHolder{
        public ImageView img;
        public TextView title;
    }
}

测试类：MainActivity

package com.maiyu.testlistview;

import android.graphics.BitmapFactory;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;

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

public class MainActivity extends AppCompatActivity {
    private    ListView   mListView ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //找到listView
        mListView   =   (ListView)findViewById(R.id.listView_chat);

        ChatItemListViewBean    bean1   =   new ChatItemListViewBean();     //创建ChatItemListViewBean对象
        bean1.setType(0);           //设置type类型
        bean1.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d2));        //设置图片
        bean1.setText(getResources().getString(R.string.bean1));                    //设置文本
        //以下同

        ChatItemListViewBean    bean2   =   new ChatItemListViewBean();
        bean2.setType(1);
        bean2.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d10));
        bean2.setText(getResources().getString(R.string.bean2));

        ChatItemListViewBean    bean3   =   new ChatItemListViewBean();
        bean3.setType(0);
        bean3.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d2));
        bean3.setText(getResources().getString(R.string.bean3));

        ChatItemListViewBean    bean4   =   new ChatItemListViewBean();
        bean4.setType(1);
        bean4.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d10));
        bean4.setText(getResources().getString(R.string.bean4));

        ChatItemListViewBean    bean5   =   new ChatItemListViewBean();
        bean5.setType(0);
        bean5.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d2));
        bean5.setText(getResources().getString(R.string.bean5));



        ChatItemListViewBean    bean6   =   new ChatItemListViewBean();
        bean6.setType(1);
        bean6.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d10));
        bean6.setText(getResources().getString(R.string.bean6));


        ChatItemListViewBean    bean7   =   new ChatItemListViewBean();
        bean7.setType(0);
        bean7.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d2));
        bean7.setText(getResources().getString(R.string.bean7));


        ChatItemListViewBean    bean8   =   new ChatItemListViewBean();
        bean8.setType(1);
        bean8.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d10));
        bean8.setText(getResources().getString(R.string.bean8));



        ChatItemListViewBean    bean9   =   new ChatItemListViewBean();
        bean9.setType(0);
        bean9.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d2));
        bean9.setText(getResources().getString(R.string.bean9));


        //创建ArrayList<ChatItemListViewBean>类型的data
        List<ChatItemListViewBean> data =   new ArrayList<ChatItemListViewBean>();
        //添加数据，类型为ChatItemListViewBean
        data.add(bean1);
        data.add(bean2);
        data.add(bean3);
        data.add(bean4);
        data.add(bean5);
        data.add(bean7);
        data.add(bean6);
        data.add(bean9);
        data.add(bean8);

        //为ListView设置适配器
        mListView.setAdapter(new ChatItemListViewAdapter(this , data));
    }
}

没错，这样就OK了，

效果：

（2)动态改变

一，方式：

（1）控制布局的显示与隐藏

（2）通过getView来选择

getView来显示：

注意，得用notifyDataSetChanged()方法来刷新布局，

如，下面以一只蛋的成长例子，即爬楼梯模式的例子，点击图片，跳到当前位置：

布局：changed_test.xml

<?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">

    <ListView
        android:id="@+id/changed_listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </ListView>
</LinearLayout>

类：2个

主类：

ChangedAdapter

package com.maiyu.testlistview;

import android.app.Activity;
import android.content.Context;
import android.database.DataSetObserver;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Adapter;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.List;

/**
 * Created by maiyu on 2016/5/24.
 */
public class ChangedAdapter extends BaseAdapter {
    private List<String> mData;     //List数组，类型为String
    private Context mContext ;          //上下文对象
    private int  mCurrentItem = 0 ;     //当前子项

    /**
     * 初始化上下文对象和List数组
     * @param context
     * @param data
     */
    public ChangedAdapter(Context context , List<String> data){
        this.mContext = context;
        this.mData = data ;
    }

    /**
     * 返回对应的数组的子项
     * @param position
     * @return
     */
    @Override
    public Object getItem(int position) {
        return mData.get(position);
    }

    /**
     * 设置当前子项
     * @param currentItem
     */
    public void setCurrentItem(int currentItem) {
        this.mCurrentItem = currentItem;
    }

    /**
     * 得到子项id
     * @param position
     * @return
     */
    @Override
    public long getItemId(int position) {
        return position;
    }


    /**
     * 返回数组长度
     * @return
     */
    @Override
    public int getCount() {
        return mData.size();
    }

    /**
     *
     * @param position
     * @param convertView
     * @param parent
     * @return
     */
    @Override
    public View getView(int position , View convertView, ViewGroup parent) {
        LinearLayout    layout  =   new LinearLayout(mContext);     //为当前类创建LinearLayout对象
        layout.setOrientation(LinearLayout.VERTICAL);               //设置为垂直方向

        if(mCurrentItem == position){           //判断是否是当前点击的位置，是就设置当前图片
            layout.addView(addFocusView(position));
        }
        else{
            layout.addView(addNormalView(position));        //设置正常的图片
        }
        return layout;          //返回布局
    }


    //添加图片
    private View addFocusView(int i){
        ImageView  iv  =  new ImageView(mContext);      //为当前类创建ImageView对象
        iv.setImageResource(R.drawable.d2);       //设置图片
        return iv ;
    }

    private View addNormalView(int i){
        LinearLayout   layout  = new LinearLayout(mContext);    //为当前类创建LinearLayout对象
        layout.setOrientation(LinearLayout.HORIZONTAL);         //设置方向
        ImageView iv = new ImageView(mContext);
        iv.setImageResource(R.drawable.chatitem_in_bg);         //增加图片，并设置图片宽高
        layout.addView( iv , new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT ,
                LinearLayout.LayoutParams.WRAP_CONTENT
        ));

        //设置文本
        TextView tv = new TextView(mContext);
        tv.setText(mData.get(i));
        layout.addView(tv , new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
        ) );

        layout.setGravity(Gravity.CENTER);      //内容居中
        return layout;
    }
}

测试类：

ChangedTest

package com.maiyu.testlistview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;

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

/**
 * Created by maiyu on 2016/5/24.
 */
public class ChangedTest extends Activity {
    private ListView chListView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.changed_test);
        chListView = (ListView)findViewById(R.id.changed_listView);
        List<String> data   =   new ArrayList<String>();            //创建数组，类型为String
        //往数组中添加数据
        data.add("你变成了鸟中的大神");
        data.add("你变成了强大的鸟兽");
        data.add("你已经成为了鸟队长");
        data.add("你成为菜鸟头了");
        data.add("你是变成菜鸟");
        data.add("你开始孵化");
        data.add("你是鸟蛋");
        data.add("");

        //定义适配器
        final ChangedAdapter adapter = new ChangedAdapter( this , data);
        //为ListView设置适配器
        chListView.setAdapter(adapter);


        //刷新布局
        chListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int i, long l) {
                adapter.setCurrentItem(i);
                adapter.notifyDataSetChanged(); //刷新布局
            }
        });

    }
}

运行结果：