LinearLayout分隔符妙用

缘起

平时开发中很多时候,我们需要写这样的布局:类似标准的设置界面,从上到下一行一行的条目,然后每个条目之间有道分隔符隔开,就像下图这样:


标准设置界面中的分隔符

如何优雅地实现

方案1:
这时你可能会想这还不简单,我在每个item view的后面都插一个额外的分隔符view(一条线),就像这样:

借助View实现

虽然问题也能解决,但不够好、不够优雅。假如是在上面设置界面的case里,那我们可得有不少View需要写在最终的xml里面。如果你的业务又需要在某些情况下隐藏某个条目,那么你还得记得隐藏某条目的时候最好把和它配对的分隔符也隐藏掉,否则2个1px的分隔符会拼在一起,变成了个2px的分隔符,仔细看会发现的,其实已经算是一个小bug了,这样的处理不仅会使逻辑变的复杂,而且很无趣。另外这种方式由于增加了不少View,即LinearLayout的children也包括了这些view,当你想访问LinearLayout的children时也会带来不少麻烦,因为他们也会被算进去的。

方案2:
其实大可不必这么麻烦,LinearLayout已经为了这个很常见的case提供了非常优雅的实现,如下:

LinearLayout在每项中间显示divider

showDividers:divider显示的位置,默认是none,不显示divider,其它值有beginning(第0个child前面),middle(每个child之间),end(最后一个child后面),这些值可以通过'|'组合起来使用,比如你可以指定"beginning|middle|end";
divider:具体长什么样的分隔符,是一个drawable,注意这里不能简单只给个颜色值,比如#f00或者@color/xxx这样,drawable一定要是个有长、宽概念的drawable,比如你可以纯粹用一张图片当divider,我们这里用到的pf_linearlayout_horizonal_divider具体的代码如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">    
    <size android:height="1px" />    
    <solid android:color="@color/mgjpf_view_divider_color" />
</shape>

同样的我们有linearlayout_vertical_divider,用在水平的LinearLayout中,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">    
    <size android:width="1px" />    
    <solid android:color="@color/mgjpf_view_divider_color" />
</shape>

dividerPadding:是左右或上下距离LinearLayout的边距,有点margin的意思。你可以随时在自己的demo程序里改变下这个值,然后就能立马在预览区看到效果,帮助你加深理解。

源码分析

我们都知道ViewGroup由于是view容器的关系,所以它默认是啥都不画的,主要是它没啥需要画的,具体需要画那都是某个具体子类做的事情,这个小结论参考如下ViewGroup的源码:


ViewGroup默认不画任何东西

说完这个小结论,我们继续看下LinearLayout中关于divider支持的源码,涉及到的字段如下:

相关字段

我们上面说drawable要有长宽概念的,就是对应这里的mDividerWidth/mDividerWidth字段;

其构造器中有如下的源码:

LinearLayout构造器

这几个东西就是我们在xml文件中指定的,有具体的divider drawable、showDividers、dividerPadding这些,这里我们只看下setDividerDrawable实现:

setDividerDrawable实现

一般情况当我们不指定divider的时候,第一行的if会成立,也就是说这个方法啥也不做就返回了,但当我们指定一个有效的divider时,mDivider会被设置,并且会记录divider的长宽,这2个值在接下来布局、绘制过程中都会用到,最后注意下这里有个setWillNotDraw(divider == null);的调用,换句话说如果没divider,那么LinearLayout还是和ViewGroup一样,啥都不需要画,否则will_not_draw这个flag会被清掉,也就是需要画东西,当然就是需要画具体的divider了。

接下来我们来看下,具体绘制的代码,如下:

    @Override
    protected void onDraw(Canvas canvas) {
        // 如果没divider,那直接返回啥也不需要画
        if (mDivider == null) {
            return;
        }

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

    // 在竖直的LinearLayout里画水平的divider
    void drawDividersVertical(Canvas canvas) {
        final int count = getVirtualChildCount();
        for (int i = 0; i < count; i++) {
            final View child = getVirtualChildAt(i);

            // 非GONE的child都会被执行这样的操作
            if (child != null && child.getVisibility() != GONE) {
                // 如果它前面有的话
                if (hasDividerBeforeChildAt(i)) {
                    final LayoutParams lp = (LayoutParams) child.getLayoutParams();
                    // 需要画的y坐标起始点
                    final int top = child.getTop() - lp.topMargin - mDividerHeight;
                    drawHorizontalDivider(canvas, top);
                }
            }
        }

        // 检查最后的位置
        if (hasDividerBeforeChildAt(count)) {
            final View child = getLastNonGoneChild();
            int bottom = 0;
            if (child == null) {
                bottom = getHeight() - getPaddingBottom() - mDividerHeight;
            } else {
                final LayoutParams lp = (LayoutParams) child.getLayoutParams();
                bottom = child.getBottom() + lp.bottomMargin;
            }
            drawHorizontalDivider(canvas, bottom);
        }
    }

    /**
     * Determines where to position dividers between children.
     *
     * @param childIndex Index of child to check for preceding divider
     * @return true if there should be a divider before the child at childIndex
     * @hide Pending API consideration. Currently only used internally by the system.
     */
    protected boolean hasDividerBeforeChildAt(int childIndex) {
        if (childIndex == getVirtualChildCount()) {
            // Check whether the end divider should draw.
            return (mShowDividers & SHOW_DIVIDER_END) != 0;
        }
        boolean allViewsAreGoneBefore = allViewsAreGoneBefore(childIndex);
        if (allViewsAreGoneBefore) {
            // This is the first view that's not gone, check if beginning divider is enabled.
            return (mShowDividers & SHOW_DIVIDER_BEGINNING) != 0;
        } else {
            return (mShowDividers & SHOW_DIVIDER_MIDDLE) != 0;
        }
    }

    /**
     * Checks whether all (virtual) child views before the given index are gone.
     */
    private boolean allViewsAreGoneBefore(int childIndex) {
        for (int i = childIndex - 1; i >= 0; i--) {
            View child = getVirtualChildAt(i);
            if (child != null && child.getVisibility() != GONE) {
                return false;
            }
        }
        return true;
    }

    // 画水平的divider,只需要知道y方向top坐标即可
    void drawHorizontalDivider(Canvas canvas, int top) {
        mDivider.setBounds(getPaddingLeft() + mDividerPadding, top,
                getWidth() - getPaddingRight() - mDividerPadding, top + mDividerHeight);
        mDivider.draw(canvas);
    }

    // 同样,画竖直的divider,只需要知道x方向left坐标即可
    void drawVerticalDivider(Canvas canvas, int left) {
        mDivider.setBounds(left, getPaddingTop() + mDividerPadding,
                left + mDividerWidth, getHeight() - getPaddingBottom() - mDividerPadding);
        mDivider.draw(canvas);
    }

通过上面的源码分析,我们清楚地知道这种方式要比方案1优雅很多,因为它不需要引入额外的child view,而是通过draw的方式将divider画在合适的位置,相比之下效率也会好很多。而你只需要在xml里面配置几个标签即可,使用方便快捷,事半功倍。

总结

我们平时在用一些很常见的API(如findViewById)、xml写法,这时如果能花点时间搞清楚内部的工作原理,那你在实际使用中才能做到得心应手,对自己写的代码也会充满信心。

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

推荐阅读更多精彩内容