Android添加分割线的那些事

前言

Android的分割线遍布整个Android开发,以短小精悍的特点遍布所有App,这里我粗略的把分割线进行一下分类

  1. 控件(布局)间的分割线(比如菜单列表下的分割线,弹出框两个按
    钮间的 分割线)
  2. 列表分割线(Recycler的分割线,包括线性布局,表格、及瀑布)

另外 也可以按分割线的样式进行分类

  1. 实线分割线
  2. 虚线分割线

实战

控件(布局)间分割线

layer-list

首先量看两张效果图


图1

图2

对于这种效果,可能最直接的让人想到的是通过加一个<View ...../>然后设置背景颜色宽/高度1dp来实现,没错,我们都是从这样过来的,先说说这种方式的缺点吧

  1. 宽/高度不好控制(把其设置成固定值,或者是macth_parent,不能实现wrap_content的样式 也许是我没发现
  2. 麻烦(比如现在要实现一个左上右的分割线,就要写三个<View.../>
  3. 不整洁(对于追求完美的屌丝,把控制的样式写在layout里面总是不舒服的)

现在我们来实现图2分割线的效果。首先它是带一点背景颜色的,然后下面有下边框。代码(bg_drawable.xml)如下

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="-1dp" android:right="-1dp" android:top="-1dp">
        <shape  android:shape="rectangle">
            <solid android:color="@color/gray"/>
            <stroke android:width="1dp" android:color="@color/gray2"/>
        </shape>
    </item>
</layer-list>

把这个bg_drawable.xml设置给父布局background就行了。现在我们来看看之前提出的三个缺点

  1. 宽/高不好控制——>直接把drawable设置成background就行,分割线宽/高度与控件宽/高一样
  2. 麻烦 ——>要实现左上右三根分割线,只需要设置 <item android:top="-1dp">
  3. 不整洁——>控制样式写在drawable里,更整洁一些

android:divider

图1,要实现的话其实有个更好方式(前提父布局是LinearLayout)那就是利用android:divider属性控制

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@drawable/ggfx_liner_button_bg"
        android:layout_marginLeft="-1dp"
        android:layout_marginBottom="-1dp"
        android:divider="@drawable/ggfx_divider_line_blue"
        android:showDividers="middle"
       >
    <TextView
        android:id="@+id/tv_return_tree"
        android:gravity="center"
        android:textSize="14sp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:textColor="@color/colorPrimary"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="@string/ggfx_return_tree"/>

    <TextView
        android:id="@+id/tv_re_review"
        android:gravity="center"
        android:textSize="14sp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:textColor="@color/colorPrimary"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:text="@string/ggfx_re_review"/>

    <TextView
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:id="@+id/tv_look_result"
        android:gravity="center"
        android:textSize="14sp"
        android:textColor="@color/ggfx_white"
        android:layout_width="0dp"
        android:layout_weight="1"

        android:layout_height="wrap_content"
        android:background="@drawable/ggfx_bg_btn"
        android:text="@string/ggfx_look_result"/>
    </LinearLayout>

查看官方api https://developer.android.google.cn/reference/android/R.styleable.html#LinearLayout_divider 可以知道,通过android:dividerandroid:showDividers来控制分割线,其中android:showDividers有四种取值,表示分割线前、后、中、无。

api截图

抛砖引玉
TabLayout实现分割线

 mTabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
  LinearLayout linearLayout = (LinearLayout) mTabLayout.getChildAt(0);
  linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE|LinearLayout.SHOW_DIVIDER_END);
  linearLayout.setDividerPadding(DensityUtils.dp2px(getHolderActivity(),5));
  linearLayout.setDividerDrawable(ContextCompat.getDrawable(getContext(),R.drawable.ggfx_line_tablayou));

列表分割线

网上已经有很多Recycler分割线的实现方式了,写的比较好的可以参考一下鸿洋大神写的http://blog.csdn.net/lmj623565791/article/details/45059587
我这里就不BB了,这里插一句嘴,列表分割线的实现方式套路无非就是画水平分割线和垂直分割线(以下代码是Recycler分割线实现的部分代码)

 //绘制分割线
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        if (mOrientation == LinearLayoutManager.VERTICAL) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

细心的同学查看LinerLayout的源码可以知道其实也是这么实现的(以下代码摘自Linearlayout.java)

@Override
    protected void onDraw(Canvas canvas) {
        if (mDivider == null) {
            return;
        }

        if (mOrientation == VERTICAL) {
            drawDividersVertical(canvas);
        } else {
            drawDividersHorizontal(canvas);
        }
    }

所以有时间还是得多多看一下源码,不能光想着实现好了就行了(共勉)

最后

以一段华丽的分割线结束
-----------------------------------------------------

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,333评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,812评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,016评论 0 246
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,293评论 0 214
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,650评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,788评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,003评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,741评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,462评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,681评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,168评论 1 262
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,528评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,169评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,119评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,902评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,846评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,719评论 2 274

推荐阅读更多精彩内容