談談Android中的Divider是個什么東東
更新時間：2016年03月03日 15:19:32 作者：馮建V
在Android應用開發(fā)中會經(jīng)常碰到一個叫divider的東西，就是兩個View之間的分割線,本文主要給大家介紹android中的divider相關知識，需要的朋友可以參考下
在Android應用開發(fā)中會經(jīng)常碰到一個叫divider的東西，就是兩個View之間的分割線。最近工作中注意到這個divider并分析了一下，竟然發(fā)現(xiàn)內有乾坤，驚為天人…
ListView的divider
1. 定制divider的邊距
ListView的divider默認是左右兩頭到底的，如何簡單的設置一個邊距呢？
利用inset或者layer-list都可以簡單的實現(xiàn)，代碼如下：
<!-- 方法一 --> <?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="16dp" > <shape android:shape="rectangle" > <solid android:color="#f00" /> </shape> </inset> <!-- 方法二 --> <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:left="16dp"> <shape android:shape="rectangle"> <solid android:color="#f00" /> </shape> </item> </layer-list>
其中inset除了左邊距insetLeft, 還有insetTop、insetRight、insetBottom, 效果圖：
2. 最后一項的divider
很多同學可能發(fā)現(xiàn)了，ListView最后一項的divider有時候有，有時候又沒有。
我畫個圖大家就都能理解了：
上面是數(shù)據(jù)不足的顯示效果，如果數(shù)據(jù)滿屏的話，都是看不多最后的divider的。
真相是，當ListView高度是不算最后一項divider的，所以只有在match_parent的情況下，ListView的高度是有余的，才能畫出最后的那個divider。
ps：網(wǎng)上很多資料，把最后一項的divider和footerDividersEnabled混在一起了，這個是不對的，兩個從邏輯上是獨立的，類似的還有一個headerDividersEnabled，headerDividersEnabled和footerDividersEnabled不會影響到默認情況下最后的divider的繪制，他們是給header和footer專用的，特此說明。
RecyclerView的Divider
RecyclerView的Divider叫做ItemDecoration，RecyclerView.ItemDecoration本身是一個抽象類，官方?jīng)]有提供默認實現(xiàn)。
官方的Support7Demos例子中有個DividerItemDecoration, 我們可以直接參考一下，位置在sdk的這里：
extras/android/support/samples/Support7Demos/src/…/…/decorator/DividerItemDecoration.java
但是這個DividerItemDecoration有三個問題:
只支持系統(tǒng)默認樣式，不支持自定義Drawable類型的divider
里面的算法對于無高寬的Drawable（比如上面用到的InsetDrawable）是畫不出東西的水平列表的Divider繪制方法drawHorizontal()的right計算有誤，導致垂直Divider會繪制不出來，應該改為：final int right = left + mDivider.getIntrinsicWidth();;
針對這幾個問題，我修復并增強了一下：
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v4.view.ViewCompat;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
/**
* RecyclerView的ItemDecoration的默認實現(xiàn)
* 1. 默認使用系統(tǒng)的分割線
* 2. 支持自定義Drawable類型
* 3. 支持水平和垂直方向
* 4. 修復了官方垂直Divider顯示的bug
* 擴展自官方android sdk下的Support7Demos下的DividerItemDecoration
*/
public class DividerItemDecoration 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 mWidth;
private int mHeight;
private int mOrientation;
public DividerItemDecoration(Context context, int orientation) {
final TypedArray a = context.obtainStyledAttributes(ATTRS);
mDivider = a.getDrawable(0);
a.recycle();
setOrientation(orientation);
}
/**
* 新增：支持自定義dividerDrawable
*
* @param context
* @param orientation
* @param dividerDrawable
*/
public DividerItemDecoration(Context context, int orientation, Drawable dividerDrawable) {
mDivider = dividerDrawable;
setOrientation(orientation);
}
public void setOrientation(int orientation) {
if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
throw new IllegalArgumentException("invalid orientation");
}
mOrientation = orientation;
}
/**
* 新增：支持手動為無高寬的drawable制定寬度
* @param width
*/
public void setWidth(int width) {
this.mWidth = width;
}
/**
* 新增：支持手動為無高寬的drawable制定高度
* @param height
*/
public void setHeight(int height) {
this.mHeight = height;
}
@Override
public void onDraw(Canvas c, RecyclerView parent) {
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);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int top = child.getBottom() + params.bottomMargin +
Math.round(ViewCompat.getTranslationY(child));
final int bottom = top + getDividerHeight();
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 +
Math.round(ViewCompat.getTranslationX(child));
final int right = left + getDividerWidth();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
@Override
public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
if (mOrientation == VERTICAL_LIST) {
outRect.set(0, 0, 0, getDividerHeight());
} else {
outRect.set(0, 0, getDividerWidth(), 0);
}
}
private int getDividerWidth() {
return mWidth > 0 ? mWidth : mDivider.getIntrinsicWidth();
}
private int getDividerHeight() {
return mHeight > 0 ? mHeight : mDivider.getIntrinsicHeight();
}
}
使用如下：
// 默認系統(tǒng)的divider
dividerItemDecoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST);
// 自定義圖片drawable分的divider
dividerItemDecoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST, getResources().getDrawable(R.drawable.ic_launcher));
// 自定義無高寬的drawable的divider - 垂直列表
dividerItemDecoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST, new ColorDrawable(Color.parseColor("#ff00ff")));
dividerItemDecoration.setHeight(1);
// 自定義無高寬的drawable的divider - 水平列表
dividerItemDecoration = new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL_LIST, new ColorDrawable(Color.parseColor("#ff00ff")));
dividerItemDecoration.setWidth(1);
// 自定義帶邊距且無高寬的drawable的divider（以上面InsetDrawable為例子）
// 這個地方也可以在drawable的xml文件設置size指定寬高，效果一樣
dividerItemDecoration = new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL_LIST, getResources().getDrawable(R.drawable.list_divider));
dividerItemDecoration.setWidth(DisplayLess.$dp2px(16) + 1);
手動的Divider
有的時候沒有系統(tǒng)控件的原生支持，只能手動在兩個view加一個divider，比如，設置界面每項之間的divider，水平平均分隔的幾個view之間加一個豎的divider等等。
無論橫的豎的，都非常簡單，定一個View，設置一個background就可以了，正常情況下沒什么好說的。
下面我們來考慮一種常見設置界面，這種設置界面的分割線是有左邊距的，比如微信的設置界面，我相信絕大部分人的布局代碼都是這樣實現(xiàn)的：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!--這個group_container的background一定要設置， 而且要和list_item_bg的list_item_normal一致， 否則效果會不正確。 --> <LinearLayout android:id="@+id/group_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginTop="48dp" android:background="#fff" android:orientation="vertical"> <RelativeLayout android:id="@+id/account_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/list_item_bg" android:clickable="true"> <TextView android:id="@+id/account_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_margin="16dp" android:text="First Item" android:textColor="#f00" android:textSize="16sp" /> </RelativeLayout> <View android:layout_width="match_parent" android:layout_height="1px" android:layout_marginLeft="16dp" android:background="#f00" /> <RelativeLayout android:id="@+id/phone_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/list_item_bg" android:clickable="true"> <TextView android:id="@+id/phone_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_margin="16dp" android:text="Second Item" android:textColor="#f00" android:textSize="16sp" /> </RelativeLayout> </LinearLayout> </RelativeLayout>
效果圖如下，順便我們也看看它的Overdraw狀態(tài)：
通過分析Overdraw的層次，我們發(fā)現(xiàn)為了一個小小的邊距，設置了整個groud_container的背景，從而導致了一次Overdraw。
能不能優(yōu)化掉這個Overdraw？答案是肯定的。
背景肯定要去掉，但是這個左邊距的View就不能這么簡單的寫了，需要自定義一個View，它要支持能把左邊距的空出的16dp的線用list_item_normal的顏色值繪制一遍，這樣才能看的出左邊距。
這個View具體代碼如下：
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import com.jayfeng.lesscode.core.R;
public class SpaceDividerView extends View {
private int mSpaceLeft = 0;
private int mSpaceTop = 0;
private int mSpaceRight = 0;
private int mSpaceBottom = 0;
private int mSpaceColor = Color.TRANSPARENT;
private Paint mPaint = new Paint();
public SpaceDividerView(Context context) {
this(context, null);
}
public SpaceDividerView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SpaceDividerView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SpaceDividerView, defStyleAttr, 0);
mSpaceLeft = a.getDimensionPixelSize(R.styleable.SpaceDividerView_spaceLeft,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 0, getResources().getDisplayMetrics()));
mSpaceTop = a.getDimensionPixelSize(R.styleable.SpaceDividerView_spaceTop,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 0, getResources().getDisplayMetrics()));
mSpaceRight = a.getDimensionPixelSize(R.styleable.SpaceDividerView_spaceRight,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 0, getResources().getDisplayMetrics()));
mSpaceBottom = a.getDimensionPixelSize(R.styleable.SpaceDividerView_spaceBottom,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 0, getResources().getDisplayMetrics()));
mSpaceColor = a.getColor(R.styleable.SpaceDividerView_spaceColor, Color.TRANSPARENT);
a.recycle();
mPaint.setColor(mSpaceColor);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mSpaceLeft > 0) {
canvas.drawRect(0, 0, mSpaceLeft, getMeasuredHeight(), mPaint);
}
if (mSpaceTop > 0) {
canvas.drawRect(0, 0, getMeasuredWidth(), mSpaceTop, mPaint);
}
if (mSpaceRight > 0) {
canvas.drawRect(getMeasuredWidth() - mSpaceRight, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
}
if (mSpaceBottom > 0) {
canvas.drawRect(0, getMeasuredHeight() - mSpaceBottom, getMeasuredWidth(), getMeasuredHeight(), mPaint);
}
}
}
用這個SpaceDividerView我們重寫一下上面的布局代碼：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <LinearLayout android:id="@+id/group_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginTop="48dp" android:orientation="vertical"> <RelativeLayout android:id="@+id/account_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/list_item_bg" android:clickable="true"> <TextView android:id="@+id/account_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_margin="16dp" android:text="First Item" android:textColor="#f00" android:textSize="16sp" /> </RelativeLayout> <com.jayfeng.lesscode.core.other.SpaceDividerView android:layout_width="match_parent" android:layout_height="1px" android:background="#f00" app:spaceLeft="16dp" app:spaceColor="@color/list_item_normal"/> <RelativeLayout android:id="@+id/phone_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/list_item_bg" android:clickable="true"> <TextView android:id="@+id/phone_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_margin="16dp" android:text="Second Item" android:textColor="#f00" android:textSize="16sp" /> </RelativeLayout> </LinearLayout> </RelativeLayout>
效果圖和Overdraw狀態(tài)如下：
界面中group_container那塊由之前的綠色變成了藍色，說明減少了一次Overdraw。
上述情況下，SpaceDividerView解耦了背景色，優(yōu)化了Overdraw，而且這個SpaceDividerView也是支持4個方向的，使用起來特別方便。
陰影divider
陰影分割線的特點是重疊在下面的view之上的，它的目的是一種分割線的立體效果。
使用RelativeLayout并控制上邊距離可以實現(xiàn)：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- layout_marginTop的值應該就是不包括陰影高度的header高度--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:layout_marginTop="@dimen/header_height" android:orientation="vertical"> </LinearLayout> <!-- 這個要放在最后，才能顯示在最上層，這個header里面包括一個陰影View--> <include android:id="@+id/header" layout="@layout/include_header" /> </RelativeLayout>
雖然再簡單不過了，還是稍微分析一下，header包括內容48dp和陰影8dp，那么marginTop就是48dp了。
下面給大家介紹Android給ListView設置分割線Divider樣式
給ListView設置分割線，只需設置如下兩個屬性：
android:divider="#000" //設置分割線顯示顏色
android:dividerHeight="1px" //此處非0，否則無效
<ListView android:id="@+id/listView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:divider="#FFF" android:dividerHeight="1px" android:layout_margin="10dip"/>
以上內容給大家簡單介紹了Android中的Divider，希望對大家有所幫助！
相關文章
這篇文章主要介紹了Flutter應用集成極光推送的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
最近在項目執(zhí)行過程中有這樣一個需求，要求拍完照的圖片必須添加水印，本文記錄一下實現(xiàn)過程2021-05-05
Flutter使用AnimatedOpacity實現(xiàn)圖片漸現(xiàn)動畫
其實在Flutter中提供了一些封裝好的動畫組件，以便我們快速應用。本文將利用其中的AnimatedOpacity組件實現(xiàn)圖片漸現(xiàn)動畫效果，需要的可以參考一下2022-03-03
Android 7.0以上版本實現(xiàn)應用內語言切換的方法
本篇文章主要介紹了Android 7.0以上版本實現(xiàn)應用內語言切換的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了自己動手實現(xiàn)的Android計算器功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細介紹了Android實現(xiàn)圖片雙指縮放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
Android中使用ScrollView指定view的頂部懸停效果
在項目開發(fā)中遇到這樣的需求，需要實現(xiàn)scrollview頂部的懸停效果，實現(xiàn)原理非常簡單，下面小編通過本文給大家分享實例代碼，需要的朋友參考下2017-04-04
這篇文章主要介紹了Android AsyncTask用法巧用實例代碼的相關資料,需要的朋友可以參考下2017-01-01
本文主要介紹 Android 中的注解，這里整理詳細的資料來說明Android注解是如何使用，提高編程效率，有興趣的小伙伴可以參考下2016-08-08
終于經(jīng)過多次找錯，修改把一個簡單的照相機程序完成了，照相類代碼如下：2013-05-05