Drawable案例
Drawable案例
案例
渐变案例
上下渐变，无边框，无圆角
1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:shape="rectangle"
android:useLevel="false"
tools:ignore="ResourceName">
<gradient
android:angle="270"
android:endColor="#FFFFFF"
android:startColor="#FFECE4" />
</shape>
- angle 角度，默认从 start 到 end，逆时针
带 border 的 shape layer-list
- 底部 bottom border
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
//整个空间的背景颜色
<solid android:color="#FFE5E5E5" />
</shape>
</item>
<item android:bottom="20dp"> // 这里有四个方向可以选择，这里因为只要显示底部边框，所以就设置bottom
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#FFFFFF"
android:startColor="#FFECE4" />
</shape>
</item>
</layer-list>
- 第一层是灰色
- 第二层是渐变，bottom 间距是 20 dp，也就漏出来了第一层灰色
- Bottom/top border
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape><!--边框的颜色-->
<!--<solid android:color="@color/gray" />-->
<solid android:color="#ff9696" />
</shape>
</item>
<item
android:bottom="10dp"
android:top="10dp"><!--这里有四个方向可以选择，这里因为只要显示底部边框，所以就设置bottom-->
<shape>
<solid android:color="@color/white" />
<!--整个空间的背景颜色-->
</shape>
</item>
</layer-list>
- 第一层是 border 的颜色
- 第二层是真正的内容颜色
渐变背景，中间颜色渐变
案例 1：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:shape="rectangle"
android:useLevel="false"
tools:ignore="ResourceName">
<gradient android:angle="315"
android:centerColor="#000000"
android:centerX="0.7"
android:centerY="0.7"
android:endColor="#FF0000"
android:startColor="#00FF00" />
</shape>
中心点在 70% 的位置
案例 2：
- UI 设计稿
- 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:shape="rectangle"
android:useLevel="false"
tools:ignore="ResourceName">
<gradient
android:angle="315"
android:centerColor="#FFAC71"
android:centerX="0.7"
android:centerY="0.7"
android:startColor="#EE3098" />
</shape>
- 效果
一个圆角并带有其他效果的 Drawable 为例，展示 GradientDrawable 的简单用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--圆角半径-->
<corners
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"/>
<!--内边距-->
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<!--渐变效果-->
<gradient android:angle="45"
android:type="linear"
android:startColor="#ff0000"
android:centerColor="#00ff00"
android:endColor="#0000ff" />
<!--预设大小-->
<size
android:width="200dp"
android:height="100dp" />
<!--边框样式-->
<stroke
android:width="2dp"
android:color="#000000"
android:dashWidth="7dp"
android:dashGap="3dp" />
</shape>
点击态 shape
1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:ignore="ResourceName">
<item android:drawable="@drawable/room_gift_panel_send_btn_shape" android:state_pressed="false" />
<item android:drawable="@drawable/room_gift_panel_send_btn_shape_pressed" android:state_pressed="true" />
</selector>
1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomRightRadius="@dimen/qb_px_16"
android:topRightRadius="@dimen/qb_px_16" />
<gradient
android:endColor="#04ACFF"
android:startColor="#00EDFF" />
</shape>
1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomRightRadius="@dimen/qb_px_16"
android:topRightRadius="@dimen/qb_px_16" />
<gradient
android:endColor="#00BECC"
android:startColor="#038ACC" />
</shape>
渐变 xml
线性渐变的 xml
1
2
3
4
5
<gradient
android:centerColor="#00ff00"
android:endColor="#0000ff"
android:startColor="#ff0000"
android:type="linear"/>
放射性渐变 xml
1
2
3
4
5
6
<gradient
android:centerColor="#00ff00"
android:endColor="#0000ff"
android:gradientRadius="100"
android:startColor="#ff0000"
android:type="radial"/>
扫描式渐变 xml
1
2
3
4
5
<gradient
android:centerColor="#00ff00"
android:endColor="#0000ff"
android:startColor="#ff0000"
android:type="sweep"/>
渐变 Java
线性渐变 Java
1
2
3
4
5
6
7
int[] colors = new int[]{Color.parseColor("#FF0000"), Color.parseColor("#00FF00"),
Color.parseColor("#0000FF")};
GradientDrawable linearDrawable = new GradientDrawable();
linearDrawable.setOrientation(GradientDrawable.Orientation.LEFT_RIGHT);
linearDrawable.setColors(colors);
linearDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
mGradient1.setBackground(linearDrawable);
放射性渐变 Java
1
2
3
4
5
6
GradientDrawable radialDrawable = new GradientDrawable();
radialDrawable.setColors(colors);
radialDrawable.setShape(GradientDrawable.OVAL);
radialDrawable.setGradientRadius(10f);
radialDrawable.setGradientType(GradientDrawable.RADIAL_GRADIENT);
mGradient2.setBackground(radialDrawable);
扫描式渐变 Java
1
2
3
4
GradientDrawable sweepDrawable = new GradientDrawable();
sweepDrawable.setColors(colors);
sweepDrawable.setGradientType(GradientDrawable.SWEEP_GRADIENT);
mGradient3.setBackground(sweepDrawable);
聊天室小礼物背景
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:shape="rectangle"
android:useLevel="false"
tools:ignore="ResourceName">
<gradient
android:centerColor="#F200C7E5"
android:endColor="#0000D0E0"
android:startColor="#FF0095FF" />
<corners
android:bottomLeftRadius="@dimen/qb_px_100"
android:topLeftRadius="@dimen/qb_px_100" />
</shape>
后端配置渐变
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
private fun startColor(): Int {
try {
return Color.parseColor(startColor)
} catch (e: Exception) {
LogUtils.printStackTrace(e)
}
return Color.parseColor("#00FFEA")
}
private fun endColor(): Int {
try {
return Color.parseColor(endColor)
} catch (e: Exception) {
LogUtils.printStackTrace(e)
}
return Color.parseColor("#00DE90")
}
private fun colors(): IntArray {
return intArrayOf(startColor(), endColor())
}
fun getGradientDrawable(): GradientDrawable {
return GradientDrawable().apply {
gradientType = GradientDrawable.LINEAR_GRADIENT
orientation = GradientDrawable.Orientation.TOP_BOTTOM
cornerRadius = ResUtils.getDimen(R.dimen.dp_10).toFloat()
colors = colors()
}
}
渐变边框
需求： 边框颜色是渐变的，边框内不渐变
1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="@color/colorStart"
android:angle="-45"
android:endColor="@color/colorEnd"/>
<size
android:width="@dimen/color_size"
android:height="@dimen/color_size"/>
<corners
android:radius="@dimen/radius"/>
</shape>
这种实现内部也都是填充方式的，如果只绘制边框呢？
解决： 通过 layer-list，第一层是渐变背景，第二层是内部填充颜色并偏移 2dp，实现一个效果是 2 dp 的渐变边框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="4dp"/>
<gradient
android:type="linear"
android:startColor="#ff28efa2"
android:endColor="#ff0006"
android:angle="0" />
</shape>
</item>
<item android:left="2dp"
android:right="2dp"
android:top="2dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<corners android:radius="4dp"/>
<solid android:color="#ffffff"/>
<padding android:top="12dp"
android:bottom="12dp"/>
</shape>
</item>
</layer-list>
观察发现中间是白色，如果想让中间是透明色该怎么实现呢，暂时还没有找到可以通过 xml 实现的方式。
但是可以通过代码的方式实现，使用的类是 ShapeDrawable 类，工具方法如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public static ShapeDrawable createDrawable(int[] colors, float radius, float strokeWidth) {
float[] outerR = {radius, radius, radius, radius, radius, radius, radius, radius};
// 内部矩形与外部矩形的距离
RectF inset = new RectF(strokeWidth, strokeWidth, strokeWidth, strokeWidth);
// 内部矩形弧度
float innerRadius = radius - strokeWidth;
float[] innerRadii = {innerRadius, innerRadius, innerRadius, innerRadius, innerRadius, innerRadius, innerRadius, innerRadius};
RoundRectShape rr = new RoundRectShape(outerR, inset, innerRadii);
ShapeDrawable.ShaderFactory shaderFactory = new ShapeDrawable.ShaderFactory() {
@Override
public Shader resize(int width, int height) {
return new LinearGradient(0f, 0f, width, height, colors, null, Shader.TileMode.CLAMP);
}
};
ShapeDrawable shapeDrawable = new ShapeDrawable(rr);
shapeDrawable.setShaderFactory(shaderFactory);
return shapeDrawable;
}
本文由作者按照 CC BY 4.0 进行授权