android自定義控件實(shí)現(xiàn)簡(jiǎn)易時(shí)間軸(2)
更新時(shí)間：2022年01月24日 17:19:36 作者：哈哈哈哈哈哈_Y
這篇文章主要為大家詳細(xì)介紹了android自定義控件實(shí)現(xiàn)簡(jiǎn)易時(shí)間軸的第二篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
這篇做了一個(gè)簡(jiǎn)單的時(shí)間軸控件。右側(cè)的數(shù)據(jù)就是一個(gè)簡(jiǎn)單的字符串。問(wèn)題還是有的，當(dāng)右側(cè)的文字長(zhǎng)度不一樣的時(shí)候就會(huì)有問(wèn)題了?，F(xiàn)在可以修改一下適配右側(cè)的文字。
效果如下：
代碼：
private Paint bgPaint, linePaint, borderPaint,textPaint;
private Rect bgRect, textRect;
//基本屬性
private int mTextSize;
private int mTextColor;
private String mTextTitle="默認(rèn)文本內(nèi)容";
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;//整個(gè)控件的寬和高
//line繪制
private int lineLocation = -1;//0 ?上方 1 ?下方 2 ?上下兩個(gè)
private int mRadius = 90;//直徑,最終會(huì)被寬高限制
//設(shè)置line的位置 0 ?上方 1 ?下方 2 ?上下兩個(gè)
public void setLineLocation(int lineLocation) {
? ? ? ? this.lineLocation = lineLocation;
? ? }
//設(shè)置純色的整圓形，包括背景
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:
? ? ? ? ? ? ? ? ? ? // 默認(rèn)設(shè)置為16sp，TypeValue也可以把sp轉(zhuǎn)化為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 :在準(zhǔn)確的數(shù)值和Match_parent的狀態(tài)是這個(gè)值 列表中，wrap_content的狀態(tài)下必須計(jì)算一個(gè)合適的值
? ? @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坐標(biāo)
? ? ? ? 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);//這個(gè)地方要判斷設(shè)置正負(fù)
? ? ? ? }
? ? ? ? //繪制圓
? ? ? ? bgPaint.setAntiAlias(true); // 消除鋸齒
? ? ? ? bgPaint.setColor(mBgColor);
? ? ? ? bgPaint.setStyle(Paint.Style.FILL); // 設(shè)置實(shí)心
? ? ? ? canvas.drawCircle(centreX, centreY, radius, bgPaint);
? ? ? ? //繪制圓環(huán)
? ? ? ? borderPaint.setStrokeWidth(mBorderWidth); // 設(shè)置圓環(huán)的寬度
? ? ? ? borderPaint.setAntiAlias(true); // 消除鋸齒
? ? ? ? if (mBorderColor != 0) {
? ? ? ? ? ? borderPaint.setColor(mBorderColor);
? ? ? ? } else {
? ? ? ? ? ? borderPaint.setColor(borderColor);
? ? ? ? }
? ? ? ? borderPaint.setStyle(Paint.Style.STROKE); // 設(shè)置實(shí)心
? ? ? ? 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 ?上下兩個(gè)
? ? 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{
? ? ? ? ? ? //這個(gè)可以繪制不同的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);
? ? ? ? ? ? }
? ? ? ? }
? ? }其他代碼和之前文章一樣就不貼了，但是還有一個(gè)問(wèn)題就是，這個(gè)控件是放在一個(gè)列表里面的，你在適配器中使用的時(shí)候布局要是wrap的狀態(tài)下要計(jì)算一個(gè)合適的高度，比如listView 的Item的高度。這里我沒(méi)有實(shí)現(xiàn)，還是在Match和固定高度中，后期更改。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android實(shí)現(xiàn)類似3D Touch菜單功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)類似3D Touch菜單功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
Android 可拖動(dòng)的seekbar自定義進(jìn)度值
這篇文章主要介紹了Android 可拖動(dòng)的seekbar自定義進(jìn)度值的相關(guān)資料，有需要的朋友參考下2016-04-04
詳解Android平臺(tái)JSON預(yù)覽(JSON-handle)
這篇文章主要介紹了Android平臺(tái)JSON預(yù)覽(JSON-handle)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Android 登錄Web 時(shí)對(duì)cookie 處理
本文主要介紹 Android登錄web時(shí)對(duì)cookie的處理方法,這里cookie 的讀寫(xiě)做了詳細(xì)介紹,并附有代碼進(jìn)行講解,希望能幫到有需要的同學(xué)2016-07-07
這篇文章主要介紹了Android中微信小程序開(kāi)發(fā)之彈出菜單的相關(guān)資料,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2016-12-12
Android中設(shè)置RadioButton在文字右邊的方法實(shí)例
這篇文章主要介紹了Android中設(shè)置RadioButton在文字右邊的方法實(shí)例,本文直接給出XML配置實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04
Android自定義View實(shí)現(xiàn)多圖片選擇控件
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)多圖片選擇控件，具有一定的實(shí)用性，感興趣的小伙伴們可以參考一下2016-08-08
Android如何實(shí)現(xiàn)藍(lán)牙配對(duì)連接功能
Android 并沒(méi)有開(kāi)放配對(duì)連接耳機(jī)的接口，而且網(wǎng)上大部分資料都是講解如何連接藍(lán)牙4.0的，很少有資料詳細(xì)介紹藍(lán)牙2.0相關(guān)的。期間還是踩了不少坑才摸索出解決辦法。所以把我自己摸索總結(jié)出來(lái)的經(jīng)驗(yàn)梳理記錄下，以便備份2021-05-05
Android--SQLite（增，刪，改，查）操作實(shí)例代碼
Android--SQLite（增，刪，改，查）操作實(shí)例代碼，需要的朋友可以參考一下2013-02-02
Android中AnimationDrawable使用的簡(jiǎn)單實(shí)例
這篇文章介紹了Android中AnimationDrawable使用的簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下2013-10-10