快速簡單的定製一個時間軸佈局（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】