First look at the effect chart:
realization Idea: erase the corresponding angle of the picture, then cascade the picture, produce tilt effect
Code implementation:
1. Define Attributes
Add the following code to the Attrs file under the Values folder
<resources>
<declare-styleable name= "Tiltview" >
<attr name= "type" format= "integer"/>
</declare-styleable>
</resources>
2, Custom layout
public class Tiltview extends ImageView {private int imagewidth;//picture width private int imageheight;//picture height private Dou ble angle = ten * math.pi/180;//triangle angle private int triangleheight;//triangle height private Paint paint;//Brush Private path Path
;//draw path private int type;//skew picture type public tiltview (context, NULL);
Public Tiltview (context, AttributeSet attrs) {This (context, attrs, 0);
Public Tiltview (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);
TypedArray array = context.obtainstyledattributes (Attrs, R.styleable.tiltview);
Type = Array.getinteger (R.styleable.tiltview_type, 1);
Array.recycle (); }//re-measured size @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onmeasure (wid
Thmeasurespec, Heightmeasurespec);
ImageWidth = Measurespec (Widthmeasurespec);
ImageHeight = Measurespec (Heightmeasurespec); SetmeasureddimensioN (imagewidth, imageheight);
Sets the size of the view triangleheight = (int) (Math.Abs (Math.tan (angle) * imageheight));
}//measuring length private int measurespec (int measurespec) {int minlength = 200;
int mode = Measurespec.getmode (MEASURESPEC);
int length = Measurespec.getsize (MEASURESPEC);
if (mode = = measurespec.at_most) {length = math.min (length, minlength);
return length;
} @Override protected void OnDraw (Canvas Canvas) {initpaint (); Bitmap Mbitmap = Bitmap.createbitmap (ImageWidth, ImageHeight, Bitmap.Config.ARGB_8888); Initialize Bitmap Canvas Mcanvas = new Canvas (MBITMAP);//create canvas and draw mbitmap Bitmap = (mbackbitmap) bitmapdrawable
BLE ()). Getbitmap ();
Mcanvas.drawbitmap (Resizebitmap (Mbackbitmap), 0, 0, NULL);//Draw bitmap settriangle ();
Paint.setxfermode (New Porterduffxfermode (PorterDuff.Mode.DST_OUT));
Mcanvas.drawpath (path, paint);
Canvas.drawbitmap (mbitmap, 0, 0, NULL); }//Initialize brush private void Initpaint (){paint = new paint ();
Paint.setdither (TRUE)//setting whether to use image jitter processing will make the picture color more smooth and full, the image clearer Paint.setantialias (true);/Set anti-aliasing
Paint.setstrokewidth (5);
Paint.setstyle (Paint.Style.FILL);
Paint.setstrokecap (Paint.Cap.ROUND);
Paint.setstrokejoin (Paint.Join.ROUND);//Round Corner}//Set Triangle area private void Settriangle () {path = new path ();
Switch (type) {case 1://lower right corner path.moveto (0, ImageHeight);
Path.lineto (ImageWidth, imageheight);
Path.lineto (ImageWidth, imageheight-triangleheight);
Path.lineto (0, ImageHeight);
Break
Case 2://Upper left corner + lower left corner path.moveto (0, triangleheight);
Path.lineto (imagewidth, 0);
Path.lineto (0, 0);
Path.lineto (0, ImageHeight);
Path.lineto (ImageWidth, imageheight);
Path.lineto (0, imageheight-triangleheight);
Break
Case 3://Upper right corner + lower right corner Path.moveto (ImageWidth, triangleheight);
Path.lineto (0, 0); Path.lineto (ImagewidTh, 0);
Path.lineto (ImageWidth, imageheight);
Path.lineto (0, ImageHeight);
Path.lineto (ImageWidth, imageheight-triangleheight);
Break
Case 4://Upper right corner path.moveto (0, 0);
Path.lineto (imagewidth, 0);
Path.lineto (ImageWidth, triangleheight);
Path.lineto (0, 0);
Break
Case 5://Upper left corner path.moveto (0, 0);
Path.lineto (imagewidth, 0);
Path.lineto (0, triangleheight);
Path.lineto (0, 0);
Break
}//Resize picture private Bitmap resizebitmap (Bitmap Bitmap) {int width = bitmap.getwidth ();
int height = bitmap.getheight ();
Set the desired size int newwidth = ImageWidth;
int newheight = ImageHeight;
Calculates the zoom ratio float ScaleWidth = ((float) newwidth)/width;
float ScaleHeight = ((float) newheight)/height;
Gets the Matrix matrix = new Matrix () that you want to scale.
Matrix.postscale (ScaleWidth, ScaleHeight); Get a new picture return Bitmap.createbitmap (bitmAP, 0, 0, width, height, matrix, true);
}
}
3, layout code calls
and android:layout_margintop= " -15DP" has a great effect on the effect <?xml version= "1.0" Utf-8 "?> <linearlayout xmlns:android=" http://schemas.android.com/apk/res/android "xmlns:app=" http://
Schemas.android.com/apk/res-auto "android:layout_width=" match_parent "android:layout_height=" Match_parent " android:orientation= "vertical" > <com.pengkv.may.widget.tiltview android:layout_width= "match_parent" Andro
id:layout_height= "100DP" android:src= "@drawable/sample_0" app:type= "1"/> <com.pengkv.may.widget.tiltview Android:layout_width= "Match_parent" android:layout_height= "100DP" android:layout_margintop= " -15DP" Androi d:src= "@drawable/sample_1" app:type= "2"/> <com.pengkv.may.widget.tiltview android:layout_width= "Match_pa Rent "android:layout_height=" 100DP "android:layout_margintop=" -15DP "android:src=" @drawable/sample_2 "app: Type= "4"/> </LinearLayout>
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.