2. 程式人生 > >Android UI設計之RecyclerView

Android UI設計之RecyclerView

阿新 • • 發佈：2018-12-21
                     

RecyclerView簡介

 

RecyclerView是繼ListView和GridView後Google又一力作，它不僅可以很方便的實現瀑布流效果，而且大幅度降低了檢視的耦合性，在設計上有很高的自由度。

本文主要分析RecyclerView的使用技巧以及優化。

使用前請自行新增依賴：

compile 'com.android.support:recyclerview-v7:23.3.0'
  • 1

RecyclerView原理

RecyclerViewRecyclerView與ListView原理是類似的，都是僅僅維護少量的View並且可以展示大量的資料集，此外通過Google提供的方法可以快捷管理RecyclerView的風格樣式。

  • LayoutManager控制每個Item的排列方式
  • ItemDecoration控制每個Item的修飾
  • ItemAnimator設定Item的增刪動畫
  • Adapter為每個Item提供對應的資料

LayoutManager：用來確定每一個item如何進行排列擺放，何時展示和隱藏。回收或重用一個View的時候，LayoutManager會向介面卡請求新的資料來替換舊的資料，這種機制避免了建立過多的View和頻繁的呼叫findViewById方法（與ListView原理類似）。

 

目前SDK中提供了三種自帶的LayoutManager:   LinearLayoutManager   GridLayoutManager   StaggeredGridLayoutManager（錯列網格佈局）

RecyclerView四步走

//設定佈局樣式mRecyclerView.setLayoutManager();//設定adaptermRecyclerView.setAdapter()//設定Item增加、移除動畫mRecyclerView.setItemAnimator();//新增分割線mRecyclerView.addItemDecoration();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

OK,基本就是這麼個流程，下面來逐步進行實踐

ItemDecoration

官方提供了分割線介面ItemDecoration，實現該方法可以自定義你所需要的分割線。

一個很好的重寫Demo,有愛自取，來源於翔哥文章 使用：

mRecyclerView.addItemDecoration(new
 
 DividerLinearItemDecoration(this, LinearLayout.HORIZONTAL));mRecyclerView.addItemDecoration(new DividerLinearItemDecoration(this, LinearLayout.VERTICAL));
  • 1
  • 2

分別新增橫線和豎線

線性佈局分割線

public class DividerLinearItemDecoration extends RecyclerView.ItemDecoration {    private static final int[] ATTRS = new int[]{            android.R.attr.listDivider    };    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;    private Drawable mDivider;    private int mOrientation;    public DividerLinearItemDecoration(Context context, int orientation) {        final TypedArray a = context.obtainStyledAttributes(ATTRS);        mDivider = a.getDrawable(0);        a.recycle();        setOrientation(orientation);    }    public void setOrientation(int orientation) {        if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {            throw new IllegalArgumentException("invalid orientation");        }        mOrientation = orientation;    }    @Override    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {        if (mOrientation == VERTICAL_LIST) {            drawVertical(c, parent);        } else {            drawHorizontal(c, parent);        }    }    public void drawVertical(Canvas c, RecyclerView parent) {        final int left = parent.getPaddingLeft();        final int right = parent.getWidth() - parent.getPaddingRight();        final int childCount = parent.getChildCount();        for (int i = 0; i < childCount; i++) {            final View child = parent.getChildAt(i);            android.support.v7.widget.RecyclerView v = new android.support.v7.widget.RecyclerView(parent.getContext());            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child                    .getLayoutParams();            final int top = child.getBottom() + params.bottomMargin;            final int bottom = top + mDivider.getIntrinsicHeight();            mDivider.setBounds(left, top, right, bottom);            mDivider.draw(c);        }    }    public void drawHorizontal(Canvas c, RecyclerView parent) {        final int top = parent.getPaddingTop();        final int bottom = parent.getHeight() - parent.getPaddingBottom();        final int childCount = parent.getChildCount();        for (int i = 0; i < childCount; i++) {            final View child = parent.getChildAt(i);            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child                    .getLayoutParams();            final int left = child.getRight() + params.rightMargin;            final int right = left + mDivider.getIntrinsicHeight();            mDivider.setBounds(left, top, right, bottom);            mDivider.draw(c);        }    }    @Override    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {        if (mOrientation == VERTICAL_LIST) {            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());        } else {            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);        }    }}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81

自定義效果： 上面程式碼已經對分割線做了很好的繪製，注意到還都是用了系統的預設分割線android.R.attr.listDivider，基於此我們可以很容易的去自定義的分割線的效果。

自定義流程： 在style檔案中新增如下程式碼：

<style name="AppTheme" parent="AppBaseTheme">      <item name="android:listDivider">@drawable/divider_bg</item>      </style>
  • 1
  • 2
  • 3

然後自己利用程式碼繪製一個drawable物件作為分割線底色即可。比如

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <solid android:color="@color/colorAccent"/></shape>
  • 1
  • 2
  • 3
  • 4
  • 5

setItemAnimator

Itme增刪動畫效果，官方提供了一個預設的動畫效果，直接新增即可，

recyclerView.setItemAnimator(new DefaultItemAnimator()); // 預設動畫
  • 1

當然你也可以去自行定製。

嗯，自定義的終究難以滿足各位的需求，來一個我目前所知最全面的RecyclerView動畫庫，有愛自取，嗯。RecyclerView Animators

RecyclerView.Adapter

RecyclerView的介面卡預設要求必須實現系統提供的RecyclerView.ViewHolder介面，

寫法：

public class AnimationAdapter extends RecyclerView.Adapter<AnimationAdapter.MyViewHolder>{    @Override    public AnimationAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        return null;    }    @Override    public void onBindViewHolder(MyViewHolder holder, int position) {    }    @Override    public int getItemCount() {        return 0;    }    //請首先實現RecyclerView.ViewHolder    public class MyViewHolder extends RecyclerView.ViewHolder{        public MyViewHolder(View itemView) {            super(itemView);        }    }}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

顯然，要求必須實現三個方法，在此之前需要先實現RecyclerView.ViewHolder。

LayoutManager

RecyclerView的關鍵，決定佈局的樣式。 前面已經提到主要有三類佈局形式，線性佈局、網格佈局和瀑布流佈局，它們分別對應著LinearLayoutManager、GridLayoutManager、StaggeredGridLayoutManager。

通過這三中佈局管理我們可以很容易的動態調整介面設計，比如我們預設顯示一個線性佈局

mRecyclerView.setLayoutManger(new           LinearLayoutManger(Context,LinearLayoutManger.VERTICAL,false);
  • 1

當發生介面旋轉或其他需求需要顯示網格樣式佈局那麼可以直接重設LayoutManger為我們想要的佈局。

mRecyclerView.setLayoutManger(new GridLayoutManager(this,3,GridLayoutManager.VERTICAL,false));
  • 1
  • 2

新增和移除Item的實現

    //新增Item    public void addItem(int position) {        Animation animation;        animation = animationList.get((int)(Math.random()*9));        animationList.add(position, animation);        //使總position+1        notifyItemInserted(position);    }    //移除Item    public void delItem(int position) {        animationList.remove(position);        //使總position-1        notifyItemRemoved(position);    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

實現RecyclerView的Item監聽

實現監聽主要有兩種方式：

  • 在介面卡中建立回撥介面
  • 覆寫addOnItemTouchListener方法

在介面卡中建立回撥介面

第一步：

    //為Item建立監聽介面    public interface OnRecyclerViewItemClickListener {        void onItemClick(View view , Data data);    }
  • 1
  • 2
  • 3
  • 4

view和data分別對應當前Item的View檢視和資料。 第二步：

    //例項化介面接收外部設定的listener    private OnRecyclerViewItemClickListener mOnItemClickListener;    public void setOnItemClickListener(OnRecyclerViewItemClickListener listener) {        this.mOnItemClickListener = listener;    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

第三步：在onBindViewHolder中新增如下程式碼

    // 如果設定了回撥，則設定點選事件    if (mOnItemClickLitener != null)    {        holder.itemView.setOnClickListener(new OnClickListener()        {            @Override            public void onClick(View v)            {                int position = holder.getLayoutPosition();                mOnItemClickLitener.onItemClick(holder.itemView, position);            }        });    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

其實，你也可以在onCreateViewHolder為所有Item設定好監聽，但相比於這種方式，靈活度卻要低了一點。

so,這樣就為每個Item設定了回撥監聽，當然你完全可以為holder.itemView設定其他任何你所需要的觸控監聽。

覆寫addOnItemTouchListener方法

大致看一下實現吧

        mRecyclerView.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {            @Override            public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {                return false;            }            @Override            public void onTouchEvent(RecyclerView rv, MotionEvent e) {            }            @Override            public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {            }        });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

每個方法都對應著不同的用法，不懂得請速速參考郭霖或者鴻洋大神的部落格。懶人鏈接。

基於此，做了一個小Demo，效果如下： 線性佈局 這裡寫圖片描述

網格佈局 這裡寫圖片描述

瀑布流 這裡寫圖片描述

圖片太大，請原諒用了三個圖。

關於監聽事件的測試（點選後刪除點選位置元素）：

這裡寫圖片描述

ps:  - notifyItemChanged(int position)：當Item資料改動時回撥onBindViewHolder即可更新資料。  - notifyItemRangeChanged(int positionStart, int    itemCount)：重新整理從positionStart開始itemCount數量的item  - notifyItemInserted(int position)：插入Item，（記得更新資料表）  - notifyItemMoved(int fromPosition, int toPosition)：從fromPosition移動到toPosition為止的時候可以使用這個方法重新整理  - notifyItemRangeInserted(int positionStart, int itemCount)：批量新增。  - notifyItemRemoved(int position)：第position個被刪除的時候重新整理，同樣會有動畫。  - notifyItemRangeRemoved(int positionStart, int itemCount)：批量刪除。  - notifyDataSetChanged()：更新資料表和Item位置資訊

OK,本文就寫到這裡吧，有疑問的朋友歡迎指出問題，一篇文章認認真真寫下來也真是蠻累的，如果對你有幫助，諸位道友大可多多支援，不甚感激。

關於原始碼：有愛自取

           

相關推薦

Android UI設計之RecyclerView

                     RecyclerView簡介  RecyclerView是繼ListView和GridView後Google又一力作，它不僅可以很方便的實現瀑布流效果，而且大幅度降低了檢視的耦合性，在設計上有很高的自由度。本文主要分析RecyclerView的使用技巧以及優化。使用前

Android中UI設計之shape屬性

在Android的UI設計時，難免會遇到使用控制元件如TextVeiw、Button等情況，如果要使它們更好看，就要使用到自定義background了，而shape就算常用的一種背景邊框。 shape的基本屬性有： corners 圓角 solid 填充色 stroke 描

android 使用者登陸註冊UI設計之 edittext (就是輸入使用者名稱和密碼的文字框)

大家好，今天帶了的是承接上一個部落格 的ui設計 今天是針對文字框的設計  讓文字框變得更加美觀  追求良好的使用者互動。 今天有兩個步驟：1.搞定 兩個介面的佈局  2.讓文字框變得美觀，而且具有點選效果 先給大家展示效果圖：我們可以看到 兩個介面的主題是一致的   

android UI設計圖片和文字尺寸px對應dp、sp值換算

螢幕尺寸：指螢幕的對角線長度，單位是英寸，1英寸等於2.54釐米，常見尺寸有2.4，2.8，3.5，3.7，4.2，5.0，5.5，6.0等。 螢幕解析度：指在縱橫向上的畫素點數，單位是px，1px為一個畫素點，一般格式為縱向畫素*橫向畫素，如1960*1080。 螢幕畫素密度：相同尺寸

android官方API之RecyclerView

來源：https://developer.android.com/reference/android/support/v7/widget/RecyclerView RecyclerView public class RecyclerView extends ViewGro

Android UI開發之TabLayou和ViewPager的使用

首先注意因為Tablayout是android.support.design.widget包下面的，所以需要新增依賴，不然會報錯。 implementation 'com.android.support:design:27.0.0' 首先慣例，咱們看一下效果圖： 主頁程式碼：

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

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

【Android UI設計與開發】第06期：底部選單欄（一）使用TabActivity實現底部選單欄

轉載請註明出處：http://blog.csdn.net/yangyu20121224/article/details/8989063               從這一篇文章開始，我們將進入到一個應用程式主介面UI的開發和設計中了，底部選單欄在Android的應用開發當

十款最實用的Android UI設計工具

上一週可以說是一個不斷Mark周，從最實用的Android UI設計工具、免費移動應用測試框架推薦，到HTML5開發框架等等，各種開發工具、框架精彩豐呈，看得小夥伴們是不亦樂乎。當然，還有不容錯過的MDCC 2013精彩專題論壇先透露、首屆智慧硬體峰會及首屆智慧硬體展等的陣容更新圍觀。智慧硬體這座中國網際

Android UI開發之Action Bar

什麼是Action Bar呢    ActionBar是Android 3.0(API level 11)引入的一個新控制元件，它代表了應用程式標題欄，如果要開發相容的程式，可以使用v7包下的ActionBar。Action Bar取代了傳統的tittle bar和m

Android控制元件之RecyclerView的基本使用

三、RecyclerView使用時要匯入android.suport.v7.wedget.RecyclerView包。 RecyclerView實現新增和刪除的簡單例子 <span style="font-size:18px;">public class MainActivity extend

Android UI設計---計算器介面的設計心得

廢話不多說，先上圖很醜的頁面，不過正好將所學的線性佈局進行了實戰使用以下是我的心得：此設計使用了“線性佈局”的套用整體是“縱向”線性佈局部分是“橫向”線性佈局整體“線性佈局”使用了   寬：充滿父視窗長：充滿父視窗縱向佈局部分“線性佈局”使用了寬：充滿父視窗高：使用自定義高度

Android介面設計之個人資料介面

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/contain

Android UI設計——ListView控制元件使用優化（五）

　　在上一篇部落格中《Android UI設計——ListView控制元件和自定義Adapter（四） 》（連結）中我們通過一個例項來了解和練習瞭如何去自定義Adapter，本節我們將會繼續以《Android UI設計——ListView控制元件和自定義Adap

Android UI設計和形成原理（實現三級選單）

本次要實現的是動態編碼之三級選單的實現，在實際應用開發中經常會使用到三級選單，比如商城專案中的省市區，分類等等。 問題：介面載入是一次性new 大量的控制元件還是先載入一級選單，點選一級選單載入他對應的二級選單 答：這個很明顯是後者更符合開發思維，因為客戶不可能每個級別都一

精彩絕倫的Android UI設計pdf

譯者序前言第一部分 Android設計簡介第1章 使用者介面設計和易用性入門 21.1 考慮技術與設計 21.2 理解心智模型 31.3 為使用者設計 61.4 沒有應用無所不精，選擇適合自己的領域 91.5 你是專家，使用者不是設計師 91.6 瞭解使用者，為普通人設計 91.7 總結 11第2章 不要馬上

Android UI高階之自定義控制元件

在android中有許多控制元件，比如editview、button等，但是，有時這些控制元件並不能滿足我們的需求，這時，我們就需要去自定義一個控制元件來滿足我們的需要，下面給出一個仿360加速球的demo. 1、首先，來看一下360加速球的效果 2、

Android-UI開發之Adapter及Adapter控制元件

一.Adapter的概述 ArrayAdapter SimpleAdapter SimpleCursorAdapter BaseAdapter及自定義Adapter Adapter控制元件 1.Adapter介面卡 Adapter物件在Adapt

Android UI優化之ViewStubs使用方法

1.含義解釋： ViewStub預設是不顯示的，也不佔用記憶體，載入時會被其他的佈局所替代才佔用記憶體並且才顯示出來，載入後如果只是隱藏用ViewStub.setVisiblitiy(View.GONE)就可以正常隱藏，但是不能釋放記憶體。 ViewStub和incl

Android UI設計---佈局中常用的單位

佈局中常用的單位有很多種，其中最常用的如下：1.畫素單位  px此單位不推薦使用   其經常用在  手錶裝置   機頂盒裝置  中2.適配的單位  dp  [舊版使用：dip]推薦使用！優點是    在不同的解析度下  可以顯示幾乎相近的佈局內容缺點   未發現例如：寬 10