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

1)聊天界面

一，特点：两个布局界面

二，方法：

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

@Override

public int getItemViewType(int position){

return  type ;

}

(2)返回布局总数

public  int getViewTypeCount(){

return number ;

}

三，见代码：

（1）布局文件：三个

chat_item_iteint.xml布局：

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="horizontal"  
  6.     android:padding="10dp">  
  7.     <ImageView  
  8.         android:id="@+id/icon_in"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:src="@drawable/d2"/>  
  12.     <TextView  
  13.         android:id="@+id/text_in"  
  14.         android:layout_width="wrap_content"  
  15.         android:layout_height="wrap_content"  
  16.         android:background="@drawable/chatitem_in_bg"  
  17.         android:gravity="center"  
  18.         android:textSize="20sp"/>  
  19.   
  20. </LinearLayout>  


char_item_itemout.xml布局：

 

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:gravity="center_vertical|right"  
  6.     android:orientation="horizontal"  
  7.     android:padding="10dp">  
  8.   
  9.   
  10.     <TextView  
  11.         android:id="@+id/text_out"  
  12.         android:layout_width="wrap_content"  
  13.         android:layout_height="wrap_content"  
  14.         android:background="@drawable/chatitem_out_bg"  
  15.         android:gravity="center"  
  16.         android:textSize="20sp" />  
  17.   
  18.     <ImageView  
  19.         android:id="@+id/icon_out"  
  20.         android:layout_width="wrap_content"  
  21.         android:layout_height="wrap_content"  
  22.         android:src="@drawable/d10" />  
  23.   
  24. </LinearLayout>  

 

 

activity_main.xml文件：

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"  
  6.     android:padding="5dp">  
  7.   
  8.    <ListView  
  9.        android:id="@+id/listView_chat"  
  10.        android:layout_width="match_parent"  
  11.        android:layout_height="match_parent"  
  12.        android:divider="@null"  
  13.        android:listSelector="@android:color/transparent" />  
  14.   
  15. </LinearLayout>  



 

（2）类：三个

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

 

[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. package com.maiyu.testlistview;  
  2.   
  3. import android.graphics.Bitmap;  
  4.   
  5. /**保存聊天信息的类 
  6.  * Created by maiyu on 2016/5/24. 
  7.  */  
  8. public class ChatItemListViewBean {  
  9.     private int type ;          //类型，用于表示是哪个家伙  
  10.     private String text ;       //文本信息  
  11.     private Bitmap icon ;       //图片  
  12.   
  13.     public ChatItemListViewBean(){  
  14.     }  
  15.   
  16.     //三个get方法和三个set方法  
  17.     public int getType(){  
  18.         return  type ;  
  19.     }  
  20.   
  21.     public void setType(int type){  
  22.         this.type   =   type ;  
  23.     }  
  24.   
  25.     public String getText(){  
  26.         return text ;  
  27.     }  
  28.   
  29.     public void setText(String text){  
  30.         this.text   =   text ;  
  31.     }  
  32.   
  33.     public Bitmap getIcon(){  
  34.         return icon ;  
  35.     }  
  36.   
  37.     public void setIcon(Bitmap icon){  
  38.         this.icon   =   icon ;  
  39.     }  
  40.   
  41. }  

 

 

主类：

ChatItemListViewAdapter;

 

[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. package com.maiyu.testlistview;  
  2.   
  3. import android.content.Context;  
  4. import android.view.LayoutInflater;  
  5. import android.view.View;  
  6. import android.view.ViewGroup;  
  7. import android.widget.BaseAdapter;  
  8. import android.widget.ImageView;  
  9. import android.widget.TextView;  
  10.   
  11. import java.util.List;  
  12. import com.maiyu.testlistview.ChatItemListViewBean ;  
  13.   
  14. /** 
  15.  * Created by maiyu on 2016/5/23. 
  16.  */  
  17. public class ChatItemListViewAdapter extends BaseAdapter {  
  18.     private List<ChatItemListViewBean> mData;       //创建ChatItemListViewBean类型的List表  
  19.     private LayoutInflater mInflater;               //定义线性布局过滤器  
  20.   
  21.     public ChatItemListViewAdapter(Context context , List<ChatItemListViewBean> data){  
  22.         this.mData = data ;  
  23.         mInflater = LayoutInflater.from(context);       //获取布局  
  24.     }  
  25.   
  26.     /** 
  27.      * 得到列表长度 
  28.      * @return 
  29.      */  
  30.     @Override  
  31.     public int getCount() {  
  32.         return mData.size();  
  33.     }  
  34.   
  35.     @Override  
  36.     public long getItemId(int position) {  
  37.         return position;    //得到子项位置id  
  38.     }  
  39.   
  40.     /** 
  41.      * 获取列表对应位置的子项 
  42.      * @param position 
  43.      * @return 
  44.      */  
  45.     @Override  
  46.     public Object getItem(int position) {  
  47.         return mData.get(position);  
  48.     }  
  49.   
  50.     /** 
  51.      * 获取对应Positon的type值 
  52.      * @param position 
  53.      * @return 
  54.      */  
  55.     @Override  
  56.     public int getItemViewType(int position){  
  57.         ChatItemListViewBean    bean    =   mData.get(position);  
  58.         return bean.getType();  
  59.     }  
  60.   
  61.     /** 
  62.      * 返回总数 
  63.      * @return 
  64.      */  
  65.     @Override  
  66.     public int getViewTypeCount(){  
  67.         return 2 ;  
  68.     }  
  69.   
  70.   
  71.     /** 
  72.      * 
  73.      * @param position 
  74.      * @param convertView 
  75.      * @param parent 
  76.      * @return 
  77.      */  
  78.     @Override  
  79.     public View getView(int position, View convertView, ViewGroup parent) {  
  80.         ViewHolder holder ;  
  81.         //判断是否缓存  
  82.         if(convertView == null){  
  83.             if(getItemViewType(position)  ==  0) {      //如果类型是0  
  84.                 holder = new ViewHolder();  
  85.                 //通过LayoutInflater实例化布局  
  86.                 convertView = mInflater.inflate(R.layout.chat_item_itemin, null);  
  87.                 //绑定id  
  88.                 holder.img = (ImageView) convertView.findViewById(R.id.icon_in);  
  89.                 holder.title = (TextView) convertView.findViewById(R.id.text_in);  
  90.             }  
  91.             else{  
  92.                 holder  =   new ViewHolder() ;  
  93.                 convertView =   mInflater.inflate(R.layout.chat_item_itemout , null) ;  
  94.                 holder.img  =   (ImageView)convertView.findViewById(R.id.icon_out) ;  
  95.                 holder.title    =   (TextView)convertView.findViewById(R.id.text_out);  
  96.             }  
  97.             convertView.setTag(holder);         //为View设置tag  
  98.         }  
  99.         else{  
  100.             holder  =   (ViewHolder)convertView.getTag();      //通过tag找到缓存的布局  
  101.         }  
  102.         //设置布局中控件要显示的视图  
  103.         holder.img.setImageBitmap(mData.get(position).getIcon());  
  104.         holder.title.setText(mData.get(position).getText());  
  105.         return convertView;     //返回一个view  
  106.     }  
  107.   
  108.     /** 
  109.      * 实体类 
  110.      */  
  111.     public final class ViewHolder{  
  112.         public ImageView img;  
  113.         public TextView title;  
  114.     }  
  115. }  

 

 

测试类：MainActivity

 

[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. package com.maiyu.testlistview;  
  2.   
  3. import android.graphics.BitmapFactory;  
  4. import android.support.v7.app.AppCompatActivity;  
  5. import android.os.Bundle;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8. import android.widget.ListView;  
  9.   
  10. import java.util.ArrayList;  
  11. import java.util.List;  
  12.   
  13. public class MainActivity extends AppCompatActivity {  
  14.     private    ListView   mListView ;  
  15.   
  16.     @Override  
  17.     protected void onCreate(Bundle savedInstanceState) {  
  18.         super.onCreate(savedInstanceState);  
  19.         setContentView(R.layout.activity_main);  
  20.   
  21.         //找到listView  
  22.         mListView   =   (ListView)findViewById(R.id.listView_chat);  
  23.   
  24.         ChatItemListViewBean    bean1   =   new ChatItemListViewBean();     //创建ChatItemListViewBean对象  
  25.         bean1.setType(0);           //设置type类型  
  26.         bean1.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d2));        //设置图片  
  27.         bean1.setText(getResources().getString(R.string.bean1));                    //设置文本  
  28.         //以下同  
  29.   
  30.         ChatItemListViewBean    bean2   =   new ChatItemListViewBean();  
  31.         bean2.setType(1);  
  32.         bean2.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d10));  
  33.         bean2.setText(getResources().getString(R.string.bean2));  
  34.   
  35.         ChatItemListViewBean    bean3   =   new ChatItemListViewBean();  
  36.         bean3.setType(0);  
  37.         bean3.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d2));  
  38.         bean3.setText(getResources().getString(R.string.bean3));  
  39.   
  40.         ChatItemListViewBean    bean4   =   new ChatItemListViewBean();  
  41.         bean4.setType(1);  
  42.         bean4.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d10));  
  43.         bean4.setText(getResources().getString(R.string.bean4));  
  44.   
  45.         ChatItemListViewBean    bean5   =   new ChatItemListViewBean();  
  46.         bean5.setType(0);  
  47.         bean5.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d2));  
  48.         bean5.setText(getResources().getString(R.string.bean5));  
  49.   
  50.   
  51.   
  52.         ChatItemListViewBean    bean6   =   new ChatItemListViewBean();  
  53.         bean6.setType(1);  
  54.         bean6.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d10));  
  55.         bean6.setText(getResources().getString(R.string.bean6));  
  56.   
  57.   
  58.         ChatItemListViewBean    bean7   =   new ChatItemListViewBean();  
  59.         bean7.setType(0);  
  60.         bean7.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d2));  
  61.         bean7.setText(getResources().getString(R.string.bean7));  
  62.   
  63.   
  64.         ChatItemListViewBean    bean8   =   new ChatItemListViewBean();  
  65.         bean8.setType(1);  
  66.         bean8.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d10));  
  67.         bean8.setText(getResources().getString(R.string.bean8));  
  68.   
  69.   
  70.   
  71.         ChatItemListViewBean    bean9   =   new ChatItemListViewBean();  
  72.         bean9.setType(0);  
  73.         bean9.setIcon(BitmapFactory.decodeResource(getResources() , R.drawable.d2));  
  74.         bean9.setText(getResources().getString(R.string.bean9));  
  75.   
  76.   
  77.         //创建ArrayList<ChatItemListViewBean>类型的data  
  78.         List<ChatItemListViewBean> data =   new ArrayList<ChatItemListViewBean>();  
  79.         //添加数据，类型为ChatItemListViewBean  
  80.         data.add(bean1);  
  81.         data.add(bean2);  
  82.         data.add(bean3);  
  83.         data.add(bean4);  
  84.         data.add(bean5);  
  85.         data.add(bean7);  
  86.         data.add(bean6);  
  87.         data.add(bean9);  
  88.         data.add(bean8);  
  89.   
  90.         //为ListView设置适配器  
  91.         mListView.setAdapter(new ChatItemListViewAdapter(this , data));  
  92.     }  
  93. }  


没错，这样就OK了，

 

效果：




 

 

 

（2)动态改变

 

一，方式：

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

（2）通过getView来选择

getView来显示：

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

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

 

布局：changed_test.xml

 

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent">  
  5.   
  6.     <ListView  
  7.         android:id="@+id/changed_listView"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="wrap_content">  
  10.   
  11.     </ListView>  
  12. </LinearLayout>  

 

 

类：2个

主类：

ChangedAdapter

 

 

[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. package com.maiyu.testlistview;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.database.DataSetObserver;  
  6. import android.view.Gravity;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9. import android.widget.Adapter;  
  10. import android.widget.BaseAdapter;  
  11. import android.widget.ImageView;  
  12. import android.widget.LinearLayout;  
  13. import android.widget.TextView;  
  14.   
  15. import java.util.List;  
  16.   
  17. /** 
  18.  * Created by maiyu on 2016/5/24. 
  19.  */  
  20. public class ChangedAdapter extends BaseAdapter {  
  21.     private List<String> mData;     //List数组，类型为String  
  22.     private Context mContext ;          //上下文对象  
  23.     private int  mCurrentItem = 0 ;     //当前子项  
  24.   
  25.     /** 
  26.      * 初始化上下文对象和List数组 
  27.      * @param context 
  28.      * @param data 
  29.      */  
  30.     public ChangedAdapter(Context context , List<String> data){  
  31.         this.mContext = context;  
  32.         this.mData = data ;  
  33.     }  
  34.   
  35.     /** 
  36.      * 返回对应的数组的子项 
  37.      * @param position 
  38.      * @return 
  39.      */  
  40.     @Override  
  41.     public Object getItem(int position) {  
  42.         return mData.get(position);  
  43.     }  
  44.   
  45.     /** 
  46.      * 设置当前子项 
  47.      * @param currentItem 
  48.      */  
  49.     public void setCurrentItem(int currentItem) {  
  50.         this.mCurrentItem = currentItem;  
  51.     }  
  52.   
  53.     /** 
  54.      * 得到子项id 
  55.      * @param position 
  56.      * @return 
  57.      */  
  58.     @Override  
  59.     public long getItemId(int position) {  
  60.         return position;  
  61.     }  
  62.   
  63.   
  64.     /** 
  65.      * 返回数组长度 
  66.      * @return 
  67.      */  
  68.     @Override  
  69.     public int getCount() {  
  70.         return mData.size();  
  71.     }  
  72.   
  73.     /** 
  74.      * 
  75.      * @param position 
  76.      * @param convertView 
  77.      * @param parent 
  78.      * @return 
  79.      */  
  80.     @Override  
  81.     public View getView(int position , View convertView, ViewGroup parent) {  
  82.         LinearLayout    layout  =   new LinearLayout(mContext);     //为当前类创建LinearLayout对象  
  83.         layout.setOrientation(LinearLayout.VERTICAL);               //设置为垂直方向  
  84.   
  85.         if(mCurrentItem == position){           //判断是否是当前点击的位置，是就设置当前图片  
  86.             layout.addView(addFocusView(position));  
  87.         }  
  88.         else{  
  89.             layout.addView(addNormalView(position));        //设置正常的图片  
  90.         }  
  91.         return layout;          //返回布局  
  92.     }  
  93.   
  94.   
  95.     //添加图片  
  96.     private View addFocusView(int i){  
  97.         ImageView  iv  =  new ImageView(mContext);      //为当前类创建ImageView对象  
  98.         iv.setImageResource(R.drawable.d2);       //设置图片  
  99.         return iv ;  
  100.     }  
  101.   
  102.     private View addNormalView(int i){  
  103.         LinearLayout   layout  = new LinearLayout(mContext);    //为当前类创建LinearLayout对象  
  104.         layout.setOrientation(LinearLayout.HORIZONTAL);         //设置方向  
  105.         ImageView iv = new ImageView(mContext);  
  106.         iv.setImageResource(R.drawable.chatitem_in_bg);         //增加图片，并设置图片宽高  
  107.         layout.addView( iv , new LinearLayout.LayoutParams(  
  108.                 LinearLayout.LayoutParams.WRAP_CONTENT ,  
  109.                 LinearLayout.LayoutParams.WRAP_CONTENT  
  110.         ));  
  111.   
  112.         //设置文本  
  113.         TextView tv = new TextView(mContext);  
  114.         tv.setText(mData.get(i));  
  115.         layout.addView(tv , new LinearLayout.LayoutParams(  
  116.                 LinearLayout.LayoutParams.WRAP_CONTENT,  
  117.                 LinearLayout.LayoutParams.WRAP_CONTENT  
  118.         ) );  
  119.   
  120.         layout.setGravity(Gravity.CENTER);      //内容居中  
  121.         return layout;  
  122.     }  
  123. }  

 

 

测试类：

ChangedTest

 

 

[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. package com.maiyu.testlistview;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.widget.AdapterView;  
  7. import android.widget.ListView;  
  8.   
  9. import java.util.ArrayList;  
  10. import java.util.List;  
  11.   
  12. /** 
  13.  * Created by maiyu on 2016/5/24. 
  14.  */  
  15. public class ChangedTest extends Activity {  
  16.     private ListView chListView;  
  17.     @Override  
  18.     protected void onCreate(Bundle savedInstanceState) {  
  19.         super.onCreate(savedInstanceState);  
  20.         setContentView(R.layout.changed_test);  
  21.         chListView = (ListView)findViewById(R.id.changed_listView);  
  22.         List<String> data   =   new ArrayList<String>();            //创建数组，类型为String  
  23.         //往数组中添加数据  
  24.         data.add("你变成了鸟中的大神");  
  25.         data.add("你变成了强大的鸟兽");  
  26.         data.add("你已经成为了鸟队长");  
  27.         data.add("你成为菜鸟头了");  
  28.         data.add("你是变成菜鸟");  
  29.         data.add("你开始孵化");  
  30.         data.add("你是鸟蛋");  
  31.         data.add("");  
  32.   
  33.         //定义适配器  
  34.         final ChangedAdapter adapter = new ChangedAdapter( this , data);  
  35.         //为ListView设置适配器  
  36.         chListView.setAdapter(adapter);  
  37.   
  38.   
  39.         //刷新布局  
  40.         chListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {  
  41.             @Override  
  42.             public void onItemClick(AdapterView<?> parent, View view, int i, long l) {  
  43.                 adapter.setCurrentItem(i);  
  44.                 adapter.notifyDataSetChanged(); //刷新布局  
  45.             }  
  46.         });  
  47.   
  48.     }  
  49. }  




运行结果：

 

 

posted @ 2016-11-26 15:52  天涯海角路  阅读(100)  评论(0)    收藏  举报