返回顶部
首页 > 资讯 > 移动开发 >android自定义控件实现简易时间轴(2)
  • 917
分享到

android自定义控件实现简易时间轴(2)

2024-04-02 19:04:59 917人浏览 独家记忆
摘要

这篇做了一个简单的时间轴控件。右侧的数据就是一个简单的字符串。问题还是有的,当右侧的文字长度不一样的时候就会有问题了。现在可以修改一下适配右侧的文字。 效果如下: 代码: priv

这篇做了一个简单的时间轴控件。右侧的数据就是一个简单的字符串。问题还是有的,当右侧的文字长度不一样的时候就会有问题了。现在可以修改一下适配右侧的文字。

效果如下:

代码:

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和固定高度中,后期更改。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: android自定义控件实现简易时间轴(2)

本文链接: https://lsjlt.com/news/163632.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • android自定义控件实现简易时间轴(2)
    这篇做了一个简单的时间轴控件。右侧的数据就是一个简单的字符串。问题还是有的,当右侧的文字长度不一样的时候就会有问题了。现在可以修改一下适配右侧的文字。 效果如下: 代码: priv...
    99+
    2024-04-02
  • android自定义控件实现简易时间轴(1)
    本文实例为大家分享了android自定义控件实现简易时间轴的具体代码,供大家参考,具体内容如下 之前项目需要写一个消费记录,类似于时间轴似的控件,自身在自定义控件这里不咋地(&hel...
    99+
    2024-04-02
  • android自定义控件如何实现简易时间轴
    这篇“android自定义控件如何实现简易时间轴”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“android自定义控件如何实现简易时间轴”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过...
    99+
    2023-06-28
  • android自定义控件是怎么实现简易时间轴
    这篇文章主要为大家分析了android自定义控件是怎么实现简易时间轴的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“android自定义控件是怎么实现简易时间...
    99+
    2023-06-28
  • Android自定义控件实现时间轴
    本文实例为大家分享了Android自定义控件实现时间轴的具体代码,供大家参考,具体内容如下 由于项目中有需求,就简单的封装一个,先记录一下,有时间上传到github。 1、先增加自定...
    99+
    2024-04-02
  • Android自定义时间轴的实现过程
    本文讲述Android自定义时间轴的实现过程,供大家参考,具体内容如下 相关视频链接: Android自定义控件系列 http://edu.csdn.net/cours...
    99+
    2022-06-06
    Android
  • Android中怎么实现一个简易时间轴
    这期内容当中小编将会给大家带来有关Android中怎么实现一个简易时间轴,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。新建一个自定义控件:public class WorkExcVie...
    99+
    2023-05-30
    android
  • Android自定义View简易折线图控件(二)
    继续练习自定义View,这次带来的是简易折线图,支持坐标点点击监听,效果如下: 画坐标轴、画刻度、画点、连线。。x、y轴的数据范围是写死的 1 <= x <= 7...
    99+
    2022-06-06
    折线图 view Android
  • Android自定义recyclerView实现时光轴效果
    时光轴效果在很多app上都有出现,例如淘宝中快递的跟踪,本文将使用recyclerView实现时光轴效果,我们会到自定义控件,首先先看一下效果图: 接下来是步骤分析 1自定义属性 ...
    99+
    2024-04-02
  • Android使用自定义View实现横行时间轴效果
    前言 本篇文章会说下如何使用并且要用麻烦的自定义 view 去实现时间轴效果,以及如何分析、实现自定义 view。 需要具备的知识:Paint、Canvas、自定义 view ...
    99+
    2022-06-06
    view 自定义view Android
  • Android开发中怎么自定义时间轴
    今天就跟大家聊聊有关Android开发中怎么自定义时间轴,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。具体内容如下 时间轴效果,实际上非常简单,就是listView中一个又一个的条目...
    99+
    2023-05-31
    android 时间轴 roi
  • Android自定义控件实现时钟效果
    在学习安卓群英传自定义控件章节的时候,有一个例子是绘制时钟,在实现了书上的例子后就想看这个时钟能不能动起来。 这里选择延迟一秒发送消息重绘view来实现的动画,对外提供了开启时...
    99+
    2022-06-06
    Android
  • Android自定义控件实现简单的轮播图控件
    最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码。于是自己封装了一下。本篇轮播图...
    99+
    2022-06-06
    轮播图 轮播 Android
  • Android自定义recyclerView怎么实现时光轴效果
    这篇文章主要为大家分析了Android自定义recyclerView怎么实现时光轴效果的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“Android自定义re...
    99+
    2023-06-28
  • Android实现一个倒计时自定义控件
    目录(一)前言(二)效果展示(三)实现思路(三)代码地址总结(一)前言 Android 其实提供了一个倒计时控件叫做CountDownTimer,这个倒计时控件用起来也很简单,但是要...
    99+
    2024-04-02
  • Android自定义View实现简易画板功能
    本文实例为大家分享了Android自定义View实现简易画板的具体代码,供大家参考,具体内容如下 自定义VIew实现简易画板效果,功能包括清空、选择颜色,选择大小,效果如下 画板布...
    99+
    2024-04-02
  • Android控件之使用ListView实现时间轴效果
     实现思路: 该View是通过ListView实现的,通过实体两个字段内容content和时间time来展示每个ListItem 时间轴是使用上面一条线(20dp)和...
    99+
    2022-06-06
    listview Android
  • Android自定义实现日历控件
    本文实例为大家分享了Android自定义实现日历控件的具体代码,供大家参考,具体内容如下 1. Calendar类 2. 布局 创建calendar_layout.xml <...
    99+
    2024-04-02
  • Android自定义控件实现验证码倒计时
    今天给大家带来一个新的控件——验证码倒计时,先看下效果图 1 效果演示 2 使用方式 <com.landptf.view.CountDownM android:id...
    99+
    2022-06-06
    倒计时 验证码 Android
  • Android自定义控件实现简单写字板功能
    先来看看效果图 就是简单的根据手指写下的轨迹去画出内容 一、实现 之前一篇文章里提到了android官方给出的自定义控件需要考虑以下几点: 创建View 处理View的布局...
    99+
    2022-06-06
    写字板 Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作