RecyclerView（三）实现聊天窗口样式（Android 5.0 新特性）

Android RecyclerView（三）实现聊天窗口样式（Android 5.0 新特性）

---

效果

    

---

1 聊天窗口子视图布局文件

1.1 左边消息视图布局文件

使用到的背景图片

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:minWidth="150dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:src="@drawable/item_title_left" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_weight="1"
            android:background="@drawable/qq_item_left"
            android:maxWidth="200dp"
            android:paddingLeft="24dp"
            android:paddingRight="8dp"
            android:paddingTop="10dp"
            android:text="你好 ？ \n你在吗 3333333333333333333？"
            android:textColor="#353434"
            android:textSize="14sp" />


    </LinearLayout>

</RelativeLayout>

1.2 右边消息视图布局文件

使用到的背景图片

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="10dp"
        android:minWidth="150dp"
        android:orientation="horizontal">


        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:maxWidth="250dp"
            android:paddingBottom="10dp"
            android:paddingLeft="10dp"
            android:paddingRight="22dp"
            android:background="@drawable/qq_item_right"
            android:paddingTop="10dp"
            android:text="你好 ？ \n你在吗 ？"
            android:textColor="#353434"
            android:textSize="14sp" />

        <ImageView
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/item_title_right" />

    </LinearLayout>

</RelativeLayout>

---

2 加载使用RecyclerView

2.1 布局文件

<android.support.v7.widget.RecyclerView
    android:background="#FF504F4F"
    android:id = "@+id/rv_list"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent" />

2.2 java代码中设置

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rv_list);
//设置
recyclerView.setLayoutManager(new LinearLayoutManager(this));

//设置Adapter
recyclerView.setAdapter(mViewHolderAdapter);

2.3 使用到的 Adapter

     在这里会重写RecyclerView.Adapter 的getItemViewType方法，用于指定加载视图的类型
     然后在 onCreateViewHolder 方法中获取到对应的 视图类型viewType，根据viewType的类型来动态的加载不同的布局文件与创建不同的Holder
     最后在onBindViewHolder，通过int itemViewType = this.getItemViewType(position);方法来获取到对应 条目的 条目类型，然后再设置不同的显示数据

private RecyclerView.Adapter<ViewHolder> mViewHolderAdapter = new RecyclerView.Adapter<ViewHolder>() {
    @Override
    public ViewHolder onCreateViewHolder (ViewGroup parent, int viewType) {
        //获取加载条目类型 viewType
        // 1 加载左边视图
        // 2 加载右边视图

        if (viewType==1){
            //加载条目布局文件
            View view = View.inflate(RecyActivity.this, R.layout.item_left, null);
            //创建ViewHolder
            LeftViewHolder leftViewHolder = new LeftViewHolder(view);
            return leftViewHolder;
        }else {
            //加载条目布局文件
            View view = View.inflate(RecyActivity.this, R.layout.item_right, null);
            //创建ViewHolder
            RightViewHolder rightViewHolder = new RightViewHolder(view);
            return rightViewHolder;
        }

    }

    @Override
    public void onBindViewHolder (ViewHolder holder, int position) {

        //获取条目类型
        // 1 左边视图
        // 2 右边视图
        int itemViewType = this.getItemViewType(position);


        if (itemViewType==1){
            //获取Holder
            LeftViewHolder viewHolder = (LeftViewHolder) holder;

            //设置数据
            viewHolder.setDatas(position);
        }else {
            //获取Holder
            RightViewHolder viewHolder = (RightViewHolder) holder;
            //设置数据
            viewHolder.setDatas(position);
        }


    }

    @Override
    public int getItemCount () {
        return 50;
    }

    //返回条目类型
    // 返回1 加载左边视图
    // 返回2 加载右边视图
    @Override
    public int getItemViewType (int position) {
        position = position%2;
        if (position==0){
            return 1;
        }else {
            return 2;
        }
    }
};

2.4 （2.3中的Adapter）使用到的 ViewHolder

private static class LeftViewHolder extends ViewHolder {


    public LeftViewHolder (View itemView) {
        super(itemView);
        //获取相关的控件 

    }

    public void setDatas (int position) {
        //设置对应的数据


    }
}


private static class RightViewHolder extends ViewHolder {

    public RightViewHolder (View itemView) {
        super(itemView);
        //获取相关的控件 

    }

    public void setDatas (int position) {

//设置对应的数据

    }
}

---