根据前面写的几片透明形状的view的总结,实现了遮罩层各种形状的透明的view,以及各种形状的imageview
先上图:
正常view | 带边框的view |
---|---|
如上图所示:途中左右两列为不同的两个控件,左侧的是ShapeShadeImageView
,右侧的是ShapeImageView
。
view | 优势 | 劣势 |
---|---|---|
ShapeShadeImageView | 能在xml中直接能显示成需要显示的形状 | 其实大小并没有变化,是上面遮盖了一层,如果底部的背景色是渐变的话,能看出周边的轮廓 |
ShapeImageView | 能直接裁剪成想要的图形大小,没有多余的部分 | 不能在xml中直接能显示成需要显示的形状 |
如下图所示:
当然,如果背景色统一的话,是可以设置成一致的,渐变的背景的话就能看出来了。
属性说明
<declare-styleable name="ShapeImageView">
<attr name="borderWidth" format="dimension"/>//边框线的宽度
<attr name="borderColor" format="color"/>//边框线的颜色
<attr name="borderLine" format="enum">//边框线的属性,是虚线还是实线,默认实线
<enum name="full" value="0"/>//实线
<enum name="dotted" value="1"/>//虚线
</attr>
<attr name="borderDotted" format="dimension"/>//borderLine为dotted时,设置线条的长度
<attr name="borderBlack" format="dimension"/>//borderLine为dotted时,设置线条间空格的长度
<attr name="frameColor" format="color"/>//这个主要是ShapeShadeImageView边上的颜色,以便能与背景融合
<attr name="shapeView" format="enum">//你想要的图形
<enum name="circle" value="0"/>//圆
<enum name="round" value="1"/>//圆角矩形
<enum name="oval" value="2"/>//椭圆
<enum name="rightAngleCircle" value="3"/>//这就是上面图片中尖角图形
</attr>
<attr name="shapeRadius" format="dimension"/>//圆形时,圆的半径,这个也可不设置,通过直接设置宽高,会自动计算,去掉margin和padding等长度
<attr name="shapeHeight" format="dimension"/>//ShapeShadeView在round时设置圆角矩形的高度
<attr name="rightAngleLocation">//图形为rightAngleCircle时的尖角位置,可以组合使用,以‘|’隔开,如leftTop|leftBottom|rightTop
<flag name="leftTop" value="0x03"/>
<flag name="leftBottom" value="0x30"/>
<flag name="rightTop" value="0x05"/>
<flag name="rightBottom" value="0x50"/>
</attr>
<attr name="cornersX" format="dimension"/>//图形为圆角矩形时,设置的圆角
<attr name="cornersY" format="dimension"/>//图形为圆角矩形时,设置的圆角
</declare-styleable>
使用
使用起来也很简单:
椭圆:
<com.tqp.transparentView.ShapeShadeImageView
android:id="@+id/shapeView3"
android:layout_width="100dp"
android:layout_height="150dp"
android:src="@mipmap/ic_launcher"
android:scaleType="centerCrop"
app:shapeView="oval" />
带尖角的图形
<com.tqp.transparentView.ShapeImageView
android:id="@+id/shapeImageView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@mipmap/ic_launcher"
android:scaleType="centerCrop"
app:borderWidth="4dp"
app:borderColor="@color/bright_red"
app:shapeView="rightAngleCircle"
app:rightAngleLocation="leftBottom|rightTop" />
带虚线边框的圆形图片
<com.tqp.transparentView.ShapeShadeImageView
android:id="@+id/shapeView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@mipmap/ic_launcher"
android:scaleType="centerCrop"
app:borderWidth="4dp"
app:borderColor="@color/bright_red"
android:layout_marginTop="10dp"
app:shapeView="rightAngleCircle"
app:rightAngleLocation="rightBottom|leftTop" />
上面的自定义view支持Android api14和api14以上。
引入库的方法
第一步,在项目所在的build.gradle中加入maven { url 'https://jitpack.io'}
allprojects {
repositories {
...
maven { url 'https://jitpack.io'}
}
}
第二步,在app所在的build.gradle下的dependencies中依赖implementation 'com.github.tangqipeng:shapeTransparentView:1.4'
就好。
这样就可以使用了
附加
shapeTransparentView
中还有一个遮罩的view是ShapeShadeView
,也支持上面的所有属性设置。