android自定义控件实现简易时间轴(2)
作者:哈哈哈哈哈哈_Y 时间:2021-10-03 06:52:39
这篇做了一个简单的时间轴控件。右侧的数据就是一个简单的字符串。问题还是有的,当右侧的文字长度不一样的时候就会有问题了。现在可以修改一下适配右侧的文字。
效果如下:
代码:
private Paint bgPaint, linePaint, borderPaint,textPaint;
private Rect bgRect, textRect;
//基本属性
private int mTextSize;
private int mTextColor;
private String mTextTitle="默认文本内容";
private int lineColr = Color.parseColor("#AAAAAA");
private int borderColor = Color.parseColor("#AAAAAA");
private int bgColor = Color.parseColor("#138DDD");
private int mBorderColor=0xFFDDDDDD;
private int mBorderWidth = 10;
private int mLineColor=Color.parseColor("#ff000000");
private int mLineWidth = 2;
private int mLineHeight;
private int mBgColor;
private int mWidth =0;
private int mHeight =300;//整个控件的宽和高
//line绘制
private int lineLocation = -1;//0 上方 1 下方 2 上下两个
private int mRadius = 90;//直径,最终会被宽高限制
//设置line的位置 0 上方 1 下方 2 上下两个
public void setLineLocation(int lineLocation) {
this.lineLocation = lineLocation;
}
//设置纯色的整圆形,包括背景
public void setBgAndBorderColor(int color) {
this.mBgColor = color;
}
public void setmHeight(int mHeight) {
this.mHeight = mHeight;
}
public void setmBorderColor(int mBorderColor) {
this.mBorderColor = mBorderColor;
}
public void setmTextTitle(String mTextTitle) {
this.mTextTitle = mTextTitle;
}
public void setmRadius(int mRadius) {
this.mRadius = mRadius;
}
public void setmLineHeight(int mLineHeight) {
this.mLineHeight = mLineHeight;
}
public TimeLineSingleView(Context context) {
this(context,null);
}
public TimeLineSingleView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public TimeLineSingleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomCicleView, defStyleAttr, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.CustomCicleView_textSize:
// 默认设置为16sp,TypeValue也可以把sp转化为px
mTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 14, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomCicleView_textColor:
mTextColor = a.getColor(attr, Color.BLACK);
break;
case R.styleable.CustomCicleView_textTitle:
mTextTitle = a.getString(attr);
break;
case R.styleable.CustomCicleView_lineWidth:
mLineWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomCicleView_lineColor:
mLineColor = a.getColor(attr, lineColr);
break;
case R.styleable.CustomCicleView_mRadius:
mRadius=a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomCicleView_borderWidth:
mBorderWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomCicleView_borderColor:
mBorderColor = a.getColor(attr, borderColor);
break;
case R.styleable.CustomCicleView_bgColor:
mBgColor = a.getColor(attr, bgColor);
break;
}
}
a.recycle();
bgPaint = new Paint();
borderPaint = new Paint();
linePaint = new Paint();
textPaint = new Paint();
textRect = new Rect();
textPaint.setTextSize(mTextSize);
}
//EXACTLY :在准确的数值和Match_parent的状态是这个值 列表中,wrap_content的状态下必须计算一个合适的值
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int w = 0;
int h =0;
int widthMode=MeasureSpec.getMode(widthMeasureSpec);
int heightMode=MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
if(widthMode==MeasureSpec.EXACTLY){
w=widthSize;
}else{
w=Math.max(mHeight,mRadius+getPaddingRight()+getPaddingLeft());
}
if(heightMode==MeasureSpec.EXACTLY){
h=heightSize;
}else{
h=Math.max(mHeight,mRadius+getPaddingTop()+getPaddingBottom());
}
setMeasuredDimension(w,h);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centreX = getWidth()/ 2; // 获取圆心的x坐标
int centreY=getHeight()/2;
//半径比较
mBorderWidth =(mBorderWidth>=mRadius/10)?(mRadius/10):mBorderWidth;//半径的1/5
int radius = mRadius/2 - mBorderWidth / 2;// 半径
if(mLineHeight<=0){
mLineHeight=Math.abs(getHeight()/2-radius);//这个地方要判断设置正负
}
//绘制圆
bgPaint.setAntiAlias(true); // 消除锯齿
bgPaint.setColor(mBgColor);
bgPaint.setStyle(Paint.Style.FILL); // 设置实心
canvas.drawCircle(centreX, centreY, radius, bgPaint);
//绘制圆环
borderPaint.setStrokeWidth(mBorderWidth); // 设置圆环的宽度
borderPaint.setAntiAlias(true); // 消除锯齿
if (mBorderColor != 0) {
borderPaint.setColor(mBorderColor);
} else {
borderPaint.setColor(borderColor);
}
borderPaint.setStyle(Paint.Style.STROKE); // 设置实心
canvas.drawCircle(centreX,centreY, radius - mBorderWidth / 2+mLineWidth/2, borderPaint);
//绘制文本
textPaint.setTextSize(mTextSize);
textPaint.setColor(mTextColor);
textPaint.getTextBounds(mTextTitle, 0, mTextTitle.length(), textRect);
canvas.drawText(mTextTitle, centreX -textRect.width()/2-mBorderWidth/2, centreY + textRect.height() / 2, textPaint);
//绘制线条
drawLineAll(canvas,centreX,centreY,radius);
}
//上下都绘制不用
//1 上方 0 下方 2 上下两个
private void drawLineAll(Canvas canvas, float centreX, float centreY,int radius) {
if(lineLocation==-1){
linePaint.setColor(borderColor);
linePaint.setStrokeWidth(mLineWidth);
canvas.drawLine(centreX, 0, centreX, centreY-radius, linePaint);//上方的
canvas.drawLine(centreX, centreY+radius, centreX, getHeight(), linePaint);//下方的
}else{
//这个可以绘制不同的line
linePaint.setColor(lineColr);
linePaint.setStrokeWidth(mLineWidth);
if (lineLocation == 0) {
canvas.drawLine(centreX, centreY+radius, centreX, getHeight(), linePaint);
} else if (lineLocation == 1) {
canvas.drawLine(centreX, 0, centreX, centreY -radius , linePaint);
} else if (lineLocation == 2) {
canvas.drawLine(centreX, centreY+radius, centreX, getHeight(), linePaint);
canvas.drawLine(centreX, 0, centreX, centreY -radius , linePaint);
}
}
}
其他代码和之前文章一样就不贴了,但是还有一个问题就是,这个控件是放在一个列表里面的,你在适配器中使用的时候布局要是wrap的状态下要计算一个合适的高度,比如listView 的Item的高度。这里我没有实现,还是在Match和固定高度中,后期更改。
来源:https://blog.csdn.net/u010904027/article/details/73527759
标签:android,时间轴
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
教你轻松制作Android音乐播放器
2022-09-28 01:19:28
![](https://img.aspxhome.com/file/2023/1/111741_0s.png)
Android 动态加载二维码视图生成快照的示例
2023-08-04 19:57:54
![](https://img.aspxhome.com/file/2023/9/84719_0s.png)
Jmeter对接口测试入参实现MD5加密
2023-08-19 08:59:05
![](https://img.aspxhome.com/file/2023/5/113245_0s.png)
Java string类型转换成map代码实例
2021-06-07 12:19:29
![](https://img.aspxhome.com/file/2023/3/88753_0s.png)
Spring AOP 后置通知修改响应httpstatus方式
2022-06-05 06:54:26
![](https://img.aspxhome.com/file/2023/5/78305_0s.jpg)
一篇文章带你深入了解Java线程池
2021-11-22 21:59:42
springboot如何静态加载@configurationProperties
2021-12-13 16:20:13
解决IDEA的Terminal中文乱码问题
2022-05-06 01:31:08
![](https://img.aspxhome.com/file/2023/8/111438_0s.png)
IntelliJ IDEA 2021.1 推出语音、视频功能,边写代码边聊天(功能超级强大)
2023-09-13 23:30:37
![](https://img.aspxhome.com/file/2023/6/125586_0s.jpg)
IntelliJ IDEA中查看当前类的所有继承关系图
2023-08-06 12:40:19
![](https://img.aspxhome.com/file/2023/6/57906_0s.png)
Android向node.js编写的服务器发送数据并接收请求
2022-10-12 02:08:21
![](https://img.aspxhome.com/file/2023/8/137758_0s.jpg)
Android编程开发之NotiFication用法详解
2023-01-19 22:50:11
![](https://img.aspxhome.com/file/2023/4/105994_0s.png)
C#使用WebClient登录网站并抓取登录后的网页信息实现方法
2022-05-19 10:43:24
java中struts2实现简单的文件上传与下载
2022-12-23 22:53:21
Spring Security权限想要细化到按钮实现示例
2022-10-14 20:52:38
![](https://img.aspxhome.com/file/2023/5/106155_0s.png)
基于Nacos实现Spring Cloud Gateway实现动态路由的方法
2022-04-14 07:18:56
![](https://img.aspxhome.com/file/2023/3/122293_0s.png)
Spring Boot集成MyBatis实现通用Mapper的配置及使用
2023-07-03 18:17:10
浅谈两个jar包中包含完全相同的包名和类名的加载问题
2023-04-13 04:47:02
java网络编程基础知识介绍
2023-01-10 20:37:44
![](https://img.aspxhome.com/file/2023/7/77987_0s.jpg)
java随机验证码生成实现实例代码
2022-05-18 03:03:31