RecyclerView的基本用法

使用之前的准备工作 首先打开build.gradle 文件,在dependencies的节点之内 添加如下内容:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:recyclerview-v7:24.2.1'
    testCompile 'junit:junit:4.12'
}

接下来需要 准备一个适配器,新建一个FruitAdapter类,让这个适配器继承RecyclerView.Adapter ,并将泛型指定为 FruitAdapter.ViewHolder.其中 ViewHolder 是我们在FruitAdapter 中定义一个内部类.

FruitAdapter 代码如下:

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
    private List<Fruit> mFruitList;

    static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView mImage;
        TextView mText;
View fruitView;

        public ViewHolder(View itemView) {
            super(itemView);
            mImage = (ImageView) itemView.findViewById(R.id.image);
            mText = (TextView) itemView.findViewById(R.id.text);
            fruitView = itemView;
        }
    }

    public FruitAdapter(List<Fruit> fruitList) {
        mFruitList = fruitList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_fruit, null);
        final ViewHolder holder = new ViewHolder(view);

        holder.fruitView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Fruit fruit = mFruitList.get(position);
                Toast.makeText(v.getContext(), "你点击了 " + fruit.getName(), Toast.LENGTH_SHORT).show();
            }
        });

        holder.mImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Fruit fruit = mFruitList.get(position);
                Toast.makeText(v.getContext(), "点击 " + fruit.getName(), Toast.LENGTH_SHORT).show();

            }
        });

        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);
        holder.mImage.setImageResource(fruit.getImageId());
        holder.mText.setText(fruit.getName());
    }


    @Override
    public int getItemCount() {
        return mFruitList.size();
    }
}

这里我们首先定义一个内部类ViewHolder,ViewHolder要继承 RecyclerView.ViewHolder, 然后ViewHolder的构造函数中传入一个 View 参数,这个参数通常就是RecyclerView 子项的最外层布局.我们就可以通过findViewById()方法 获取布局中的 imageView和TextView的实例. 接下来往下看,FruitAdapter 中也有一个构造方法,这个方法用于把数据源传进来,并赋值给一个全局变量mFruitList, 我们后续的操作都将在这个数据源的基础上进行. 继续往下看,由于FruitAdapter 继承自RecyclerView.Adapter的 ,那么必须重写 onCreateViewHolder(), onBindViewHolder(), 和 getItemCount() 这3个方法.
onCreateViewHolder() 用于创建 viewholder 实例,我们这个方法将 子项 布局加载进来,然后创建一个 viewholder 实例,并把加载进来的布局传入到构造方法中,最后将 viewholder的实例 返回.
onBindViewHolder(),是用于对 RecyclerView 子项的数据进行赋值的,会在每个子项滚动到屏幕内的时候执行,这里我们通过 position 参数得到当前项的Fruit实例,然后再将数据设置到 ViewHolder的ImageView和ImageView当中即可.
getItemCount() 直接返回数据源的长度.

MainActivity 代码如下:

public class MainActivity extends AppCompatActivity {
    RecyclerView mRecyclerView;
    private List<Fruit> mFruitList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);

        initFruit();

//  1. 横向列表
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); //加上这句 就可以设置水平方向
        mRecyclerView.setLayoutManager(layoutManager);

        //2. 瀑布流
//        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
//        mRecyclerView.setLayoutManager(staggeredGridLayoutManager);

        FruitAdapter fruitAdapter = new FruitAdapter(mFruitList);
        mRecyclerView.setAdapter(fruitAdapter);

    }

    private void initFruit() {

        for (int i = 0; i < 20; i++) {
            Fruit apple = new Fruit(getRandomName("苹果"), R.mipmap.apple_pic);
            mFruitList.add(apple);
            Fruit banana = new Fruit(getRandomName("Banana"), R.mipmap.banana_pic);
            mFruitList.add(banana);
            Fruit orange = new Fruit(getRandomName("Orange"), R.mipmap.orange_pic);
            mFruitList.add(orange);
            Fruit watermelon = new Fruit(getRandomName("Watermelon"), R.mipmap.watermelon_pic);
            mFruitList.add(watermelon);
            Fruit pear = new Fruit(getRandomName("Pear"), R.mipmap.pear_pic);
            mFruitList.add(pear);
            Fruit grape = new Fruit(getRandomName("Strawberry"), R.mipmap.grape_pic);
            mFruitList.add(grape);
            Fruit pineapple = new Fruit(getRandomName("Strawberry"), R.mipmap.pineapple_pic);
            mFruitList.add(pineapple);
            Fruit strawberry = new Fruit(getRandomName("Strawberry"), R.mipmap.strawberry_pic);
            mFruitList.add(strawberry);
            Fruit cherry = new Fruit(getRandomName("Cherry"), R.mipmap.cherry_pic);
            mFruitList.add(cherry);
            Fruit mango = new Fruit(getRandomName("Mango"), R.mipmap.mango_pic);
            mFruitList.add(mango);

        }
    }

    private String getRandomName(String name) {
        Random random = new Random();
        int length = random.nextInt(5) + 1;
        StringBuilder builder = new StringBuilder();
        for (int i = 0; i < length; i++) {
            builder.append(name);

        }

        return builder.toString();
    }
}

这里使用了一个initFruit() 方法,用于初始化所有的数据,,然后创建一个 LinearLayoutManager对象,并将它设置到 RecyclerView当中. LayoutManager 用于指定RecyclerView 的布局方式, 这里使用的是LinearLayoutManager是线性布局的意思.可以实现和 ListView类似的效果.

实现横向的滚动和瀑布流布局

实现横向的布局 调用LinearLayoutManager的setOrientation() 方法来设置布局的排列方式,默认是纵向排列的.我们传入的LinearLayoutManager.HORIZONTAL 表示让布局横向排列.

另外除了LinearLayoutManager 之外, RecyclerView 还给我们提供了GridLayoutManager(网格布局) 和 StaggedGridLayoutManager(瀑布流布局).
我们创建一个 StaggedGridLayoutManager 的实例. 该构造函数接收2个参数,第一个参数用于指定布局的列数, 传入数字X 就代表是X列. 第二个参数用于指定布局的排列方向,传入StaggeredGridLayoutManager.VERTICAL 表示让布局纵向排列,最后再把创建好的实例设置到 RecyclerView 当中,就可以啦

Fruit的实例对象

public class Fruit {
    private  String name;
    private int imageId;

    public Fruit(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }
}

activity_main.xml 布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

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

item_fruit.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:padding="5dp"

              android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:background="@mipmap/apple_pic"/>

    <TextView
        android:id="@+id/text"
        android:background="#3322aa"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="水果"
        android:layout_marginTop="8dp"
        android:textSize="20sp"/>
</LinearLayout>

item_fruit_layout.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"
              android:orientation="horizontal">

    <ImageView
        android:id="@+id/image"
        android:layout_marginLeft="100dp"
        android:background="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/text"
        android:text="水果"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"/>
</LinearLayout>

横向滑动的效果

像listview一样的效果

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值