Android RecycleView(四)——时间轴

上一篇Android RecycleView(三) 完成了点击事件 这次使用recycleview完成一个有意思的时光轴效果。

效果图：



要实现次效果呢 其实就是我们在每一个item中画一个圆圈加一个线的图形





第一种和第二种都可以实现，当然我们可以找美工给我们相应的图片，放入item中，今天我们不说图片，自己画出第一个，第二个原理一样，只是画的坐标不一样。

自定义的 图形：

package com.chs.myrecycleview.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;

import com.chs.myrecycleview.R;

/**
* 作者：chs on 2016/2/4 10:02
* 邮箱：657083984@qq.com
*/
public class TimeLine extends View {
public static final int START = 0;
public static final int END = 1;
public static final int NORMAL = 2;
public static final int SPECIAL = 3;//只有一条数据的时候
private int mIconSize;
private int mLineSize;
private Drawable mBeginLine;
private Drawable mEndLine;
private Drawable mIcon;

public TimeLine(Context context) {
this(context, null);
}

public TimeLine(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public TimeLine(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.TimeLine);
this.mBeginLine = array.getDrawable(R.styleable.TimeLine_begin_line);
this.mEndLine = array.getDrawable(R.styleable.TimeLine_end_line);
this.mIcon = array.getDrawable(R.styleable.TimeLine_my_icon);
this.mIconSize = array.getDimensionPixelSize(R.styleable.TimeLine_my_icon_size,20);
this.mLineSize = array.getDimensionPixelSize(R.styleable.TimeLine_line_size,2);
array.recycle();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int w = mIconSize+getPaddingRight()+getPaddingLeft();
int h = mIconSize+getPaddingTop() +getPaddingBottom();

int widthSize = resolveSizeAndState(w,widthMeasureSpec,0);
int heightSize = resolveSizeAndState(h,heightMeasureSpec,0);
setMeasuredDimension(widthSize, heightSize);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//当view显示的时候调用此方法
initDrawable();
}

private void initDrawable() {
int left = getPaddingLeft();
int right = getPaddingRight();
int top = getPaddingTop();
int bottom = getPaddingBottom();

int width = getWidth();
int height = getHeight();
int cWidth = width-left-right;
int cHeight = height-top-bottom;
int iconSize = Math.min(mIconSize,Math.min(cWidth,cHeight));
Rect bounds = null;
if(mIcon!=null){
mIcon.setBounds(left,top,left+iconSize,top+iconSize);
bounds = mIcon.getBounds();

}
int lineLeft = bounds.centerX() - mLineSize/2;//除以2
if(mBeginLine!=null){
mBeginLine.setBounds(lineLeft,0,lineLeft+mLineSize,bounds.top);
}
if(mEndLine!=null){
mEndLine.setBounds(lineLeft,bounds.bottom,lineLeft+mLineSize,height);
}
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//        if(mBeginLine!=null){
//            mBeginLine.draw(canvas);
//        }
if(mEndLine!=null){
mEndLine.draw(canvas);
}
if(mIcon!=null){
mIcon.draw(canvas);
}
}

public void setIconSize(int mIconSize) {
this.mIconSize = mIconSize;
initDrawable();
invalidate();
}

public void setLineSize(int mLineSize) {
this.mLineSize = mLineSize;
initDrawable();
invalidate();
}

public void setBeginLine(Drawable mBeginLine) {
this.mBeginLine = mBeginLine;
initDrawable();
invalidate();
}

public void setEndLine(Drawable mEndLine) {
this.mEndLine = mEndLine;
initDrawable();
invalidate();
}

public void setIcon(Drawable mIcon) {
this.mIcon = mIcon;
initDrawable();
invalidate();
}
}

item中：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myApp="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/ll_main"
>
<com.chs.myrecycleview.widget.TimeLine
android:id="@+id/time_line"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
myApp:my_icon="@drawable/cicle"
myApp:my_icon_size="25dp"
myApp:begin_line="@drawable/line"
myApp:end_line="@drawable/line"
myApp:line_size="3dp"
/>
<TextView
android:id="@+id/tv_text"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:textSize="20sp"
android:text="hahah"
/>
</LinearLayout>

自定义属性 ：定义圆和线的宽高：这里是按照上面图二中写的 分了3部分 画的时候没用到beginline

<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="TimeLine">
<attr name="begin_line" format="color|reference"/>
<attr name="end_line" format="color|reference"/>
<attr name="line_size" format="dimension"/>
<attr name="my_icon_size" format="dimension"/>
<attr name="my_icon" format="color|reference"/>
</declare-styleable>
</resources>

在drawable中定义两个shape 一个圆形 一个方形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorPrimary" />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorPrimary" />
</shape>

然后我们把上一篇的item中的线条去掉即可。