自定义View之扩展式

作者: 贤榆的榆 | 来源:发表于2016-06-05 13:41 被阅读988次

    前言

    在学习的道路上,有一句跨领域的话就是“教永远是最好的学”!那么我希望通过自己的分享能够更好的帮助到一些需要的人! 我也能够对自己的不足进行反观!

    自定义View在android开发中,可以说是一件感觉比较高级的事情了,那其实自定义view也分为好几种!通常来说我们也给他分为三个层次:

    1. 扩展已有控件
    • 创建复合控件
    • 实现全新的控件

    正文

    在这里我也为大家准备了一个实例FlashTextView
    先看一下效果图
    那是不可能的,我们把华丽留到最后!一上来就高潮,那是一种病,得治!

    这个效果其实就是通过对TextView进行一个简单的扩展就能够实现

    1.实现

    首先我们先创建一个类让它集成TextView

    public class FlashTextView extends TextView 
    

    实现其构造方法,并在构造方法中初始化我们要用到的对象

    public FlashTextView(Context context) {
        super(context);
        init();
    }
    
    public FlashTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    
    public FlashTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    
       private void init() {
        //初始化用来绘制背景边框的笔
        mPaint1=new Paint();
        mPaint2=new Paint();
        mPaint1.setColor(Color.RED);
        mPaint2.setColor(Color.GRAY);
        mPaint1.setStyle(Paint.Style.FILL);
        mPaint2.setStyle(Paint.Style.FILL);
    }
    

    下面是关于闪动效果实现,我们可以利用android中Paint对象的shader渲染器。通过设置一个不断变化的属性给LinearGradient,再用该Paint对象绘制要显示的文字!

    先在onSizeChanged()方法中进行对象的初始化工作

     @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //闪动效果的对象初始化工作
        if(mViewWidth==0){
            mViewWidth=getMeasuredWidth();
            if(mViewWidth>0){
                //通过getPaint()方法获取绘制TextView的画笔
                mPaint=getPaint();
                mLinearGradient= new LinearGradient(0,0,mViewWidth,0,
                        new int[]{Color.BLACK,0xffffffff,Color.BLACK}, 
                        null,Shader.TileMode.CLAMP);
                //将该属性赋予给paint对象的shader渲染器
                mPaint.setShader(mLinearGradient);
                mGradientMatrix =new Matrix();
            }
        }
    }
    

    然后我们再在onDraw方法中绘制出边框,背景;并通过矩阵的方式来不断平移渐变效果。最终达到我们想要的效果

     @Override
    protected void onDraw(Canvas canvas) {
        //绘制字体之前
        //我们在这里绘制外矩形
        canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),mPaint1);
        //绘制内矩形
        canvas.drawRect(5,5,getMeasuredWidth()-5,getMeasuredHeight()-5,mPaint2);
        //绘制字体之前向右平移5像素
        canvas.translate(5,0);
        canvas.save();
        //开始绘制字体
        super.onDraw(canvas);
        //绘制字体之后
        canvas.restore();
        if (mGradientMatrix !=null){
            mTranslate += mViewWidth / 5;
            if(mTranslate>2*mViewWidth){
                mTranslate=-mViewWidth;
            }
            mGradientMatrix.setTranslate(mTranslate,0);
            mLinearGradient.setLocalMatrix(mGradientMatrix);
            postInvalidateDelayed(100);
        }
    }
    

    2.使用

    这个就比较简单而来,就像我们平时使用TextView一样,只是需要注意的的是使用该类的全路径

     <com.timen.ronny.newtextview.view.FlashTextView
        android:layout_marginTop="30dp"
        android:textColor="@android:color/black"
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android程序员日记 "
        android:padding="5dp"
        android:textSize="30dp"
        android:layout_centerHorizontal="true" />
    

    3.看效果

    憋坏了吧!结果看到这么大一个广告,别打我,下次给你放美女图!

    4.扩展

    我想对于新手(也就是我自己,不指别人)来讲,诸如Matrix、LinearGradient可能没有接触过。关于这些类和api,我建议大家可以自己去查一下,毕竟自己动手弄明白的东西,印象会更加的深刻!所以在这里我就不复制粘贴了!

    这扩展扩的,跟没扩一样!话不好这么讲哟!毕竟:

    授人以鱼,不如授人以渔!

    后记

    总结一下对于自定义控件,用到比较多,也比较重要的回调方:

    • onFinishInflate():加载完XML组件后回调
    • onSizeChanged():组件大小改变时回调
    • onMeasure():回调该方法来进行测量
    • onLayout():回调该方法来显示位置
    • onTouchEvent():监听到触摸事件回调

    那么扩展型自定义(其实应该叫做半自定义)View的实现,就是在原有控件的基础上通过上面的这一些回调方法来添加实现你想要的一些效果,比如上面那个带背景框和字体闪动效果TextView。

    我的github源码:https://github.com/luorenyu/FlashTextView.git

    最重要:喜欢就扫描上面的效果图关注我的公众号


    相关文章

      网友评论

      • 莫离境:Android群英传上的案例- -
        贤榆的榆: @CastleVong 对的😉
      • phoenixgjh:简单明了,感谢分享
        贤榆的榆:@phoenixgjh 不客气
      • HannyYeung:怎麼沒人評論呢,作者思想境界和情商本人覺得都很高,文字也很優美,看起來舒服,就願意看
        贤榆的榆: @HannyYeung 啊,谢谢你的赞美,但是真的没有你说的那么好。像你这么个夸发,我会盲目骄傲的

      本文标题:自定义View之扩展式

      本文链接:https://www.haomeiwen.com/subject/vakrdttx.html