先搬运之前的文章吧。。。
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】
