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

先搬运以前的文章吧。。。

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】