快速简单的定制一个时间轴布局（LinearLayout）（2）

2019年5月25日 144次阅读 来源: 羽翼君

先搬运之前的文章吧。。。
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0121/3902.html
Git:
https://github.com/razerdp/UnderLineLinearLayout

这一次要讲的是如何实现LineGravity:

在github上维护了几次，首次提交只实现了垂直的timeline，第二次提交实现了水平的timeline，第三次就是linegravity了。

从解析里面，不难看出这个简单的timeline根本方案就是直接在draw里面画出我们所需要的元素。毕竟view什么的归根到底不过是一个画布，我们要做的，就是draw something，对吧。

不过因为我们写的是程序，没有办法像我们人类一样，手到哪里画哪里，于是乎只好一步一步教程序怎么画了。

在前两次提交的时候，我们可以知道，画垂直的timeline，其参考点为屏幕的左边，也就是x=0，通过line_margin_side来动态调整我们线离布局左边的距离。同理，画水平的timeline，其参考点就是top了（y=0）。

而我们的结点则是通过top(垂直timeline) 和 left(水平timeline)以及子控件的padding来确定点的位置，同时引入line_dynamic_dimen来允许我们手动微调。

那么基本原理说完了，就说这个linegravity，从上面的一段话不难看出，timeline的位置最主要是依赖于参考点（或者说参考边），那么我们要实现linegravity，就意味着要可以根据不同的值来设置不同的参考边。

但是因为时间轴的特殊性，我们需要进行一下限制：

  • 如果是垂直的时间轴，那么我们设置linegravity在top或bottom将会毫无意义，因此在这两个gravity需要给定默认值(left)

  • 同理，水平的时间轴，我们设置linegravity在left或right将会毫无意义，同样给定默认值(top)

  • 无论是哪种时间轴，linegravity都会支持middle，时间轴将显示在布局的中间。

以上三个限定将会在下面的代码说到。

既然我们的条件和需求都定好了，那么我们现在就开始干活~

首先修改一下我们的attrs.xml，引入我们需要的条件：

<resources>
    <declare-styleable name="UnderLineLinearLayout">
        <!--时间轴偏移值-->
        <attr name="line_margin_side" format="dimension"/>
        <!--时间轴动态调整值-->
        <attr name="line_dynamic_dimen" format="dimension"/>
        <!--线宽-->
        <attr name="line_stroke_width" format="dimension"/>
        <!--线的颜色-->
        <attr name="line_color" format="color"/>
        <!--点的大小-->
        <attr name="point_size" format="dimension"/>
        <!--点的颜色-->
        <attr name="point_color" format="color"/>
        <!--图标-->
        <attr name="icon_src" format="reference"/>
        <!--时间轴的gravity-->
        <!--the gravity of the timeline-->
        <attr name="line_gravity">
            <enum name="Left" value="2"/>
            <enum name="Right" value="4"/>
            <enum name="Middle" value="0"/>
            <enum name="Top" value="1"/>
            <enum name="Bottom" value="3"/>
        </attr>
    </declare-styleable>
</resources>

在attr里面，我把几个值定义为left/right为偶数，top/bottom为基数是有一定意义的，当然，middle因为是通用的，随便给个就好。

接下来我们在构造器里面获取，同时在java定义好对应的数值（代码只给出增量代码，非完整代码，完整代码请到github查看）

//=============================================================line gravity常量定义
public static final int GRAVITY_LEFT = 2;
public static final int GRAVITY_RIGHT = 4;
public static final int GRAVITY_MIDDLE =0;
public static final int GRAVITY_TOP = 1;
public static final int GRAVITY_BOTTOM = 3;
//line gravity(默认垂直的左边)
private int lineGravity = GRAVITY_LEFT;

private int rootLeft;
private int rootMiddle;
private int rootRight;
private int rootTop;
private int rootBottom;
//参照点
private int sideRelative;

public UnderLineLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {  
  super(context, attrs, defStyleAttr);  
  ... ...
  lineGravity = attr.getInt(R.styleable.UnderLineLinearLayout_line_gravity, GRAVITY_LEFT);   
  ... ...
  initView(context);
}

OK，构造器我们获取了对应值之后，接下来就是要到ondraw里面开始我们的计算参考点了。

@Overrideprotected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    calculateSideRelative();
    if (drawLine) {
        drawTimeLine(canvas);
    }
}

private void calculateSideRelative() {
    rootLeft = getLeft();
    rootTop = getTop();
    rootRight = getRight();
    rootBottom = getBottom();
    if (curOrientation == VERTICAL) rootMiddle = (rootLeft + rootRight) >> 1;
    if (curOrientation == HORIZONTAL) rootMiddle = (rootTop + rootBottom) >> 1;
    boolean isCorrect=(lineGravity==GRAVITY_MIDDLE||(lineGravity+curOrientation)%2!=0);
    if (isCorrect){
        switch (lineGravity){
            case GRAVITY_TOP:
                sideRelative=rootTop;
                break;
            case GRAVITY_BOTTOM:
                sideRelative=rootBottom;
                break;
            case GRAVITY_LEFT:
                sideRelative=rootLeft;
                break;
            case GRAVITY_RIGHT:
                sideRelative=rootRight;
                break;
            case GRAVITY_MIDDLE:
                sideRelative=rootMiddle;
                break;
        }
    }else {
        sideRelative=0;
    }
}

在calculateSideRelative方法里面，按照我原来的想法，也是最直接，最粗暴的做法就是 通过switch判断当前orientation是垂直的还是水平的，然后分两块，垂直的就判断4个linegravity，水平的也判断4个linegravity，将非法的赋给默认值。。。

但考虑到在ondraw里面执行的方法，不应该进行大量的操作，同时看到系统定义的VERTICAL和HORIZONTAL分别是1和0，于是乎就想到了判断余数来判断合法性，这样做我们不用关心垂直或者水平，只需要关心linegravity，起码去掉了一半的判断。

首先我们引入一个布尔值，来判断当前的linegravity是否合法，判断规则如下：

  • 当前lineGravity==MIDDLE，无论orientation是什么，都视为合法

  • 当前lineGravity+orientation 模2，余数不为0则合法。

    • 比如：
      • 当前lineGravity=LEFT,orientation=Vertical，而我们的left=2,加上orientation就是等于3，除以2余1，所以合法。
      • 当前lineGravity=LEFT,orientation=Horizontal，加起来等于2，除以2余数为0，所以非法
      • 当然，我们的值可以再设计一下，弄成判断余数为0则合法也是可以的。

  • 如果是合法状态，则通过switch判断当前的lineGravity并给参考点赋值，非法状态统一给0

以上就是计算参考点的方法了，剩下的就是在draw时的操作了。

为了篇幅，以下仅展示绘制第一个点的操作：

 private void drawFirstChildViewVertical(Canvas canvas) {
        if (getChildAt(0) != null) {
            int top = getChildAt(0).getTop();
            //记录值
            firstX = sideRelative>=rootMiddle?(sideRelative-lineMarginSide):(sideRelative+lineMarginSide);
            firstY = top + getChildAt(0).getPaddingTop() + lineDynamicDimen;
            //画一个圆
            canvas.drawCircle(firstX, firstY, pointSize, pointPaint);
        }
    }

其中改变的地方在：

firstX = sideRelative>=rootMiddle?(sideRelative-lineMarginSide):(sideRelative+lineMarginSide);

这个位置引入了我们的sideRelative，也就是前面那个方法计算出来的参考点，那么为什么我们要跟布局的中线比较呢，原因很简单，比如我们定义了一个子控件的在父控件的gravity=right，然后我们margin，这时候子控件肯定是向左移动而不是向右移动对吧，所以我们定义小于中线的时候，坐标采取参考点+偏移值，大于中线的时候，坐标采取参考点-偏移值以符合我们平时的操作习惯。

以上，就是关于这个简易时间轴布局实现lineGravity的方法。

因为继承LinearLayout，动态添加的时候基本靠inflate，所以如果数据量很大的时候就不建议使用了，那时候建议用listview。该控件适用于支付流程的展示或者一些数据量比较小的地方。

最后这是我在简书的第一篇文章，也是展示的第一个控件，对于这个控件有什么好的建议或者想法或者更好玩的idea，欢迎留言-V-也欢迎github pr

【END】

    原文作者：羽翼君
    原文地址: https://www.jianshu.com/p/dee1bfeb6677
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞