根據(jù)前面寫(xiě)的幾片透明形狀的view的總結(jié)，實(shí)現(xiàn)了遮罩層各種形狀的透明的view，以及各種形狀的imageview

先上圖：

不帶邊框.jpg

帶邊框的.png

1.png

如上圖所示：途中左右兩列為不同的兩個(gè)控件，左側(cè)的是ShapeShadeImageView，右側(cè)的是ShapeImageView。

如下圖所示：

4.png

當(dāng)然，如果背景色統(tǒng)一的話(huà)，是可以設(shè)置成一致的，漸變的背景的話(huà)就能看出來(lái)了。

屬性說(shuō)明

<declare-styleable name="ShapeImageView">
        <attr name="borderWidth" format="dimension"/>//邊框線(xiàn)的寬度
        <attr name="borderColor" format="color"/>//邊框線(xiàn)的顏色
        <attr name="borderLine" format="enum">//邊框線(xiàn)的屬性，是虛線(xiàn)還是實(shí)線(xiàn)，默認(rèn)實(shí)線(xiàn)
            <enum name="full" value="0"/>//實(shí)線(xiàn)
            <enum name="dotted" value="1"/>//虛線(xiàn)
        </attr>
        <attr name="borderDotted" format="dimension"/>//borderLine為dotted時(shí)，設(shè)置線(xiàn)條的長(zhǎng)度
        <attr name="borderBlack" format="dimension"/>//borderLine為dotted時(shí)，設(shè)置線(xiàn)條間空格的長(zhǎng)度
        <attr name="frameColor" format="color"/>//這個(gè)主要是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"/>//圓形時(shí)，圓的半徑，這個(gè)也可不設(shè)置，通過(guò)直接設(shè)置寬高，會(huì)自動(dòng)計(jì)算，去掉margin和padding等長(zhǎng)度
        <attr name="shapeHeight" format="dimension"/>//ShapeShadeView在round時(shí)設(shè)置圓角矩形的高度
        <attr name="rightAngleLocation">//圖形為rightAngleCircle時(shí)的尖角位置，可以組合使用，以‘｜’隔開(kāi)，如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"/>//圖形為圓角矩形時(shí)，設(shè)置的圓角
        <attr name="cornersY" format="dimension"/>//圖形為圓角矩形時(shí)，設(shè)置的圓角
    </declare-styleable>

使用

使用起來(lái)也很簡(jiǎn)單：

橢圓：

<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" />

帶虛線(xiàn)邊框的圓形圖片

<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以上。

引入庫(kù)的方法

第一步，在項(xiàng)目所在的build.gradle中加入maven { url 'https://jitpack.io'}

allprojects {
    repositories {
       ...
        maven { url 'https://jitpack.io'}
    }
}

第二步，在app所在的build.gradle下的dependencies中依賴(lài)implementation 'com.github.tangqipeng:shapeTransparentView:1.4'就好。

這樣就可以使用了

附加

shapeTransparentView中還有一個(gè)遮罩的view是ShapeShadeView，也支持上面的所有屬性設(shè)置。