美文网首页
2019-06-16 渐变TextView

2019-06-16 渐变TextView

作者: Yangxy_Lazy | 来源:发表于2019-06-16 12:33 被阅读0次

    一、在onLayout时去改变颜色

    /**
     * Created by Yangxy on 2019/6/16
     * description -- 渐变TextView
     */
    
    package com.example.review_source_code_demo.base
    
    import android.annotation.SuppressLint
    import android.content.Context
    import android.graphics.*
    import android.util.AttributeSet
    import android.widget.TextView
    import com.example.review_source_code_demo.R
    
    /**
     * Created by Yangxy on 2019/6/11
     * description --
     */
    class GradientTextView2 @JvmOverloads constructor(
        context: Context,
        attrs: AttributeSet? = null,
        def: Int = 0
    ) : TextView(context, attrs, def) {
        private var startColor: Int = 0
        private var endColor: Int = 0
        private var gradientMode: String? = null
    
        init {
            if (attrs != null) {
                val attr = context.obtainStyledAttributes(attrs, R.styleable.GradientTextColor, def, 0)
                startColor = attr.getColor(R.styleable.GradientTextColor_startColor, Color.parseColor("#f5f5f5"))
                endColor = attr.getColor(R.styleable.GradientTextColor_endColor, Color.parseColor("#ff7767"))
                gradientMode = attr.getString(R.styleable.GradientTextColor_gradientMode)
                    ?: "horizontal"
                attr.recycle()
            }
        }
    
        @SuppressLint("DrawAllocation")
        override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
            super.onLayout(changed, left, top, right, bottom)
            if (changed) {
                if (gradientMode == "vertical") {
                    paint.shader = LinearGradient(
                        0f, 0f, 0f, height.toFloat(),
                        startColor,
                        endColor,
                        Shader.TileMode.CLAMP
                    )
                } else {
                    paint.shader = LinearGradient(
                        0f, 0f, width.toFloat(), 0f,
                        startColor,
                        endColor,
                        Shader.TileMode.CLAMP
                    )
                }
            }
        }
    }
    
    //attrs文件中加入:
       <!--渐变字的颜色-->
        <declare-styleable name="GradientTextColor">
            <attr name="startColor" format="color" />
            <attr name="endColor" format="color" />
            <attr name="gradientMode" format="string" />
        </declare-styleable>
    

    二、通过自定义onDraw去实现渐变

    package com.example.review_source_code_demo.base
    
    import android.content.Context
    import android.graphics.*
    import android.util.AttributeSet
    import android.widget.TextView
    import android.graphics.Shader
    import android.graphics.LinearGradient
    import com.example.review_source_code_demo.R
    
    
    /**
     * Created by Yangxy on 2019/6/11
     * description --
     */
    class GradientColorTextView
    @JvmOverloads constructor(
        mContext: Context, attrs: AttributeSet? = null, def: Int = 0
    ) : TextView(mContext, attrs, def) {
    
        private var startColor: Int = 0
        private var endColor: Int = 0
        private var mPaint: Paint? = null
        private var mViewWidth: Int = 0
        private var mTextBound: Rect = Rect()
        private var mLinearGradient: LinearGradient? = null
    
        init {
            if (attrs != null) {
                val a = mContext.obtainStyledAttributes(attrs, R.styleable.GradientTextColor, def, 0)
                startColor = a.getColor(R.styleable.GradientTextColor_startColor, Color.parseColor("#FAD961"))
                endColor = a.getColor(R.styleable.GradientTextColor_endColor, Color.parseColor("#F76B1C"))
                a.recycle()
            }
        }
    
        override fun onDraw(canvas: Canvas?) {
            mViewWidth = measuredWidth
            mPaint = paint
            val text = text.toString()
            mPaint?.getTextBounds(text, 0, text.length, mTextBound)
            mLinearGradient = LinearGradient(
                0F, 0F, mViewWidth.toFloat(), 0F,
                startColor,
                endColor,
                Shader.TileMode.CLAMP
            )
            mPaint?.shader = mLinearGradient
            canvas?.drawText(
                text,
                (mViewWidth / 2 - mTextBound.width() / 2).toFloat(),
                (measuredHeight / 2 + mTextBound.height() / 2).toFloat(),
                mPaint
            )
        }
    }
    
    //attrs文件
       <declare-styleable name="GradientTextColor">
            <attr name="startColor" format="color" />
            <attr name="endColor" format="color" />
        </declare-styleable>
    

    三、重点代码

    • 通过Paint的Shader去实现渐变效果

       //横向渐变  
       mLinearGradient = LinearGradient(0F, 0F, mViewWidth.toFloat(), 0F,
                  startColor,
                  endColor,
                  Shader.TileMode.CLAMP)
        //设置paint的shader
        mPaint?.shader = mLinearGradient
      
      
       //纵向渐变  
       mLinearGradient = LinearGradient(0F, 0F, 0F,height.toFloat(), 
                  startColor,
                  endColor,
                  Shader.TileMode.CLAMP)
        //设置paint的shader
        mPaint?.shader = mLinearGradient
      
      

    相关文章

      网友评论

          本文标题:2019-06-16 渐变TextView

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