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) {

//设置对应的数据

    }
}



早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页