According to the summary of several pieces of transparent shape view written in front, the realization of the mask layer of various shapes of transparent view, as well as various shapes of imageView

First above:

Normal view A view with a border

As shown in the image above, the left and right columns of two different controls are ShapeShadeImageView on the left and ShapeImageView on the right.

view advantage disadvantage
ShapeShadeImageView Can be displayed in XML directly into the desired shape In fact, the size does not change, but the top hides a layer, if the background color at the bottom is gradient, you can see the outline of the surrounding
ShapeImageView Can be directly cut to the desired size of the graph, no redundant parts You cannot display the desired shape directly in XML

As shown below:

Of course, if the background color is uniform, it can be set to the same, the gradient of the background will be visible.

Attributes that

<declare-styleable name="ShapeImageView"> <attr name="borderWidth" format="dimension"/> Format ="color"/> <attr name="borderLine" format="enum"> </ / dotted </ / dotted </attr> <attr name="borderDotted" </ / dotted </attr> <attr name="borderBlack" format="dimension"/>// <attr name="frameColor" format="color"/>// This is mainly ShapeShadeImageView edge color, <attr name="shapeView" format="enum"> <enum name="circle" value="0"/> <enum name="rightAngleCircle" value="3"/>/ <attr name="shapeRadius" format="dimension"/> <attr name="shapeHeight" format="dimension"/>//ShapeShadeView sets round rectangle height <attr Name ="rightAngleLocation">// Sharp Angle position when graph is rightAngleCircle, can be combined, separated by |, For example, 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>Copy the code

use

It’s also easy to use:

The ellipse:

<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" />
Copy the code

A figure with sharp corners

<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" />
Copy the code

Round picture with dotted border

<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" />
Copy the code

The custom view above supports Android API14 and above.

Method of introduction into the library

The first step is to add it to build.gradle where the project is locatedmaven { url 'https://jitpack.io'}

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

Second, rely on it in Dependencies under build.gradle of your appImplementation 'com. Making. Tangqipeng: shapeTransparentView: 1.4'It is good.

So it’s ready to use

additional

Another masked view in shapeTransparentView is ShapeShadeView, which also supports all of the above properties.