Recent more popular effects Android custom view implementation Tilt List/Picture _android

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.