Mục trung tâm quy mô RecyclerView

Thứ Ba, 22/09/2020

Tram Ho

1) Đặt vấn đề

Giả sử khách hàng chúng ta có 1 list các ảnh và yêu cầu list này sẽ được hiển thị ra màn hình và item trung tâm được scale hơn so với các item bên cạnh kiểu như sau:

2) Giải pháp

Có nhiều cách để có thể làm được như trên, trong bài viết này mình sẽ hướng dẫn các bạn sử dụng RecyclerView để giải quyết vấn đề này

Như chúng ta thấy thì item ở giữa sẽ to nhất (chính tâm) và ra xa tâm thì item sẽ nhỏ đi.

Như vậy thì độ lớn của các item sẽ tỷ lệ nghịch với khoảng cách giữa item đó và tâm của recyclerView

<span class="token keyword">class</span> <span class="token class-name">ZoomCenterLinearLayoutManager</span> <span class="token keyword">extends</span> <span class="token class-name">LinearLayoutManager</span> <span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token class-name">ZoomCenterLinearLayoutManager</span><span class="token punctuation">(</span><span class="token class-name">Context</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token class-name">ZoomCenterLinearLayoutManager</span><span class="token punctuation">(</span><span class="token class-name">Context</span> context<span class="token punctuation">,</span> <span class="token keyword">int</span> orientation<span class="token punctuation">,</span> <span class="token keyword">boolean</span> reverseLayout<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> orientation<span class="token punctuation">,</span> reverseLayout<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token class-name">ZoomCenterLinearLayoutManager</span><span class="token punctuation">(</span><span class="token class-name">Context</span> context<span class="token punctuation">,</span> <span class="token class-name">AttributeSet</span> attrs<span class="token punctuation">,</span> <span class="token keyword">int</span> defStyleAttr<span class="token punctuation">,</span> <span class="token keyword">int</span> defStyleRes<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> attrs<span class="token punctuation">,</span> defStyleAttr<span class="token punctuation">,</span> defStyleRes<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">checkLayoutParams</span><span class="token punctuation">(</span><span class="token class-name">RecyclerView</span><span class="token punctuation">.</span><span class="token class-name">LayoutParams</span> lp<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        lp<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token function">getWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">3</span><span class="token punctuation">;</span> <span class="token comment">//Độ rộng của mỗi item sẽ bằng 1/3 độ rộng của RecyclerView</span>
        <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onLayoutCompleted</span><span class="token punctuation">(</span><span class="token class-name">RecyclerView</span><span class="token punctuation">.</span><span class="token class-name">State</span> state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onLayoutCompleted</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">scaleMiddle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">int</span> <span class="token function">scrollHorizontallyBy</span><span class="token punctuation">(</span><span class="token keyword">int</span> dx<span class="token punctuation">,</span> <span class="token class-name">RecyclerView</span><span class="token punctuation">.</span><span class="token class-name">Recycler</span> recycler<span class="token punctuation">,</span> <span class="token class-name">RecyclerView</span><span class="token punctuation">.</span><span class="token class-name">State</span> state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">scaleMiddle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">scrollHorizontallyBy</span><span class="token punctuation">(</span>dx<span class="token punctuation">,</span> recycler<span class="token punctuation">,</span> state<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">scaleMiddle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">float</span> midpoint <span class="token operator">=</span> <span class="token function">getWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2.f</span><span class="token punctuation">;</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token function">getChildCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token class-name">View</span> child <span class="token operator">=</span> <span class="token function">getChildAt</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">float</span> childMidpoint <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">getDecoratedRight</span><span class="token punctuation">(</span>child<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">getDecoratedLeft</span><span class="token punctuation">(</span>child<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2.f</span><span class="token punctuation">;</span> <span class="token comment">// tính hoành độ của item</span>
            <span class="token keyword">float</span> d <span class="token operator">=</span> <span class="token class-name">Math</span><span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>midpoint <span class="token operator">-</span> childMidpoint<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// khoảng cách giữa item và điểm trung tâm của recyclerView</span>
            <span class="token keyword">float</span> scale <span class="token operator">=</span> <span class="token number">1f</span> <span class="token operator">-</span> <span class="token number">0.35f</span> <span class="token operator">*</span> d <span class="token operator">/</span> midpoint<span class="token punctuation">;</span> <span class="token comment">//tính độ scale của item (0/35: Số này càng lớn thì các item 2 bên sẽ càng nhỏ</span>
            child<span class="token punctuation">.</span><span class="token function">setScaleX</span><span class="token punctuation">(</span>scale<span class="token punctuation">)</span><span class="token punctuation">;</span>
            child<span class="token punctuation">.</span><span class="token function">setScaleY</span><span class="token punctuation">(</span>scale<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

class ZoomCenterLinearLayoutManager extends LinearLayoutManager {

super(context);

}

public ZoomCenterLinearLayoutManager(Context context, int orientation, boolean reverseLayout) {

super(context, orientation, reverseLayout);

}

public ZoomCenterLinearLayoutManager(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {

super(context, attrs, defStyleAttr, defStyleRes);

}

@Override

public boolean checkLayoutParams(RecyclerView.LayoutParams lp) {

lp.width = getWidth() / 3; //Độ rộng của mỗi item sẽ bằng 1/3 độ rộng của RecyclerView

return true;

}

@Override

public void onLayoutCompleted(RecyclerView.State state) {

super.onLayoutCompleted(state);

scaleMiddle();

}

@Override

public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {

scaleMiddle();

return super.scrollHorizontallyBy(dx, recycler, state);

}

public void scaleMiddle() {

float midpoint = getWidth() / 2.f;

for (int i = 0; i < getChildCount(); i++) {

View child = getChildAt(i);

float childMidpoint = (getDecoratedRight(child) + getDecoratedLeft(child)) / 2.f; // tính hoành độ của item

float d = Math.abs(midpoint - childMidpoint); // khoảng cách giữa item và điểm trung tâm của recyclerView

float scale = 1f - 0.35f * d / midpoint; //tính độ scale của item (0/35: Số này càng lớn thì các item 2 bên sẽ càng nhỏ

child.setScaleX(scale);

child.setScaleY(scale);

}

<span class="token prolog">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>layout</span> <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">xmlns:</span>app</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res-auto<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">xmlns:</span>tools</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/tools<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>androidx.constraintlayout.widget.ConstraintLayout</span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextView</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/text_name<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintBottom_toBottomOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintDimensionRatio</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1:1<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintEnd_toEndOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintHorizontal_bias</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.0<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintStart_toStartOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintTop_toTopOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>androidx.constraintlayout.widget.ConstraintLayout</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>layout</span><span class="token punctuation">&gt;</span></span>

<?xml version="1.0" encoding="utf-8"?>

<layout 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">

<androidx.constraintlayout.widget.ConstraintLayout

android:layout_width="match_parent"

android:layout_height="wrap_content">

<TextView

android:id="@+id/text_name"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintDimensionRatio="1:1"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.0"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

item_empty.xml (Do chúng ta cần 1 khoảng trống ở đầu và cuối để hiển thị scale item đầu tiên và cuối cùng)

<span class="token prolog">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>layout</span> <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">xmlns:</span>app</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res-auto<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">xmlns:</span>tools</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/tools<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>androidx.constraintlayout.widget.ConstraintLayout</span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextView</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/text_name<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintBottom_toBottomOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintDimensionRatio</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1:1<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintEnd_toEndOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintHorizontal_bias</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.0<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintStart_toStartOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintTop_toTopOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>androidx.constraintlayout.widget.ConstraintLayout</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>layout</span><span class="token punctuation">&gt;</span></span>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

<TextView

</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

<span class="token keyword">package</span> <span class="token namespace">com<span class="token punctuation">.</span>example<span class="token punctuation">.</span>recyclerviewzoomcenter</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">android<span class="token punctuation">.</span>view</span><span class="token punctuation">.</span><span class="token class-name">LayoutInflater</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">android<span class="token punctuation">.</span>view</span><span class="token punctuation">.</span><span class="token class-name">View</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">android<span class="token punctuation">.</span>view</span><span class="token punctuation">.</span><span class="token class-name">ViewGroup</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">androidx<span class="token punctuation">.</span>annotation</span><span class="token punctuation">.</span><span class="token class-name">IntDef</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">androidx<span class="token punctuation">.</span>annotation</span><span class="token punctuation">.</span><span class="token class-name">NonNull</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">androidx<span class="token punctuation">.</span>recyclerview<span class="token punctuation">.</span>widget</span><span class="token punctuation">.</span><span class="token class-name">RecyclerView</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>example<span class="token punctuation">.</span>recyclerviewzoomcenter<span class="token punctuation">.</span>databinding</span><span class="token punctuation">.</span><span class="token class-name">ItemEmptyBinding</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>example<span class="token punctuation">.</span>recyclerviewzoomcenter<span class="token punctuation">.</span>databinding</span><span class="token punctuation">.</span><span class="token class-name">ItemRecyclerBinding</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">List</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token keyword">static</span> <span class="token namespace">com<span class="token punctuation">.</span>example<span class="token punctuation">.</span>recyclerviewzoomcenter</span><span class="token punctuation">.</span><span class="token class-name">ItemAdapter</span><span class="token punctuation">.</span><span class="token class-name">ViewType</span><span class="token punctuation">.</span>EMPTY<span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token keyword">static</span> <span class="token namespace">com<span class="token punctuation">.</span>example<span class="token punctuation">.</span>recyclerviewzoomcenter</span><span class="token punctuation">.</span><span class="token class-name">ItemAdapter</span><span class="token punctuation">.</span><span class="token class-name">ViewType</span><span class="token punctuation">.</span>NORMAL<span class="token punctuation">;</span>

<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">ItemAdapter</span> <span class="token keyword">extends</span> <span class="token class-name">RecyclerView</span><span class="token punctuation">.</span><span class="token class-name">Adapter</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">RecyclerView</span><span class="token punctuation">.</span><span class="token class-name">ViewHolder</span><span class="token punctuation">&gt;</span></span> <span class="token punctuation">{</span>
    <span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Data</span><span class="token punctuation">&gt;</span></span> dataList<span class="token punctuation">;</span>

    <span class="token keyword">public</span> <span class="token class-name">ItemAdapter</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Data</span><span class="token punctuation">&gt;</span></span> dataList<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>dataList <span class="token operator">=</span> dataList<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">int</span> <span class="token function">getItemViewType</span><span class="token punctuation">(</span><span class="token keyword">int</span> position<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>position <span class="token operator">==</span> <span class="token number">0</span> <span class="token operator">||</span> position <span class="token operator">==</span> dataList<span class="token punctuation">.</span><span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> EMPTY<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> NORMAL<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@NonNull</span>
    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token class-name">RecyclerView</span><span class="token punctuation">.</span><span class="token class-name">ViewHolder</span> <span class="token function">onCreateViewHolder</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> <span class="token class-name">ViewGroup</span> parent<span class="token punctuation">,</span> <span class="token keyword">int</span> viewType<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>viewType <span class="token operator">==</span> EMPTY<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token class-name">ItemEmptyBinding</span> binding <span class="token operator">=</span> <span class="token class-name">ItemEmptyBinding</span><span class="token punctuation">.</span><span class="token function">inflate</span><span class="token punctuation">(</span><span class="token class-name">LayoutInflater</span><span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>parent<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> parent<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">EmptyViewHolder</span><span class="token punctuation">(</span>binding<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token class-name">ItemRecyclerBinding</span> binding <span class="token operator">=</span> <span class="token class-name">ItemRecyclerBinding</span><span class="token punctuation">.</span><span class="token function">inflate</span><span class="token punctuation">(</span><span class="token class-name">LayoutInflater</span><span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>parent<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> parent<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">ItemViewHolder</span><span class="token punctuation">(</span>binding<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onBindViewHolder</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> <span class="token class-name">RecyclerView</span><span class="token punctuation">.</span><span class="token class-name">ViewHolder</span> holder<span class="token punctuation">,</span> <span class="token keyword">int</span> position<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>holder <span class="token keyword">instanceof</span> <span class="token class-name">ItemViewHolder</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token class-name">ItemViewHolder</span><span class="token punctuation">)</span> holder<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">bindData</span><span class="token punctuation">(</span>dataList<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>holder<span class="token punctuation">.</span><span class="token function">getAdapterPosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">int</span> <span class="token function">getItemCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> dataList<span class="token punctuation">.</span><span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">static</span> <span class="token keyword">class</span> <span class="token class-name">ItemViewHolder</span> <span class="token keyword">extends</span> <span class="token class-name">RecyclerView</span><span class="token punctuation">.</span><span class="token class-name">ViewHolder</span> <span class="token punctuation">{</span>
        <span class="token keyword">private</span> <span class="token class-name">ItemRecyclerBinding</span> binding<span class="token punctuation">;</span>

        <span class="token keyword">public</span> <span class="token class-name">ItemViewHolder</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> <span class="token class-name">ItemRecyclerBinding</span> binding<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">super</span><span class="token punctuation">(</span>binding<span class="token punctuation">.</span><span class="token function">getRoot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>binding <span class="token operator">=</span> binding<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">private</span> <span class="token keyword">void</span> <span class="token function">bindData</span><span class="token punctuation">(</span><span class="token class-name">Data</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            binding<span class="token punctuation">.</span>imageView<span class="token punctuation">.</span><span class="token function">setImageResource</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token function">getImageId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            binding<span class="token punctuation">.</span>textName<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">static</span> <span class="token keyword">class</span> <span class="token class-name">EmptyViewHolder</span> <span class="token keyword">extends</span> <span class="token class-name">RecyclerView</span><span class="token punctuation">.</span><span class="token class-name">ViewHolder</span> <span class="token punctuation">{</span>

        <span class="token keyword">public</span> <span class="token class-name">EmptyViewHolder</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> <span class="token class-name">ItemEmptyBinding</span> binding<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">super</span><span class="token punctuation">(</span>binding<span class="token punctuation">.</span><span class="token function">getRoot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@IntDef</span><span class="token punctuation">(</span><span class="token punctuation">{</span>EMPTY<span class="token punctuation">,</span> NORMAL<span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">public</span> <span class="token annotation punctuation">@interface</span> <span class="token class-name">ViewType</span> <span class="token punctuation">{</span>
        <span class="token keyword">int</span> EMPTY <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token keyword">int</span> NORMAL <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

package com.example.recyclerviewzoomcenter;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import androidx.annotation.IntDef;

import androidx.annotation.NonNull;

import androidx.recyclerview.widget.RecyclerView;

import com.example.recyclerviewzoomcenter.databinding.ItemEmptyBinding;

import com.example.recyclerviewzoomcenter.databinding.ItemRecyclerBinding;

import java.util.List;

import static com.example.recyclerviewzoomcenter.ItemAdapter.ViewType.EMPTY;

public class ItemAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

public ItemAdapter(List<Data> dataList) {

this.dataList = dataList;

}

@Override

public int getItemViewType(int position) {

if (position == 0 || position == dataList.size() - 1) {

return EMPTY;

}

return NORMAL;

}

@NonNull

@Override

public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

if (viewType == EMPTY) {

ItemEmptyBinding binding = ItemEmptyBinding.inflate(LayoutInflater.from(parent.getContext()), parent, false);

return new EmptyViewHolder(binding);

}

ItemRecyclerBinding binding = ItemRecyclerBinding.inflate(LayoutInflater.from(parent.getContext()), parent, false);

return new ItemViewHolder(binding);

}

@Override

public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {

if (holder instanceof ItemViewHolder) {

((ItemViewHolder) holder).bindData(dataList.get(holder.getAdapterPosition()));

}

@Override

public int getItemCount() {

return dataList.size();

}

static class ItemViewHolder extends RecyclerView.ViewHolder {

private ItemRecyclerBinding binding;

public ItemViewHolder(@NonNull ItemRecyclerBinding binding) {

super(binding.getRoot());

this.binding = binding;

}

private void bindData(Data data) {

binding.imageView.setImageResource(data.getImageId());

binding.textName.setText(data.getName());

}

static class EmptyViewHolder extends RecyclerView.ViewHolder {

public EmptyViewHolder(@NonNull ItemEmptyBinding binding) {

}

@IntDef({EMPTY, NORMAL})

public @interface ViewType {

int EMPTY = 0;

int NORMAL = 1;

}

<span class="token keyword">package</span> <span class="token namespace">com<span class="token punctuation">.</span>example<span class="token punctuation">.</span>recyclerviewzoomcenter</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">androidx<span class="token punctuation">.</span>appcompat<span class="token punctuation">.</span>app</span><span class="token punctuation">.</span><span class="token class-name">AppCompatActivity</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">androidx<span class="token punctuation">.</span>recyclerview<span class="token punctuation">.</span>widget</span><span class="token punctuation">.</span><span class="token class-name">LinearLayoutManager</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">androidx<span class="token punctuation">.</span>recyclerview<span class="token punctuation">.</span>widget</span><span class="token punctuation">.</span><span class="token class-name">LinearSnapHelper</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">androidx<span class="token punctuation">.</span>recyclerview<span class="token punctuation">.</span>widget</span><span class="token punctuation">.</span><span class="token class-name">RecyclerView</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">android<span class="token punctuation">.</span>os</span><span class="token punctuation">.</span><span class="token class-name">Bundle</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">android<span class="token punctuation">.</span>view</span><span class="token punctuation">.</span><span class="token class-name">View</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">ArrayList</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">List</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">Random</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token keyword">static</span> <span class="token namespace">com<span class="token punctuation">.</span>example<span class="token punctuation">.</span>recyclerviewzoomcenter</span><span class="token punctuation">.</span><span class="token class-name">ItemAdapter</span><span class="token punctuation">.</span><span class="token class-name">ViewType</span><span class="token punctuation">.</span>EMPTY<span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token keyword">static</span> <span class="token namespace">com<span class="token punctuation">.</span>example<span class="token punctuation">.</span>recyclerviewzoomcenter</span><span class="token punctuation">.</span><span class="token class-name">ItemAdapter</span><span class="token punctuation">.</span><span class="token class-name">ViewType</span><span class="token punctuation">.</span>NORMAL<span class="token punctuation">;</span>

<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">MainActivity</span> <span class="token keyword">extends</span> <span class="token class-name">AppCompatActivity</span> <span class="token punctuation">{</span>
    <span class="token keyword">private</span> <span class="token class-name">String</span><span class="token punctuation">[</span><span class="token punctuation">]</span> names <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token string">"A"</span><span class="token punctuation">,</span> <span class="token string">"B"</span><span class="token punctuation">,</span> <span class="token string">"C"</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Data</span><span class="token punctuation">&gt;</span></span> dataList <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ArrayList</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">protected</span> <span class="token keyword">void</span> <span class="token function">onCreate</span><span class="token punctuation">(</span><span class="token class-name">Bundle</span> savedInstanceState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onCreate</span><span class="token punctuation">(</span>savedInstanceState<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">setContentView</span><span class="token punctuation">(</span><span class="token class-name">R</span><span class="token punctuation">.</span>layout<span class="token punctuation">.</span>activity_main<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token class-name">RecyclerView</span> recyclerView <span class="token operator">=</span> <span class="token function">findViewById</span><span class="token punctuation">(</span><span class="token class-name">R</span><span class="token punctuation">.</span>id<span class="token punctuation">.</span>recyclerView<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token class-name">Random</span> random <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token class-name">Data</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Data</span><span class="token punctuation">(</span>names<span class="token punctuation">[</span>random<span class="token punctuation">.</span><span class="token function">nextInt</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token class-name">R</span><span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>image_1<span class="token punctuation">,</span> NORMAL<span class="token punctuation">)</span><span class="token punctuation">;</span>
            dataList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        dataList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Data</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> EMPTY<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        dataList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Data</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> EMPTY<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token class-name">ItemAdapter</span> adapter <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ItemAdapter</span><span class="token punctuation">(</span>dataList<span class="token punctuation">)</span><span class="token punctuation">;</span>
        recyclerView<span class="token punctuation">.</span><span class="token function">setLayoutManager</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ZoomCenterLinearLayoutManager</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token class-name">LinearLayoutManager</span><span class="token punctuation">.</span>HORIZONTAL<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        recyclerView<span class="token punctuation">.</span><span class="token function">setAdapter</span><span class="token punctuation">(</span>adapter<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token class-name">LinearSnapHelper</span> snapHelper <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">LinearSnapHelper</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Sử dụng SnapHelper để RecyclerView luôn focus vào 1 item (snap position)</span>
        snapHelper<span class="token punctuation">.</span><span class="token function">attachToRecyclerView</span><span class="token punctuation">(</span>recyclerView<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import androidx.appcompat.app.AppCompatActivity;

import androidx.recyclerview.widget.LinearLayoutManager;

import androidx.recyclerview.widget.LinearSnapHelper;

import android.os.Bundle;

import android.view.View;

import java.util.ArrayList;

import java.util.Random;

public class MainActivity extends AppCompatActivity {

private String[] names = {"A", "B", "C"};

private List<Data> dataList = new ArrayList<>();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

RecyclerView recyclerView = findViewById(R.id.recyclerView);

for (int i = 0; i < 10; i++) {

Random random = new Random();

Data data = new Data(names[random.nextInt(3)], R.drawable.image_1, NORMAL);

dataList.add(data);

}

dataList.add(0, new Data("", 0, EMPTY));

dataList.add(new Data("", 0, EMPTY));

ItemAdapter adapter = new ItemAdapter(dataList);

recyclerView.setLayoutManager(new ZoomCenterLinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));

recyclerView.setAdapter(adapter);

LinearSnapHelper snapHelper = new LinearSnapHelper(); // Sử dụng SnapHelper để RecyclerView luôn focus vào 1 item (snap position)

snapHelper.attachToRecyclerView(recyclerView);

}

Như vậy chúng ta đã giải quyết xong vấn đề trên rồi đó ^^

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Mục trung tâm quy mô RecyclerView

1) Đặt vấn đề

2) Giải pháp

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript