自定义android的Gradient渐变的工具（Kotlin实现）

heybik
2,126 阅读4分钟

这是本人在公司内做的一个小的工具,由于牵涉到公司内的代码知识产权的问题所以没有使用java来实现，而重新使用了kotlin来实现这个自定义的工具(也算是用kotlin练手了)

下面进入正题

开发中有时候会有要用到渐变色背景的需求，个人认为静态的渐变色背景与android的material design设计风格是不搭配的，奈何实际的应用中仍然有需要做出渐变背景的效果，所以还是将这个有些***鸡肋***的特性也研究下。 android中对于自定义渐变有2种方法：

  • 1 通过在res/drawable中自定义这样的属性来实现，优点是实现方式简单（只需要xml的配置相关属性即可），缺点是自定义的功能不够强大（自定义属性只能最多支持:startColor,centerColor,endColor三种，渐变的角度也必须是45度的倍数）;
  • 2 通过LinearGradient，SweepGradient，RadialGradient这些渐变工具类来实现渐变，优点是可以自定义各种复杂的渐变，缺点是需要自定义view重写view的onDraw()方法通过paint来绘制渐变（增加了代码复杂度）；

本文章并不准备对第一种方法做什么说明(因为简单易用，有很多的资料可以找到)，而对于第二种方法我提供了一些几个常用的布局和一定的约束规则让我们可以更方便的使用自定义的渐变；

话不多说先上图：

device-2018-01-06-142007.png
这是我用google的logo的四种主要颜色所实现的一个 水平渐变的4色的圆角view，而实现这个效果的代码却很少：

<com.heybik.easygradient.sample.GoogleGradientView
        android:id="@+id/google_gradient_view"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:endY = "0"
        app:gradientColors="@array/google_gradient_colors"
        app:gradientPositions="@array/google_gradient_percents"/>

其中和渐变相关的配置就是这最后的3行代码：

app:endY = "0" //设置渐变结束点的Y坐标
app:gradientColors="@array/google_gradient_colors"//设置渐变的颜色数组
app:gradientPositions="@array/google_gradient_percents"//设置上面的颜色数组中每个颜色占的比例

通过endY指定结束点Y坐标，与默认的开始点的坐标结合即可形成渐变角度(默认startX，Y都为0，endX == width， endY== height)所以我只需要重新设置endY就能实现水平渐变，gradientColors指定渐变需要用到的颜色数组，gradientPositions指定每个颜色的比例即可实现渐变了**(如前面介绍渐变还分为：LinearGradient，SweepGradient，RadialGradient 三种呢，这里我默认如果不设置的话就当作线性渐变，如果要设置可以再添加一个app:gradientType)**

所有我自定义用于渐变的attr如下：

<resources>
    <declare-styleable name="gradientLayout">
        <attr name="startX" format="integer"/>
        <attr name="startY" format="integer"/>
        <attr name="endX" format="integer"/>
        <attr name="endY" format="integer"/>
        <!--centerX ,centerY are specific attrs for RadialGradient & SweepGradient-->
        <attr name="centerX" format="integer"/>
        <attr name="centerY" format="integer"/>
        <!--specific attr for RadialGradient-->
        <attr name="radius" format="integer"/>
        <attr name="gradientColors" format="reference"/>
        <attr name="gradientPositions" format="reference"/>
        <!--titleMode has no effect for SweepGradient-->
        <attr name="tileMode" format="string"/>
        <!--gradient type (linear,radial,sweep) default is linear-->
        <attr name="gradientType" format="string"/>
    </declare-styleable>
</resources>

上图中的4色渐变GoogleGradientView 继承自一个util库中定义好的GradientBaseView，这个BaseView已经实现好了对渐变的各种属性的解析,GoogleGradientVie只需要处理圆角即可：

/**
 * custom round corner gradient view (use google logo's color)
 * Created by gaobiaoqing on 2017/12/24.
 */
class GoogleGradientView : GradientBaseView {

    var roundX: Float = 12f
    var roundY = 12f
    private val rect = RectF()

    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int, defStyleRes: Int) : super(context, attrs, defStyleAttr, defStyleRes)

    override fun onDraw(canvas: Canvas) {
        Log.i(TAG, "onDraw")
        rect.left = 0f
        rect.top = 0f
        rect.right = measuredWidth.toFloat()
        rect.bottom = measuredHeight.toFloat()
        canvas.drawRoundRect(rect, roundX, roundY, paint)
    }
}

除了BaseView 还有base的layout 便于直接给layout设置渐变背景色

下面就是如何使用这个库呢：

//根目录的build.gradle中找到allprojects->repositories加入:
    allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
    }

//你需要引用这个功能的module(大部分情况你就是在app这个module)的build.gradle中加入:
compile 'com.github.gaobq:easygradient-kotlin:v0.0.2'
或者是
implementation 'com.github.gaobq:easygradient-kotlin:v0.0.2'(AS 3.0 中建议的替换成implementation)

代码很简单只是用kotlin写的,其实都是kotlin的基础语法,很容易看懂的

源码地址: easygradient-kotlin,欢迎直接看源码,如果可以的话麻烦给个star~~,这个库的功能很基本,可以在上面提交扩展的Pull Request; 最后 如需转载,请征求本人同意,并注明原作者,谢谢~

avatar
文章
阅读
粉丝