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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.