微信扫一扫

028-83195727 , 15928970361
business@forhy.com

Android-RecyclerView自定义布局文件

Android,Oak先生,RecyclerView自定义布局2016-11-09

之前我介绍了RecyclerView的简单使用,那么如何在RecyclerView中自定义布局呢,就像ListView那样,下面我给大家介绍一下,讲说和RecyclerView的简单使用那篇博客差不多,但是代码不同,大牛请绕过!


第一步:创建一个空的Activity项目,导入support-v7这个类库,用Androidstudio的童鞋们可直接右击项目Project Structure中的Dependencies中直接从网上添加。然后在布局文件中添加其组件,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.oak.learnrecyclerview.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rv">

    </android.support.v7.widget.RecyclerView>
</RelativeLayout>


第二步:创建显示在RecyclerView中的条目自定义布局文件:list_cell.xml,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv_title"
        android:text="title"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv_content"
        android:text="content"/>
</LinearLayout>


第三步:在MainActivity中进行一些初始化设置,在对这个组件进行操作的时候要先findViewById拿到这个组件,然后使用setLayoutManager这个方法设置组件的布局方式(必须设置,否则无法显示内容),然后为其设置适配器setAdapter方法,new出一个适配器,我们需要重写三个方法,分别是onCreateViewHolder:用于将View返回给RecyclerView组件的、onBindViewHolder:用于在View绑定上后对View进行一些数据上的操作、getItemCount:用来返回显示多少条信息的。在这三个方法中最重要的就是onCreateViewHolder这个方法了,它需要返回一个ViewHolder,所以我们需要创建一个MyViewHolder类并继承support-v7包中的RecyclerView.ViewHolder,并在里面对外公开一个方法,用来在onBindViewHolder方法中获取到这个View对其数据操作。具体代码如下:

package com.oak.learnrecyclerview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private RecyclerView rv;

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

        rv = (RecyclerView) findViewById(R.id.rv);
        rv.setLayoutManager(new LinearLayoutManager(this));
        rv.setAdapter(new RecyclerView.Adapter() {
            class MyViewHolder extends RecyclerView.ViewHolder {
                private TextView tv_title;
                private TextView tv_content;

                public MyViewHolder(View itemView) {
                    super(itemView);
                    tv_title = (TextView) itemView.findViewById(R.id.tv_title);
                    tv_content = (TextView) itemView.findViewById(R.id.tv_content);;
                }

                public TextView getTv_title() {
                    return tv_title;
                }

                public TextView getTv_content() {
                    return tv_content;
                }
            }

            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
                return new MyViewHolder(LayoutInflater.from(MainActivity.this).inflate(R.layout.list_cell,null));
            }

            @Override
            public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
                MyViewHolder myHolder = (MyViewHolder) holder;
                myHolder.getTv_title().setText("title:item"+position);
                myHolder.getTv_content().setText("content:item"+position);
            }

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

效果图:

By:Oak先生