Android添加分割线的那些事

作者: 文艺的程序狗 | 来源:发表于2017-08-25 11:53 被阅读925次

    前言

    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);
            }
        }
    

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

    最后

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

    相关文章

      网友评论

        本文标题:Android添加分割线的那些事

        本文链接:https://www.haomeiwen.com/subject/uwacdxtx.html