ContourView 轮廓背景控件
新控件发布,欢迎大家 Star
在闲逛一个图片社区时看到这张图片,个人对炫酷的东西比较敏感(视觉肤浅),本来想下载一下这个 App 看一下实际效果,可是没找到。心有不甘,于是分析了一下,感觉实现起来不会太难,自己也花点时间实现了效果,发布了一个库。
你在这里能够知道的:
自定义 View 相关内容
通过贝塞尔绘制 path
这里采用的一种贝塞尔计算方法:WiKi:Bézier-求贝塞尔曲线控制点
具体相关
效果图
轮廓样式(contour_style)
效果(这里只是轮廓的样式,默认效果都是白色,这里显示的颜色是自己设置的)
Sand(默认)
Clouds
Beach
Ripples
Shell
属性设置
(xml)属性名称
说明
值类型
contour_style
内置轮廓样式
Beach,Ripples,Clouds,Sand,Shell
smoothness
轮廓弯曲系数(没有必要的情况下,不建议设置)
Float类型 范围:0--1,建议范围:0.15--0.3,默认:0.25
shader_mode
轮廓内颜色的填充方式
RadialGradient,SweepGradient,LinearGradient,不设置默认纯色填充
shader_startcolor
填充起始颜色
color类型,半透明效果,设置类似#90FF0000的值(默认白色,需设置shader_mode 才有效果)
shader_endcolor
填充结束颜色
同上
shader_style
填充起始点及方向的控制
LeftToBottom(左上角到右下角),RightToBottom(右上角到左下角),TopToBottom(上中点到下中点),Center(中点到右下角)
shader_color
填充纯色颜色
color类型,默认白色,不设置shader_mode时,可以通过此属性设置纯色填充颜色
动态属性
以上的(xml)属性都有对应的设置方法。 此外,还有一些可以动态设置的属性。
轮廓锚点坐标集
public void setPoints(List pointsList)
//List<> 表示轮廓的个数,Point[] 表示具体某个轮廓的坐标集,每个轮廓至少4个锚点。
方法参数
说明
setPoints(int... pts)
单个轮廓,int[]{锚点1.x,锚点1.y,锚点2.x,锚点2.y......锚点n.x,锚点y}
setPoints(Point[]... pointsArr)
单个轮廓 android.graphics.Point
setPoints(Point... points)
多个轮廓
setPoints(int[]... ptsArr)
多个轮廓
Shader 自定义轮廓绘制方式
public void setShader(Shader... shader)
//Shader:传入自己自定义RadialGradient,SweepGradient,LinearGradient。
//当传入多个Shader时,给多个轮廓设置不同的绘制方式,Shader[0]填充轮廓1,Shader[1]填充轮廓2...
使用步骤
Step1. 添加依赖
Gradle
dependencies{
compile 'com.ocnyang:contourview:1.0.0'
}
Maven
com.ocnyang
contourview
1.0.0
pom
或者引用本地 lib
implementation project(':contourview')
//或者下面方式
//compile project(':contourview')
Step2. 在布局文件中使用,也可以设置相应的自定义属性
android:layout_width="match_parent"
android:layout_height="400dp"
app:contour_style="Ripples"
app:shader_endcolor="@color/endcolor"
app:shader_mode="RadialGradient"
app:shader_startcolor="@color/startcolor"
app:shader_style="Center"
app:smoothness="0.2"/>
根据自己的需要来设置属性。
Step3. 如果需要自定义自己独特的轮廓,可以在代码中动态设置以下内容
/**
* Customize the coordinates of the anchor to control the area to be drawn。
*/
private void initCustomContourView() {
ContourView contourViewCustom = (ContourView) findViewById(R.id.contourview_custom);
int width = getWidth();//获取屏幕的宽度
int hight = 400;
int[] ints = {width / 2, 0, width, hight / 2, width / 2, hight, 0, hight / 2};
int[] intArr = new int[]{width / 2, hight / 4, width / 4 * 3, hight / 2, width / 2, hight / 4 * 3, width / 4, hight / 2};
contourViewCustom.setPoints(ints, intArr);
contourViewCustom.setShaderStartColor(getResources().getColor(R.color.startcolor));
contourViewCustom.setShaderEndColor(getResources().getColor(R.color.endcolor));
contourViewCustom.setShaderMode(ContourView.SHADER_MODE_RADIAL);
}
/**
* Controls the color of the drawing.
*/
private void initBeachContourView() {
ContourView contourViewBeach = ((ContourView) findViewById(R.id.contourview_beach));
RadialGradient radialGradient = new RadialGradient(0, 0,4000,
getResources().getColor(R.color.startcolor),
getResources().getColor(R.color.endcolor),
Shader.TileMode.CLAMP);
LinearGradient linearGradient = new LinearGradient(0, 0, getWidth(), 400,
Color.argb(30, 255, 255, 255), Color.argb(90, 255, 255, 255),
Shader.TileMode.REPEAT);
contourViewBeach.setShader(radialGradient, linearGradient);
}