2. 程式人生 > >Android控制元件RecyclerView實現橫向滑動、瀑布流。

Android控制元件RecyclerView實現橫向滑動、瀑布流。

阿新 • • 發佈：2019-01-03

在開發的過程中，我們經常使用ListView控制元件，但是ListView也有它的缺點，就是它不能夠左右滑動資料，執行效率不高；
所以我們可以使用更強大的控制元件RecyclerView，可以說它是一個增強版的ListView，Google推薦使用，那就簡單的使用一下這個控制元件。

首先，我們先來實現一個跟ListView一樣效果的介面。

這裡寫圖片描述

因為RecyclerView是在support包中，所以我們要在build.gradle中新增該依賴。

compile 'com.android.support:recyclerview-v7:25.1.0'

第一步，在佈局中創建出該控制元件

<?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"
    tools:context
 
="com.example.dell.recyclerviewdemo.MainActivity">

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

第二步，建立行佈局item

這裡寫圖片描述

<?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="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp">

    <ImageView
        android:id="@+id/item_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:text="Hello World!" />
</LinearLayout>

第三步：建立實體類，來封裝資料


/**
 * Created by Dell on 2017/1/9.
 */

public class ItemVO {
    private int mImg;
    private String mName;

    public ItemVO(int mImg, String mName) {
        this.mImg = mImg;
        this.mName = mName;
    }

    public void setmImg(int mImg) {
        this.mImg = mImg;
    }

    public void setmName(String mName) {
        this.mName = mName;
    }

    public int getmImg() {
        return mImg;
    }

    public String getmName() {
        return mName;
    }
}

第四步：建立介面卡

package com.example.adapter;

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

import com.example.dell.recyclerviewdemo.R;
import com.example.vo.ItemVO;

import java.util.List;

/**
 * Created by Dell on 2017/1/9.
 */

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder>{
    //動態陣列
    private List<ItemVO> mList;

    //構造
    public MyAdapter(List<ItemVO> mList) {
        this.mList = mList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //繫結行佈局
        View view = View.inflate(parent.getContext(),R.layout.item,null);
        //例項化ViewHolder
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    //設定資料
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        //獲取當前實體類物件
        ItemVO vo = mList.get(position);
        //設定
        holder.text.setText(vo.getmName());
        holder.img.setImageResource(vo.getmImg());
    }

    //數量
    @Override
    public int getItemCount() {
        return mList.size();
    }

    //內部類
    class ViewHolder extends RecyclerView.ViewHolder{
        //行佈局中的控制元件
        ImageView img;
        TextView text;
        public ViewHolder(View itemView) {
            super(itemView);
            //繫結控制元件
            img = (ImageView) itemView.findViewById(R.id.item_img);
            text = (TextView) itemView.findViewById(R.id.item_text);
        }
    }
}
說明：

首先定義了一個內部類ViewHolder，繼承RecyclerView.ViewHolder,然後定義兩個兩個全域性變數，即行佈局中的控制元件，然後再構造方法中繫結控制元件。
然後將介面卡這個類繼承RecyclerView.Adapter<內部類>，需要重寫onCreateViewHolder()、onBindViewHolder()、getItemCount()這三個方法。
onCreateViewHolder()：建立ViewHolder例項。
onBindViewHolder()：對資料進行賦值。
getItemCount()：返回有多少資料。

第五步：MainActivity

package com.example.dell.recyclerviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import com.example.adapter.MyAdapter;
import com.example.vo.ItemVO;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private RecyclerView mView;
    private List<ItemVO> mList = new ArrayList<ItemVO>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //繫結id
        bindID();
        //新增資料
        addData();
        //建立LinearLayoutManager
        LinearLayoutManager manager = new LinearLayoutManager(this);
        //設定
        mView.setLayoutManager(manager);
        //例項化介面卡
        MyAdapter myAdapter = new MyAdapter(mList);
        //設定介面卡
        mView.setAdapter(myAdapter);
    }

    private void addData() {
        for (int i = 0 ; i<50 ; i++){
            ItemVO itemVO = new ItemVO(R.mipmap.ic_launcher, i + ":Hello World!");
            //新增到陣列
            mList.add(itemVO);
            itemVO = null;
        }
    }

    private void bindID() {
        mView = (RecyclerView) findViewById(R.id.recyc);
    }
}
說明：

這裡跟ListView的使用方式是差不多的。
使用一個addData()方法新增資料到mList,接著在onCreate()方法中首先獲取到RecyclerView例項，然後創建出一個LinearLayoutManager物件，將讓設定到RecyclerView當中。LinearLayoutManager用於指定RecyclerView的佈局方式；然後例項化MyAdapter；最後繫結介面卡。

這樣，效果跟ListView實現是一樣的。

改變滑動方向：橫向滑動

這裡寫圖片描述

首先改變一下行佈局item

因為是橫向滑動，所以我們將行佈局的寬度限定了。

<?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="100dp"
    android:orientation="vertical"
    android:padding="10dp">

    <ImageView
        android:id="@+id/item_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Hello World!" />
</LinearLayout>

修改MainActivity

在onCreate()中給LinearLayoutManager設定屬性


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //繫結id
        bindID();
        //新增資料
        addData();
        //建立LinearLayoutManager
        LinearLayoutManager manager = new LinearLayoutManager(this);
        //設定為橫向滑動
        manager.setOrientation(LinearLayoutManager.HORIZONTAL);
        //設定
        mView.setLayoutManager(manager);
        //例項化介面卡
        MyAdapter myAdapter = new MyAdapter(mList);
        //設定介面卡
        mView.setAdapter(myAdapter);
    }

執行後，就會實現這個橫向滑動了。
這樣，RecyclerView的優勢就顯示出來了，完成了ListVIew不能完成的任務。

使用RecyclerView實現瀑布流

這裡寫圖片描述

第一步：修改行佈局Item

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

    <ImageView
        android:id="@+id/item_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Hello World!" />
</LinearLayout>

將行佈局寬度更改為自定義。

修改MainActivity

package com.example.dell.recyclerviewdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;

import com.example.adapter.MyAdapter;
import com.example.vo.ItemVO;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class MainActivity extends AppCompatActivity {
    private RecyclerView mView;
    private List<ItemVO> mList = new ArrayList<ItemVO>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //繫結id
        bindID();
        //新增資料
        addData();
//        //建立LinearLayoutManager
//        LinearLayoutManager manager = new LinearLayoutManager(this);
//        //設定為橫向滑動
//        manager.setOrientation(LinearLayoutManager.HORIZONTAL);
        //引數意思：分為幾列；方向。
        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);

        //設定
        mView.setLayoutManager(manager);
        //例項化介面卡
        MyAdapter myAdapter = new MyAdapter(mList);
        //設定介面卡
        mView.setAdapter(myAdapter);
    }

    private void addData() {
        for (int i = 0; i < 50; i++) {
            ItemVO itemVO = new ItemVO(R.mipmap.ic_launcher, getRandomStr(i + ":Hello World!"));
            //新增到陣列
            mList.add(itemVO);
            itemVO = null;
        }
    }
    //將文字長度改變
    private String getRandomStr(String str){
        Random random = new Random();
        int num = random.nextInt(10)+1;
        StringBuilder builder = new StringBuilder();
        for (int i = 0 ; i< num ;i++){
            builder.append(str+"");
        }
        return builder.toString();
    }

    private void bindID() {
        mView = (RecyclerView) findViewById(R.id.recyc);
    }
}

說明：

將關於LinearLayoutManager的都註釋掉，使用StaggeredGridLayoutManager物件。
因為瀑布流在textView資料長度不同的時候才能看到，所以我們就隨機更該文字的長度，讓瀑布流效果顯示出來。

RecyclerView實現點選事件的監聽

這裡寫圖片描述
在RecyclerView中，沒有提供給我們點選事件的方法，需要我們自己給子項具體的View去註冊點選事件，相比ListView，這的確是比較麻煩，但是不代表RecyclerView不好，而是RecyclerView是人性化設計，可以根據自己的需要去設計，我們可以給每一個item設定監聽，也可以給每一個TextView或其他設定監聽。

修改MyAdapter

給每個item 和 textView設定監聽

package com.example.adapter;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.example.dell.recyclerviewdemo.R;
import com.example.vo.ItemVO;

import java.util.List;

/**
 * Created by Dell on 2017/1/9.
 */

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder>{
    //動態陣列
    private List<ItemVO> mList;

    //構造
    public MyAdapter(List<ItemVO> mList) {
        this.mList = mList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //繫結行佈局
        final View view = View.inflate(parent.getContext(),R.layout.item,null);
        //例項化ViewHolder
        final ViewHolder holder = new ViewHolder(view);
        //item設定監聽
        holder.view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //獲取到position
                int layoutPosition = holder.getLayoutPosition();
                //土司
                Toast.makeText(view.getContext(),"This is item :"+layoutPosition,Toast.LENGTH_SHORT).show();
            }
        });
        //textView設定監聽
        holder.text.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //獲取到position
                int layoutPosition = holder.getLayoutPosition();
                //土司
                Toast.makeText(view.getContext(),"This is textView :"+layoutPosition,Toast.LENGTH_SHORT).show();
            }
        });
        return holder;
    }

    //設定資料
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        //獲取當前實體類物件
        ItemVO vo = mList.get(position);
        //設定
        holder.text.setText(vo.getmName());
        holder.img.setImageResource(vo.getmImg());
    }

    //數量
    @Override
    public int getItemCount() {
        return mList.size();
    }

    //內部類
    class ViewHolder extends RecyclerView.ViewHolder{
        //行佈局中的控制元件
        ImageView img;
        TextView text;
        //檢視
        View view;
        public ViewHolder(View itemView) {
            super(itemView);
            view = itemView;
            //繫結控制元件
            img = (ImageView) itemView.findViewById(R.id.item_img);
            text = (TextView) itemView.findViewById(R.id.item_text);
        }
    }
}

先修改了ViewHolder，在ViewHolder中添加了view變數來儲存子項最外層佈局例項，然後再onCreateViewHolder()中註冊監聽就好了。
這也是RecyclerView的強大之處，可以輕鬆的對子項中的任意控制元件設定點選事件。

相關推薦

Android控制元件RecyclerView實現橫向滑動、瀑布流。

在開發的過程中，我們經常使用ListView控制元件，但是ListView也有它的缺點，就是它不能夠左右滑動資料，執行效率不高； 所以我們可以使用更強大的控制元件RecyclerView，可以說它是一個增強版的ListView，Google推薦使用，那就簡單的

我的Android成長之路（10）----利用recyclerView實現橫向滑動

利用recyclerView實現橫向滑動。 下面是adapter： public class HengAdapter extends RecyclerView.Adapter<HengAdapter.MyViewHolder> implements View.

Android控制元件RecyclerView與ListView的異同

在我的一篇介紹Android新控制元件RecyclerView的部落格（Android L新控制元件RecyclerView簡介）中，一個讀者留言說RecyclerView跟ListView之間好像沒有什麼不同，我覺得這是一個好問題，應該明確地區分一下兩者的睯，所以我就研究了一下它倆之間的區別，然後也對兩者的

Android控制元件之SlidingDrawer（滑動式抽屜）詳解與例項

SlidingDrawer效果想必大家也見到過，它就是1.5模擬器上進入應用程式列表的效果。下面是截圖  一、簡介  　　SlidingDrawer隱藏屏外的內容，並允許使用者通過handle以顯示隱藏內容。它可以垂直或水平滑動，它有倆個View組成，其

Android控制元件GridView實現分割線

大家都知道Android ListView設定分割線很簡單，設定如下兩個屬性即可：     android:divider     android:dividerHeight GirdView預設是沒有網格線的，那麼該如何設定呢？ 現介紹兩種方法： 第一、設定垂直、橫向間距

Android控制元件RecyclerView的基本用法

　　RecyclerView是Android提供的一個功能強大的滾動控制元件，是增強版的ListView和GridView，不僅可以輕鬆實現和ListView相同的效果，還優化了ListView中存在的各種不足之處；目前Android官方更加推薦使用Recycl

Android控制元件RecyclerView和ListView的異同

在我的一篇介紹Android新控制元件RecyclerView的部落格（ Android L新控制元件RecyclerView簡介 ）中，一個讀者留言說RecyclerView跟ListView之間好像沒有什麼不同，我覺得這是一個好問題，應該明確地區分一下兩者的睯，所以我就研究了一下它倆之間的區別，然後

Android 控制元件陰影實現

讓 View 產生陰影有以下 4 種方式： 控制 elevation 使用 OutlineProvider 使用 9 圖 使用 MD 風格的控制元件，如 CardView，FloatingActionButton 0.Z軸的概念 Android 在 5.0 及以後採用了 Mate

Android橫向滑動載入更多的控制元件的實現---HorizontalScrollSlideView

Android橫向滑動載入更多的控制元件的實現—HorizontalScrollSlideView 需求 之前公司業務要求做一個橫向滑動的，可以載入更多的控制元件，第一時間想到的就是 RecyclerView 來實現 ，後面仔細想想滑動攔截不好控制等等

一個Android文字輪播控制元件，實現了可垂直跑、可水平跑的跑馬燈

Android文字輪播控制元件 現在的絕大數APP特別是類似淘寶京東等這些大型APP都有文字輪播介面，實現迴圈輪播多個廣告詞等功能；這種控制元件俗稱“跑馬燈”，而TextBannerView已經實現了可垂直跑、可水平跑的跑馬燈了。 效果圖 Attribute

橫向滑動的日曆控制元件的實現

實現橫向滑動的日曆控制元件可以作為簽到的日曆控制元件 看見MaterialCalendarView 仿照它大致的思路自己實現一個CanlendarView, 給一個ClaendarPagerView extends viewgroup新增四十二個Text

Android自定義控制元件之實現滑動選擇開關

前言：今天我們仿照著Google給我們提供的Switch控制元件來進行一次模仿，自己動手打造一個可以換滑動圖片以及背景的圖片。 -----------------分割線--------------- 先看一下google提供的Switc控制元件： 其實用法很簡單就當普通的

Android 表格控制元件-動態實現表格效果（內容、樣式可擴充套件）

說明：表格是很常用的控制元件，Android本身提供了TableLayout供佈局實現，但本文介紹另外一種思路，用動態佈局的方式實現，這種方式更靈活，內容、樣式能高度擴充套件，熟練的人可隨意運用到任何檢

android實現控制元件的手勢縮放、移動以及雙擊還原

我分四部分介紹：        1.Imageview利用Matrix和OnScaleGestureListener實現手勢縮放；        2.在第一部分的基礎上實現圖片跟隨手指進行滑動；        3.在一、二的基礎上利用GestureDetector的On

安卓常用控制元件RecyclerView+HorizontalScrollView實現item側滑效果 安卓常用控制元件RecyclerView+HorizontalScrollView實現item側滑效果

原 安卓常用控制元件RecyclerView+HorizontalScrollView實現item側滑效果 2017年10月28日 12:23:14 低-調

Android 控制元件之 RecyclerView（一）—— 載入檢視和佈局選擇

本文目錄 一、概述 二、列表檢視的處理 1. item 的佈局檔案 2. 構造 Adapter 類 3. 佈局管理器 1）LinearLayoutManager 2）GridLayoutManager

Android控制元件TextView的實現原理分析

                        在前面一個系列的文章中，我們以視窗為單位，分析了WindowManagerService服務的實現。同時，在再前面一個系列的文章中，我們又分析了視窗的組成。簡單來說，視窗就是由一系列的檢視按照一定的佈局組織起來的。實際上，每一個檢視都是一個控制元件，這些控制可以

Android 自定義控制元件 優雅實現元素間的分割線 （支援3.0以下）

1、概述話說，隨著Android SDK版本的升級，很多控制元件增加了新的屬性方便我們的使用，比如LinearLayout中多了：divider、showDividers等，用於為其內部元素新增分隔；但是呢，這樣的屬性在較低版本的SDK中不能被支援，那麼，我們在開發過程中，可

設定Android控制元件WebView不可滑動

下面兩種方式都可以實現，希望對志同道合的搬磚者們有幫助，親測有效！ 方式一：原生控制元件WebView xml檔案： <WebView android:id="@+id/web_view_prize" android:layout_width="m

android控制元件跟隨手勢滑動改變位置

private View.OnTouchListener shopCarSettleTouch = new View.OnTouchListener() { int lastX, lastY; @Override public boole