RecyclerView仿應用列表實現(xiàn)網(wǎng)格布局

更新時間：2019年09月20日 09:30:44 作者：e電動小馬達e

這篇文章主要為大家詳細介紹了RecyclerView仿應用列表實現(xiàn)網(wǎng)格布局，具有一定的參考價值，感興趣的小伙伴們可以參考一下

簡介

使用RecyclerView實現(xiàn)網(wǎng)格布局，實現(xiàn)手機界面應用列表

效果

效果如下圖：

詳細代碼

XML布局文件

在布局中使用RecyclerView控件

activity_main.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"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity"
  android:background="#9709F7">
 
  <androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
 
</LinearLayout>

RecyclerView子項列表布局

recyclerview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="220dp"
  android:layout_height="220dp"
  android:background="#20FDFDFD"
  android:gravity="center_horizontal"
  android:orientation="vertical"
  android:layout_margin="20dp">
 
 
  <ImageView
    android:id="@+id/iv_apply_image"
    android:layout_width="112dp"
    android:layout_height="112dp"
    android:layout_marginTop="32dp"
    android:src="@mipmap/ic_launcher" />
 
  <TextView
    android:id="@+id/tv_apply_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="19dp"
    android:text="鬧鐘"
    android:textColor="#fff"
    android:textSize="28sp" />
</LinearLayout>

JAVA代碼

MainActivity

package com.matt.recyclerview;
 
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
 
import android.os.Bundle;
 
import java.util.ArrayList;
import java.util.List;
 
public class MainActivity extends AppCompatActivity {
 
  private RecyclerView mRecyclerView;
  private GridAdapter mGridAdapter;
  private List<ApplyBean> mApplyList;
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mRecyclerView = findViewById(R.id.recyclerview);
    mApplyList = new ArrayList<>();
    mApplyList.add(new ApplyBean("SETTINGS","設(shè)置", R.mipmap.ic_launcher));
    mApplyList.add(new ApplyBean("CALCULATOR","計算器", R.mipmap.ic_launcher));
    mApplyList.add(new ApplyBean("WEATHER","天氣", R.mipmap.ic_launcher));
    mApplyList.add(new ApplyBean("CALENDAR","日歷", R.mipmap.ic_launcher));
    mApplyList.add(new ApplyBean("PHOTO" ,"相冊", R.mipmap.ic_launcher));
    mApplyList.add(new ApplyBean("TIME" ,"時鐘", R.mipmap.ic_launcher));
    mApplyList.add(new ApplyBean("FM" ,"收音機", R.mipmap.ic_launcher));
    mApplyList.add(new ApplyBean("CAMERA" ,"相機", R.mipmap.ic_launcher));
    mApplyList.add(new ApplyBean("PLAY","播放器", R.mipmap.ic_launcher));
    mGridAdapter = new GridAdapter(mApplyList);
 
    //這里的第二個參數(shù)4代表的是網(wǎng)格的列數(shù)
    mRecyclerView.setLayoutManager(new GridLayoutManager(this, 3));
    mRecyclerView.setAdapter(mGridAdapter);
  }
}

RecyclerView適配器GridAdapter

package com.fenda.homepage.Adapter;
 
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 com.fenda.homepage.R;
import com.fenda.homepage.bean.ApplyBean;
 
import java.util.List;
 
/**
 * @author：Matt.Liao
 * 日期時間: 2019/9/1 17:45
 * 內(nèi)容描述:
 * 版本：
 * 包名：
 */
public class GridAdapter extends RecyclerView.Adapter<GridAdapter.Holder>{
  private List<ApplyBean> mList;
  private RecyclerView recyclerView;
  public GridAdapter(List<ApplyBean> list){
    this.mList = list;
  }
 
  @Override
  public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.submenu_item_recyclerview, null);
    final Holder holder = new Holder(view);
    //對加載的子項注冊監(jiān)聽事件
    holder.fruitView.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        int position = holder.getAdapterPosition();
        String applyId = mList.get(position).getApplyId();
        onItemClickListener.onItemClick(view ,applyId);
      }
    });
    return holder;
  }
 
  @Override
  public void onBindViewHolder(Holder holder, int position) {
    holder.mApplyNameTv.setText(mList.get(position).getApplyName());
    holder.mApplyImageIv.setImageResource(mList.get(position).getApplyImage());
  }
 
  @Override
  public int getItemCount() {
    return mList == null ? 0 : mList.size();
  }
 
 
  private OnItemClickListener onItemClickListener;
  public void setOnItemClickListener(OnItemClickListener onItemClickListener){
    this.onItemClickListener = onItemClickListener;
  }
 
  /**
   * 定義RecyclerView選項單擊事件的回調(diào)接口
   */
  public interface OnItemClickListener{
 
    /**
     * @param view 當前單擊的View
     * @param applyId 單擊的View的應用id
     */
    void onItemClick(View view, String applyId);
  }
 
  class Holder extends RecyclerView.ViewHolder {
    private TextView mApplyNameTv;
    private ImageView mApplyImageIv;
    private View fruitView;  //表示我們自定義的控件的視圖
    public Holder(View itemView) {
      super(itemView);
      fruitView = itemView;
      mApplyNameTv = itemView.findViewById(R.id.tv_apply_name);
      mApplyImageIv = itemView.findViewById(R.id.iv_apply_image);
    }
  }
}

應用列表實體類ApplyBean

package com.matt.recyclerview;
 
import android.os.Parcel;
import android.os.Parcelable;
 
/**
 * @author matt.liaojianpeng
 * 日期時間: 2019/9/1 16:31
 * 內(nèi)容描述:
 * 版本：
 * 包名：
 */
public class ApplyBean{
  private String applyId;
  private String applyName;
  private int applyImage;
 
  public String getApplyId() {
    return applyId;
  }
 
  public void setApplyId(String applyId) {
    this.applyId = applyId;
  }
 
  public ApplyBean(String applyName, int applyImage){
    this.applyName = applyName;
    this.applyImage = applyImage;
  }
  public ApplyBean(String applyId , String applyName, int applyImage){
    this.applyId = applyId;
    this.applyName = applyName;
    this.applyImage = applyImage;
  }
  public ApplyBean() {
  }
 
  public String getApplyName() {
    return applyName;
  }
 
  public void setApplyName(String applyName) {
    this.applyName = applyName;
  }
 
  public int getApplyImage() {
    return applyImage;
  }
 
  public void setApplyImage(int applyImage) {
    this.applyImage = applyImage;
  }
  public ApplyBean(Parcel source) {
    applyId = source.readString();
    applyName = source.readString();
 
    applyImage = source.readInt();
  }
}

詳細講解

設(shè)置RecyclerView適配器

//這里的第二個參數(shù)3代表的是網(wǎng)格的列數(shù)
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 3));
mRecyclerView.setAdapter(mGridAdapter);

可以設(shè)置的一些參數(shù)，說明如下:

setLayoutManager設(shè)置RecyclerView布局樣式

GridLayoutManager：網(wǎng)格布局

LinearLayoutManager：線性布局

適配器GridAdapter繼承RecyclerView.Adapter

初始化

重寫構(gòu)造方法，傳入子項數(shù)據(jù)列表

private List<ApplyBean> mList;
  private RecyclerView recyclerView;
  public GridAdapter(List<ApplyBean> list){
    this.mList = list;
  }

內(nèi)部類Holder用于綁定數(shù)據(jù)類型

class Holder extends RecyclerView.ViewHolder {
    private TextView mApplyNameTv;
    private ImageView mApplyImageIv;
    private View fruitView;  //表示我們自定義的控件的視圖
    public Holder(View itemView) {
      super(itemView);
      fruitView = itemView;
      mApplyNameTv = itemView.findViewById(R.id.tv_apply_name);
      mApplyImageIv = itemView.findViewById(R.id.iv_apply_image);
    }
  }

onCreateViewHolder()方法，負責承載每個子項的布局。

onBindViewHolder()方法，負責將每個子項holder綁定數(shù)據(jù)。

getItemCount()方法，返回子項列表數(shù)目。

setOnItemClickListener()方法，設(shè)置子項列表監(jiān)聽。

OnItemClickListener()接口，定義RecyclerView選項單擊事件的回調(diào)接口。

子項監(jiān)聽實現(xiàn)的方法，如下

mGridAdapter.setOnItemClickListener(new GridAdapter.OnItemClickListener() {
      @Override
      public void onItemClick(View view, String applyId) {
        if(applyId.equals("SETTINGS")){
          Toast.makeText(getApplicationContext(),"設(shè)置",Toast.LENGTH_SHORT).show();
        } else if (applyId.equals("CALCULATOR")){
          Toast.makeText(getApplicationContext(),"計算器",Toast.LENGTH_SHORT).show();
        }
      }
    });

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: