日常的开发中经常会需要用到自定义的观点,这次刚好有个需求,需要用到带有节点的进度条。东西很简单直接继承视图就行了。
首先定义一些需要的属性
/* *
*背景画笔
*/私人油漆bgPaint;/* *
*前景画笔
*/私人油漆forePaint;/* *
*选中画笔
*/私人油漆selectPaint;/* *
*未选中画笔
*/私人油漆unselectPaint;/* *
*背景颜色
*/私人int背景=Color.parseColor (“# 9 c9c9c”);/* *
*前景颜色
*/私人int字体颜色=Color.parseColor (“# 8 a2be2”);/* *
*默认高度
*/私人int defaultHeight;/* *
*节点文字
*/私人List节点列表;
私人ListmBounds;/* *
*节点圆的半径
*/私人int半径;/* *
*文字和节点进度条的顶部
*/私人int marginTop;/* *
*两个节点之间的距离
*/私人int dividWidth;/* *
*选中位置
*/私人int selectIndex;
然后在构造方法中初始化这些数据
私人空间init(上下文语境){
半径=SizeUtils.dp2px(上下文,4);
defaultHeight=SizeUtils.dp2px(上下文、30);
marginTop=SizeUtils.dp2px(上下文,5);
bgPaint=new油漆(Paint.ANTI_ALIAS_FLAG);
bgPaint.setColor(背景);
bgPaint.setStyle (Paint.Style.FILL);
forePaint=new油漆(Paint.ANTI_ALIAS_FLAG);
forePaint.setColor(字体颜色);
forePaint.setStyle (Paint.Style.FILL);
unselectPaint=new油漆(Paint.ANTI_ALIAS_FLAG);
unselectPaint.setColor(背景);
unselectPaint.setTextSize (SizeUtils.sp2px(上下文,10));
selectPaint=new油漆(Paint.ANTI_ALIAS_FLAG);
selectPaint.setColor(字体颜色);
selectPaint.setTextSize (SizeUtils.sp2px(上下文,10));
}
设置节点文字
/* *
*设置数据
* @param nodeDatas
*/公共空间setNodeList (ListnodeDatas) {
如果(nodeDatas !=null) {
节点列表=nodeDatas;
}//测量文字所占用的空间
measureText ();
}/* *
*设置选中位置
* @param selectIndex
*/公共空间setSelectIndex (int selectIndex) {
这一点。selectIndex=selectIndex;
无效();
}/* *
*测量文字的长宽
*/私人空间measureText () {
,mBounds=new ArrayList<的在();
for (int i=0;我& lt;nodeList.size ();我+ +){
矩形mBound=new矩形();
unselectPaint.getTextBounds (nodeList.get(我),0,nodeList.get (i) . length (), mBound);
mBounds.add (mBound);
}
}
最后重要的步骤,开始在onDraw中绘制节点进度条和绘制文字
1,绘制灰色背景线条
如果(节点列表==null | | nodeList.isEmpty ()) {
返回;
}
bgPaint.setStrokeWidth(半径/2);//绘制灰色的背景线条
canvas.drawLine(半径,半径,getWidth()半径,半径,bgPaint);
2,绘制节点上的圆和两个节点之间的间隔线条
//画节点圆//每个圆相隔的距离
dividWidth=(getWidth()半径* 2)/(nodeList.size () - 1);
forePaint.setStrokeWidth(半径/2);
for (int i=0;我& lt;nodeList.size ();我+ +){
如果(i==selectIndex) {
for (int j=0;j & lt;=我;j + +) {
画布。drawCircle (+ j * dividWidth半径,半径,半径,forePaint);
j * dividWidth canvas.drawLine(半径,半径,半径,forePaint);
}
}else if (i> selectIndex) {
画布。drawCircle (+ i * dividWidth半径,半径,半径,bgPaint);
}
}
3,绘制节点上的文字
for (int i=0;我& lt;nodeList.size ();我+ +){
int currentTextWidth=mBounds.get (i) .width ();
如果(i==0) {
如果(i==selectIndex) {
canvas.drawText (nodeList.get (i), 0,半径* 2 + marginTop + mBounds.get (i) .height ()/2, selectPaint);
}else if (i> selectIndex) {
canvas.drawText (nodeList.get (i), 0,半径* 2 + marginTop + mBounds.get (i) .height ()/2, unselectPaint);
}
}else if (i==nodeList.size () 1) {
如果(i==selectIndex) {
for (int j=0;j & lt;=我;j + +) {
如果(j==0) {
canvas.drawText (nodeList.get (j), 0,半径* 2 + marginTop + mBounds.get (j) .height ()/2, selectPaint);
}else if (j==我){
canvas.drawText (nodeList.get (j), getWidth ()——currentTextWidth半径* 2 + marginTop + mBounds.get (j) .height ()/2, selectPaint);
其他}{
canvas.drawText (nodeList.get (j),半径+ j * dividWidth——currentTextWidth/2 * 2 + marginTop + mBounds.get半径(j) .height ()/2, selectPaint);
}
}
}else if (i> selectIndex) {
canvas.drawText (nodeList.get (i), getWidth ()——currentTextWidth半径* 2 + marginTop + mBounds.get (i) .height ()/2, unselectPaint);
}
其他}{
如果(i==selectIndex) {
for (int j=0;j & lt;=我;j + +) {
如果(j> 0) {
canvas.drawText (nodeList.get (j),半径+ j * dividWidth——currentTextWidth/2 * 2 + marginTop + mBounds.get半径(j) .height ()/2, selectPaint);
其他}{
canvas.drawText (nodeList.get (j), 0,半径* 2 + marginTop + mBounds.get (j) .height ()/2, selectPaint);
}
}
}else if (i> selectIndex) {
canvas.drawText (nodeList.get(我)+ i * dividWidth - currentTextWidth/2,半径半径* 2 + marginTop + mBounds.get (i) .height ()/2, unselectPaint);
}
}
}
