android 颜色渐变扩散,Android 颜色渐变(gradient)的实现总结
前言
日常Android开发中,有很大一部分需要使用到渐变色,有时候UI会给我们提供一套对应的图片资源,这样我们直接使用就可以了,当然我们也可以自己通过代码实现颜色渐变:
一、XML实现颜色渐变
比较简单的一种方式实现颜色渐变,我们通过定制一个对应的shape文件,配置其属性之后,直接作为android:background赋值给对应的View即可。
1.创建XML文件
在你的drawable文件夹下创建shape资源:
shape_gradient.xml文件代码如下:
android:endColor="@color/colorPrimary"
android:startColor="@color/colorAccent" />
解释一下各个层级的标签:
[shape] 根标签,声明一个shape
[gradient] 声明该shape的属性-渐变色,除此外还有其他属性如corners、stroke、size等等
[android:angle]渐变色的角度,举例来说,0代表从上至下颜色渐变;45代表从左至右颜色渐变;90代表从下至上颜色渐变…
[android:startColor&android:endColor] 很好理解,渐变开始的颜色和渐变结束时的颜色(从什么颜色变到什么颜色)
2.将渐变色赋予对应的View
直接放入MainActivity的layout文件中:
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/shape_gradient"
tools:context="com.mei_husky.gradientdemo.MainActivity">
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
3.运行查看结果
如下图,红色边框范围内标记的就是渐变色的区域。
二、代码实现颜色渐变
上面的方式其实已经可以应付80%以上的颜色渐变了,但是我们有时想要实现更复杂一些的颜色渐变,比如:
1.多重渐变(color1 -> color2 -> … ->colorN )
2.自定义View中绘制
3.更多其他复杂需求
这时我们可以通过LinearGradient(线性渐变)类来自定义实现我们想要的效果,以一个小Demo抛砖引玉:
在这个demo中,我们的主界面颜色渐变为(粉 -> 灰 -> 蓝)
1.LinearGradient类简介
使用方式非常简单:
/** Create a shader that draws a linear gradient along a line.
@param x0 The x-coordinate for the start of the gradient line
@param y0 The y-coordinate for the start of the gradient line
@param x1 The x-coordinate for the end of the gradient line
@param y1 The y-coordinate for the end of the gradient line
@param colors The colors to be distributed along the gradient line
@param positions May be null. The relative positions [0..1] of
each corresponding color in the colors array. If this is null,
the the colors are distributed evenly along the gradient line.
@param tile The Shader tiling mode
*/
public LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[],
TileMode tile)
/**
@param x0 起始点X坐标
@param y0 起始点Y坐标
@param x1 终点X坐标
@param y1 终点Y坐标
@param colors 所有颜色渐变集合
@param positions 我们可以让它均匀的渐变,也可以让它按照你想要的比例进行渐变,可以为null,这样的话假设1为整个渐变的长度,我们设置的所有颜色(假设有4种颜色),都以同等的权重(渐变长度比例0.25:0.25:0.25:0.25)进行颜色渐变。
@param tile 着色器的不同模式
*/
public LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[],
TileMode tile)
可以看到.我们想要实现它,需要确定两个坐标,起始坐标 -> 终点坐标,以及要渐变所有颜色的集合,以及颜色中转的点坐标(position[]),最后还有tileMode.
关于着色器的不同模式,如果有需求,可以参考这篇文章,很详细:
2.自定义View:
public class MyView extends View {
public MyView(Context context) {
super(context);
}
public MyView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//获取View的宽高
int width = getWidth();
int height = getHeight();
int colorStart = getResources().getColor(R.color.colorPrimary);
int color1 = Color.GRAY;
int colorEnd = getResources().getColor(R.color.colorAccent);
Paint paint = new Paint();
LinearGradient backGradient = new LinearGradient(0, 0, 0, height, new int[]{colorStart, color1 ,colorEnd}, null, Shader.TileMode.CLAMP);
paint.setShader(backGradient);
canvas.drawRect(0, 0, width, height, paint);
}
}
然后将我们的自定义View放到MainActivity的布局文件中,就可以看到上图的效果啦!
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.mei_husky.gradientdemo.MainActivity">
android:layout_height="match_parent" />
3、仔细分析一波
代码应该不难理解,我们再来回顾一下LinearGradient的构造,看看是如何实现方向上的颜色渐变(本例中为由上至下)的
LinearGradient(0, 0, 0, height, new int[]{colorStart, color1 ,colorEnd}, null, Shader.TileMode.CLAMP);
从图中我们是不是可以理解其实就是2个坐标的颜色渐变,通过x1,y1 -> x2,y2两个坐标实现颜色的渐变方向指定!
那么如果我们想要实现45°对角的颜色渐变呢?很简单,是不是坐标从(0,0)到(width,height)就可以了呢?我们试一试:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//获取View的宽高
int width = getWidth();
int height = getHeight();
int colorStart = getResources().getColor(R.color.colorPrimary);
int color1 = Color.GRAY;
int colorEnd = getResources().getColor(R.color.colorAccent);
Paint paint = new Paint();
LinearGradient backGradient = new LinearGradient(0, 0, width, height, new int[]{colorStart, color1 ,colorEnd}, null, Shader.TileMode.CLAMP);
// LinearGradient backGradient = new LinearGradient(0, 0, 0, height, new int[]{colorStart, color1 ,colorEnd}, null, Shader.TileMode.CLAMP);
paint.setShader(backGradient);
canvas.drawRect(0, 0, width, height, paint);
}
得到结果:
最后放上源码传送门:
android 颜色渐变扩散,Android 颜色渐变(gradient)的实现总结相关推荐
- android 点击扩散,Android水波纹扩散效果
先上图 囧!没有图片所以就拿了小安代替了 先看一下如何使用这个View .com.mybutton.view.RippleDiffuse android:layout_width="200d ...
- 【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )
文章目录 一.LinearGradient 线性渐变渲染 1.设置 2 个颜色的渐变 3.设置多个颜色的渐变 二.LinearGradient 线性渐变渲染重要参数分析 1.正常渲染 2.设置多个渐变 ...
- android 颜色渐变动画,Android渐变研究
GradientDrawable 用GradientDrawable实现渐变可以通过xml或者代码实现,xml实现需要在drawable下建立xml文件,在标签下建立标签. 例如gradlient_b ...
- Android 进度条自增长和渐变颜色
Android 进度条自增 第一章 Android studio 进度条的学习 文章目录 Android 进度条自增 一.进度条的自动前进 二.颜色渐变 1.在drawable中创建 2.设置数据 总 ...
- Android中自定义ScrollView的滑动监听事件,并在滑动时渐变标题栏背景颜色
效果图 滑动前: 滑动中: 滑动到底部: 项目结构 ObservableScrollView package com.jukopro.titlebarcolor;import android.cont ...
- android+渐变+百分比,Android实现 Shape属性gradient 渐变效果
1,gradient(渐变) [1]用以定义渐变色,可以定义两色渐变和三色渐变,及渐变样式: android:type=["linear" | "radial" ...
- android 圆形渐变背景,Android背景渐变色(shape,gradient) 圆角(shape,corners)
Android设置背景色可以通过在res/drawable里定义一个xml,如下: [代码]xml代码: 1 2 3 4 android:startColor="#FFF" 5 a ...
- 标准Android按钮具有不同的颜色
我想稍微更改标准Android按钮的颜色,以便更好地匹配客户的品牌. 到目前为止,我发现这样做的最好方法是将Button的drawable更改为res/drawable/red_button.xml ...
- android 画圆角背景颜色,android圆角矩形有背景颜色
android圆角矩形,渐变颜色,自定义 首先,在drawable目录下写一个xml,名字随便起(只要符合规范),代码如下: android:shape="rectangle" & ...
- android设置渐变背景,Android LinearLayout渐变背景
我在将渐变背景应用于LinearLayout时遇到问题. 根据我所读的内容,这应该相对简单,但似乎不起作用. 作为参考,我正在开发2.1-update1. header_bg.xml: android ...
最新文章
- OSPF LSA 类型
- Netty入门教程——认识Netty
- JavaScript字幕滚动效果
- IDEA中Project 和 Module的区别
- 为什么程序员发现不了自己的BUG
- sql获取受影响行数、插入标识值
- 中国最闷声发大财的城市,人均GDP超杭州
- mysql数据库密码为空_注意MySQL 数据库用户root密码为空_MySQL
- 记录一次APP的转让流程
- python 正则表达式1
- 视频号一条视频涨粉8W
- 如何读懂3GPP协议
- linux du命令使用
- 【JVM基础】垃圾回收算法详解(引用计数、标记、清除、压缩、复制)
- eclipse Android添加权限
- netstat查看系统TIME_WAIT状态个数
- 每周全球科技十大新闻(2021.1.18-1.24)
- 如何设置Qt程序软件的语言翻译(Qt自带翻译软件)
- [填坑]Ubuntu18.04无法使用chrome浏览器共享屏幕解决方案
- 深聊全链路压测之:第二十二讲 | 如何解决 GoReplay 动态数据关联。
热门文章
- mysql 实现api接口_一套免费MySQL数据库数据接口API,让项目开发更简单
- np.ones(),np.zeros(), np.empty(),np.full(),np.ones_like() 基本用法
- SSL/TLS(3): CA证书解释
- 杨柳目-杨柳科-杨属-杨树:杨树
- 语音预处理之分帧加窗
- 网页中文转英文(国际化)
- 15b万用表怎么测电容_万用表怎么用?福禄克15B+一机详解万用表的使用方法
- java while 死循环_java while (true) 死循环
- python flask 路由_Python之Flask 路由与模板语法
- 镜像翻转_98年“后浪”科学家,首次挑战图片翻转不变性假设,一作拿下CVPR最佳论文提名...