首页 / 移动开发 / Android / 最近较流行的效果 Android自定义View实现倾斜列表/图片

实现思路：擦除图片相应的角，然后层叠图片，产生倾斜效果
代码实现：
1、定义属性
在values文件夹下的attrs文件添加以下代码

<resources><declare-styleable name="TiltView"><attr name="type" format="integer" /></declare-styleable></resources>

public class TiltView extends ImageView {private int imageWidth;//图片宽度private int imageHeight;//图片高度private double angle = 10 * Math.PI / 180;//三角形角度private int triangleHeight;//三角形高度private Paint paint;//画笔private Path path;//绘制路径private int type;//倾斜图片的类型public TiltView（Context context） {this（context, null）;}public TiltView（Context context, AttributeSet attrs） {this（context, attrs, 0）;}public TiltView（Context 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（）;}//重测大小@Overrideprotected void onMeasure（int widthMeasureSpec, int heightMeasureSpec） {super.onMeasure（widthMeasureSpec, heightMeasureSpec）;imageWidth = measureSpec（widthMeasureSpec）;imageHeight = measureSpec（heightMeasureSpec）;setMeasuredDimension（imageWidth, imageHeight）; //设置View的大小triangleHeight = （int） （Math.abs（Math.tan（angle） * imageHeight））;}//测量长度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;}@Overrideprotected void onDraw（Canvas canvas） {initPaint（）;Bitmap mBitmap = Bitmap.createBitmap（imageWidth, imageHeight, Bitmap.Config.ARGB_8888）; //初始化BitmapCanvas mCanvas = new Canvas（mBitmap）;//创建画布，并绘制mBitmapBitmap mBackBitmap = （（BitmapDrawable） getDrawable（））.getBitmap（）;mCanvas.drawBitmap（resizeBitmap（mBackBitmap）, 0, 0, null）;//绘制BitmapsetTriangle（）;paint.setXfermode（new PorterDuffXfermode（PorterDuff.Mode.DST_OUT））;mCanvas.drawPath（path, paint）;canvas.drawBitmap（mBitmap, 0, 0, null）;}//初始化画笔private void initPaint（） {paint = new Paint（）;paint.setDither（true）;//设定是否使用图像抖动处理，会使绘制出来的图片颜色更加平滑和饱满，图像更加清晰paint.setAntiAlias（true）;//设置抗锯齿paint.setStrokeWidth（5）;paint.setStyle（Paint.Style.FILL）;paint.setStrokeCap（Paint.Cap.ROUND）;paint.setStrokeJoin（Paint.Join.ROUND）;//圆角}//设置三角形区域private void setTriangle（） {path = new Path（）;switch （type） {case 1://右下角path.moveTo（0, imageHeight）;path.lineTo（imageWidth, imageHeight）;path.lineTo（imageWidth, imageHeight - triangleHeight）;path.lineTo（0, imageHeight）;break;case 2://左上角+左下角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://右上角+右下角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://右上角path.moveTo（0, 0）;path.lineTo（imageWidth, 0）;path.lineTo（imageWidth, triangleHeight）;path.lineTo（0, 0）;break;case 5://左上角path.moveTo（0, 0）;path.lineTo（imageWidth, 0）;path.lineTo（0, triangleHeight）;path.lineTo（0, 0）;break;}}//重新调节图片大小private Bitmap resizeBitmap（Bitmap bitmap） {int width = bitmap.getWidth（）;int height = bitmap.getHeight（）;// 设置想要的大小int newWidth = imageWidth;int newHeight = imageHeight;// 计算缩放比例float scaleWidth = （（float） newWidth） / width;float scaleHeight = （（float） newHeight） / height;// 取得想要缩放的matrix参数Matrix matrix = new Matrix（）;matrix.postScale（scaleWidth, scaleHeight）;// 得到新的图片return Bitmap.createBitmap（bitmap, 0, 0, width, height, matrix, true）;}}

//其中android:layout_marginTop="-15dp"对效果实现有很大的作用<?xml version="1.0" encoding="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.TiltViewandroid:layout_width="match_parent"android:layout_height="100dp"android:src="@drawable/sample_0"app:type="1" /><com.pengkv.may.widget.TiltViewandroid:layout_width="match_parent"android:layout_height="100dp"android:layout_marginTop="-15dp"android:src="@drawable/sample_1"app:type="2" /><com.pengkv.may.widget.TiltViewandroid:layout_width="match_parent"android:layout_height="100dp"android:layout_marginTop="-15dp"android:src="@drawable/sample_2"app:type="4" /></LinearLayout>