為什么要使用ItemDecoration
稀土掘金,這是一個針對技術(shù)開發(fā)者的一個應用,你可以在掘金上獲取******質(zhì)的技術(shù)干貨,不僅僅是Android知識、前端、后端以至于產(chǎn)品和設(shè)計都有涉獵,想成為全棧工程師的朋友不要錯過!
Part 1:不要用view做分割線
首先,什么是ItemDecoration?來看看官網(wǎng)是如何解釋的。
ItemDecoration允許從adapter的數(shù)據(jù)集合中為特定的item視圖添加特性的繪制以及布局間隔。它可以用來實現(xiàn)item之間的分割線,高亮,分組邊界等。
我們不能簡單的把ItemDecoration看成一個名字響亮的分割線。它比divider要多很多內(nèi)容。一個divider只能繪制在item之間,但是ItemDecoration可以繪制在item的四邊。ItemDecoration為decoration的測量和繪制提供了全方位的控制。一個decoration可以是一條分割線,也可以僅僅是一個間隔(inset)。
但不幸的是,絕大多數(shù)android開發(fā)者都沒有使用item decoration。在這個分為三部分的系列文章中,我們將了解ItemDecoration的強大之處。
***部分: 不要添加view來做分割線— 使用 ItemDecoration
第二部分: 不要使用padding來做間隔 —使用 ItemDecoration
第三部分: 在GridLayoutManager中高效的繪制decorations
本文是***部分。
不要用view做分割線 —會影響性能
我曾看到一些開發(fā)者在為RecyclerView添加divider的時候采用了一些捷徑。原因很簡單,ListView原生支持divider,可以直接在xml中設(shè)置divider。
- <ListView
- android:id="@+id/activity_home_list_view"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:divider="@android:color/black"
- android:dividerHeight="8dp"/>
但是到了RecyclerView,就再也不能直接添加divider了。需要添加一個繪制divider的ItemDecoration。但是開發(fā)者發(fā)現(xiàn)它很麻煩,于是直接把divider添加到(item的)view上,而不是使用ItemDecoration。
- <LinearLayout android:orientation="vertical">
- <LinearLayout android:orientation="horizontal">
- <ImageView />
- <TextView />
- </LinearLayout>
- <View
- android:width="match_parent"
- android:height="1dp"
- android:background="#333" />
- </LinearLayout>
每當我們走捷徑的時候,都有可能會產(chǎn)生副作用。而這里的副作用是可能影響性能。
當在布局中添加了一個divider的時候,我們增加了view的個數(shù)。我們都知道view的數(shù)目越少會得到越好的性能。有時候增加一個view來實現(xiàn)divider還會增加布局的層級。比如上面的例子中,我們不僅僅增加了一個view,還增加了一個包含它們的 linear layout。為了一個divider而創(chuàng)建了額外的布局。
不要用view做分割線 —會帶來副作用
因為divider是view的一部分,所以在item 動畫期間,divider也會一起跟著動畫。如下圖:
顯然divider不應該隨著item一起做動畫。而是和item分開,像這樣才是對的:
不要用view做分割線— 缺乏靈活性
如果divider是(item的)view的一部分,那么你就無法控制它。你唯一能控制的就是根據(jù)item的position改變divider的可見狀態(tài)。 而item decoration就靈活多了。
In the above image for the last item in the group divider fills the entire width. Other dividers have a margin of 56dp to their left side. Here is the ItemDecorator’s onDraw code.
在上圖中,group***一個item的divider充滿了整個寬度。其它的divider都有一個56dp的左邊距。這是這個ItemDecorator的onDraw代碼:
- @Override
- public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
- canvas.save();
- final int leftWithMargin = convertDpToPixel(56);
- final int right = parent.getWidth();
- final int childCount = parent.getChildCount();
- for (int i = 0; i < childCount; i++) {
- final View child = parent.getChildAt(i);
- int adapterPosition = parent.getChildAdapterPosition(child);
- left = (adapterPosition == lastPosition) ? 0 : leftWithMargin;
- parent.getDecoratedBoundsWithMargins(child, mBounds);
- final int bottom = mBounds.bottom + Math.round(ViewCompat.getTranslationY(child));
- final int top = bottom - mDivider.getIntrinsicHeight();
- mDivider.setBounds(left, top, right, bottom);
- mDivider.draw(canvas);
- }
- canvas.restore();
- }
不要用view做分割線—使用 ItemDecoration
寫一個自己的ItemDecoration其實非常簡單。你只需要創(chuàng)建一個繼承了ItemDecoration的類就可以了。重寫 getItemOffsets() 和 onDraw() 方法。具體實現(xiàn)可以參考 這個 示例。
而 25.0.0版本的支持庫中,我們有一個新的類 “DividerItemDecoration”。這個類直接實現(xiàn)了divider。
- DividerItemDecoration decoration = new DividerItemDecoration(getApplicationContext(), VERTICAL);
- recyclerView.addItemDecoration(decoration);
提示
一個RecyclerView可以添加多個ItemDecoration。發(fā)揮頭腦風暴的時候到了。
所有decoration都在item繪制之前繪制。如果你想讓decoration在view之后繪制,重寫onDrawOver() 而不是onDraw() 。
所以下次想為RecyclerView添加分割線的時候,別使用在item布局添加view這種方式了,使用ItemDecoration。