快捷導(dǎo)航

Android使用RecyclerView仿美團(tuán)分類(lèi)界面

更新時(shí)間：2018年05月14日 14:48:36 作者：DylanAndroid

這篇文章主要為大家詳細(xì)介紹了Android使用RecyclerView仿美團(tuán)分類(lèi)界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

RecyclerView目前來(lái)說(shuō)對(duì)大家可能不陌生了。由于在公司的項(xiàng)目中，我們一直用的listview和gridview。某天產(chǎn)品設(shè)計(jì)仿照美團(tuán)的分類(lèi)界面設(shè)計(jì)了一個(gè)界面，我發(fā)現(xiàn)用gridview不能實(shí)現(xiàn)這樣的效果，所以就想到了RecyclerView，確實(shí)是一個(gè)很好的控件。和大家分享一下。

效果圖

簡(jiǎn)介

RecyclerView與ListView原理是類(lèi)似的：都是僅僅維護(hù)少量的View并且可以展示大量的數(shù)據(jù)集。RecyclerView用以下兩種方式簡(jiǎn)化了數(shù)據(jù)的展示和處理:
* 使用LayoutManager來(lái)確定每一個(gè)item的排列方式。
* 為增加和刪除項(xiàng)目提供默認(rèn)的動(dòng)畫(huà)效果

用法須知

LayoutManager：用來(lái)確定每一個(gè)item如何進(jìn)行排列擺放，何時(shí)展示和隱藏?；厥栈蛑赜靡粋€(gè)View的時(shí)候，LayoutManager會(huì)向適配器請(qǐng)求新的數(shù)據(jù)來(lái)替換舊的數(shù)據(jù)，這種機(jī)制避免了創(chuàng)建過(guò)多的View和頻繁的調(diào)用findViewById方法（與ListView原理類(lèi)似）。

目前SDK中提供了三種自帶的LayoutManager:

LinearLayoutManager
GridLayoutManager
StaggeredGridLayoutManager

代碼

布局文件

activity_main.xml

<?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:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#7e6c6c"
  tools:context="cn.bluemobi.dylan.recyclerviewdemo.MainActivity">


  <android.support.v7.widget.RecyclerView
    android:id="@+id/rv"
    android:background="#FFFFFF"
    android:paddingLeft="8dp"
    android:paddingBottom="5dp"
    android:layout_width="match_parent"
    android:layout_height="200dp" />
</RelativeLayout>

item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="70dp"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <ImageView
    android:id="@+id/iv"
    android:layout_width="60dp"
    android:layout_height="75dp"
    app:srcCompat="@mipmap/ic_category_0" />

  <TextView
    android:id="@+id/tv"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_gravity="center"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="TextView" />

</LinearLayout>

Activity中的代碼

RvAdpter.java

package cn.bluemobi.dylan.recyclerviewdemo;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

/**
 * Created by yuandl on 2016-11-01.
 */

public class RvAdpter extends RecyclerView.Adapter<RvAdpter.MyViewHolder> {
  private Context context;
  private List<Integer> datas;

  public RvAdpter(Context context, List<Integer> datas) {
    this.context = context;
    this.datas = datas;
  }

  @Override
  public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View contentView= LayoutInflater.from(context).inflate(R.layout.item,parent,false);
    MyViewHolder viewHolder=new MyViewHolder(contentView);
    return viewHolder;
  }

  @Override
  public void onBindViewHolder(MyViewHolder holder, int position) {
    holder.imageView.setImageResource(datas.get(position));
    holder.tv.setText("分類(lèi)"+position);
  }

  @Override
  public int getItemCount() {
    return datas==null?0:datas.size();
  }

  public class MyViewHolder extends RecyclerView.ViewHolder {
    private ImageView imageView;
    public TextView tv;

    public MyViewHolder(View itemView) {
      super(itemView);
      imageView = (ImageView) itemView.findViewById(R.id.iv);
      tv = (TextView) itemView.findViewById(R.id.tv);
    }
  }
}

MainActivity.java

package cn.bluemobi.dylan.recyclerviewdemo;

import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;

import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.List;

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);
    initData();
  }

  /**
   * 初始化數(shù)據(jù)
   */

  private void initData() {
    List<Integer> datas = new ArrayList<>();
    for (int i = 0; i < 38; i++) {
      Resources res = getResources();
      datas.add(res.getIdentifier("ic_category_" + i, "mipmap", getPackageName()));
    }
    /**
     *用來(lái)確定每一個(gè)item如何進(jìn)行排列擺放
     * LinearLayoutManager 相當(dāng)于ListView的效果
     GridLayoutManager相當(dāng)于GridView的效果
     StaggeredGridLayoutManager 瀑布流
     */
    rv.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.HORIZONTAL));
    rv.addItemDecoration(new RecyclerView.ItemDecoration() {
      @Override
      public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

        outRect.left = 10;
        outRect.top = 10;
        outRect.top = 10;
      }
    });
    rv.setAdapter(new RvAdpter(this, datas));
  }
}

GitHub地址

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: