服务器之家：专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - 谈谈Android中的Divider是个什么东东

谈谈Android中的Divider是个什么东东

2021-06-23 15:18冯建V Android

在Android应用开发中会经常碰到一个叫divider的东西，就是两个View之间的分割线,本文主要给大家介绍android中的divider相关知识，需要的朋友可以参考下

在android应用开发中会经常碰到一个叫divider的东西，就是两个view之间的分割线。最近工作中注意到这个divider并分析了一下，竟然发现内有乾坤，惊为天人…

listview的divider

1. 定制divider的边距

listview的divider默认是左右两头到底的，如何简单的设置一个边距呢？

利用inset或者layer-list都可以简单的实现，代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 方法一 -->
<?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, 效果图：

谈谈Android中的Divider是个什么东东

2. 最后一项的divider

很多同学可能发现了，listview最后一项的divider有时候有，有时候又没有。

我画个图大家就都能理解了：

谈谈Android中的Divider是个什么东东

上面是数据不足的显示效果，如果数据满屏的话，都是看不多最后的divider的。

真相是，当listview高度是不算最后一项divider的，所以只有在match_parent的情况下，listview的高度是有余的，才能画出最后的那个divider。

ps：网上很多资料，把最后一项的divider和footerdividersenabled混在一起了，这个是不对的，两个从逻辑上是独立的，类似的还有一个headerdividersenabled，headerdividersenabled和footerdividersenabled不会影响到默认情况下最后的divider的绘制，他们是给header和footer专用的，特此说明。

recyclerview的divider

recyclerview的divider叫做itemdecoration，recyclerview.itemdecoration本身是一个抽象类，官方没有提供默认实现。

官方的support7demos例子中有个divideritemdecoration, 我们可以直接参考一下，位置在sdk的这里：

extras/android/support/samples/support7demos/src/…/…/decorator/divideritemdecoration.java

但是这个divideritemdecoration有三个问题:

只支持系统默认样式，不支持自定义drawable类型的divider

里面的算法对于无高宽的drawable（比如上面用到的insetdrawable）是画不出东西的水平列表的divider绘制方法drawhorizontal()的right计算有误，导致垂直divider会绘制不出来，应该改为：final int right = left + mdivider.getintrinsicwidth();;

针对这几个问题，我修复并增强了一下：

?
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
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的默认实现
* 1. 默认使用系统的分割线
* 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();
}
}

使用如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 默认系统的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

有的时候没有系统控件的原生支持，只能手动在两个view加一个divider，比如，设置界面每项之间的divider，水平平均分隔的几个view之间加一个竖的divider等等。

无论横的竖的，都非常简单，定一个view，设置一个background就可以了，正常情况下没什么好说的。

下面我们来考虑一种常见设置界面，这种设置界面的分割线是有左边距的，比如微信的设置界面，我相信绝大部分人的布局代码都是这样实现的：

?
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
<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状态：

谈谈Android中的Divider是个什么东东

通过分析overdraw的层次，我们发现为了一个小小的边距，设置了整个groud_container的背景，从而导致了一次overdraw。

能不能优化掉这个overdraw？答案是肯定的。

背景肯定要去掉，但是这个左边距的view就不能这么简单的写了，需要自定义一个view，它要支持能把左边距的空出的16dp的线用list_item_normal的颜色值绘制一遍，这样才能看的出左边距。

这个view具体代码如下：

?
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
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我们重写一下上面的布局代码：

?
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
<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状态如下：

谈谈Android中的Divider是个什么东东

界面中group_container那块由之前的绿色变成了蓝色，说明减少了一次overdraw。

上述情况下，spacedividerview解耦了背景色，优化了overdraw，而且这个spacedividerview也是支持4个方向的，使用起来特别方便。

阴影divider

阴影分割线的特点是重叠在下面的view之上的，它的目的是一种分割线的立体效果。

谈谈Android中的Divider是个什么东东

使用relativelayout并控制上边距离可以实现：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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，否则无效

?
1
2
3
4
5
6
<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，希望对大家有所帮助！

  • Android
  • Divider

    • 延伸 · 阅读

    精彩推荐
    • AndroidAndroid界面效果UI开发资料汇总(附资料包)

      Android界面效果UI开发资料汇总(附资料包)

      android ui界面设计，友好的界面会提高用户体验度；同时也增强了android ui界面设计的难度，本文提供了一些常用开发资料(有下载哦)感兴趣的朋友可以了解下...

      Android开发网4672021-01-03
    • AndroidAndroid实现Service获取当前位置(GPS+基站)的方法

      Android实现Service获取当前位置(GPS+基站)的方法

      这篇文章主要介绍了Android实现Service获取当前位置(GPS+基站)的方法,较为详细的分析了Service基于GPS位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

      Ruthless8342021-03-31
    • AndroidAndroid程序设计之AIDL实例详解

      Android程序设计之AIDL实例详解

      这篇文章主要介绍了Android程序设计的AIDL,以一个完整实例的形式较为详细的讲述了AIDL的原理及实现方法,需要的朋友可以参考下...

      Android开发网4642021-03-09
    • Android汇总Android视频录制中常见问题

      汇总Android视频录制中常见问题

      这篇文章主要汇总了Android视频录制中常见问题，帮助大家更好地解决Android视频录制中常见的问题,需要的朋友可以参考下...

      yh_thu5192021-04-28
    • AndroidAndroid中AsyncTask详细介绍

      Android中AsyncTask详细介绍

      这篇文章主要介绍了Android中AsyncTask详细介绍,AsyncTask是一个很常用的API,尤其异步处理数据并将数据应用到视图的操作场合,需要的朋友可以参考下...

      Android开发网7452021-03-11
    • AndroidAndroid编程解析XML方法详解(SAX,DOM与PULL)

      Android编程解析XML方法详解(SAX,DOM与PULL)

      这篇文章主要介绍了Android编程解析XML方法,结合实例形式详细分析了Android解析XML文件的常用方法与相关实现技巧,需要的朋友可以参考下...

      liuhe68810052021-05-03
    • AndroidAndroid实现固定屏幕显示的方法

      Android实现固定屏幕显示的方法

      这篇文章主要介绍了Android实现固定屏幕显示的方法,实例分析了Android屏幕固定显示所涉及的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

      鉴客6192021-03-27
    • AndroidAndroid CardView+ViewPager实现ViewPager翻页动画的方法

      Android CardView+ViewPager实现ViewPager翻页动画的方法

      本篇文章主要介绍了Android CardView+ViewPager实现ViewPager翻页动画的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...

      Abby代黎明9602022-03-02
    最近更新
    编辑推荐
    阅读排行
    热门标签
    拉伸效果 　 PopupWindow 　 descendantFocusability 　 Andorid 　 退出程序 　 触屏震动 　 响应接口 　 自定义标题 　 图片居中 　 程序退出 　 binder 　 图片翻转动画 　 横竖屏切换 　 适配 　 dialog 　 preferenceactivity 　 SharedPreferences 　 MultiDex 　 tablelayout 　 RadioGroup 　 颜色编辑器 　 OnCreate 　 ImageView 　 Gallery 　 缩放动画 　 TextView 　 asynctask 　 Notification 　 NotificationManager 　 RelativeLayout 　
    © 2019-2022 服务器之家(www.tuohang.net) 版权所有关于我们联系我们版权申明网站地图