最近较流行的效果 Android自定义View实现倾斜列表/图片
程序员文章站
2024-03-04 10:15:59
先看看效果图:
实现思路:擦除图片相应的角,然后层叠图片,产生倾斜效果
代码实现:
1、定义属性
在values文件夹下的attrs文件添加以下代码...
先看看效果图:
实现思路:擦除图片相应的角,然后层叠图片,产生倾斜效果
代码实现:
1、定义属性
在values文件夹下的attrs文件添加以下代码
<resources> <declare-styleable name="tiltview"> <attr name="type" format="integer" /> </declare-styleable> </resources>
2、自定义布局
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(); } //重测大小 @override protected 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; } @override protected void ondraw(canvas canvas) { initpaint(); bitmap mbitmap = bitmap.createbitmap(imagewidth, imageheight, bitmap.config.argb_8888); //初始化bitmap canvas mcanvas = new canvas(mbitmap);//创建画布,并绘制mbitmap bitmap mbackbitmap = ((bitmapdrawable) getdrawable()).getbitmap(); mcanvas.drawbitmap(resizebitmap(mbackbitmap), 0, 0, null);//绘制bitmap settriangle(); 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); } }
3、布局代码调用
//其中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.tiltview android:layout_width="match_parent" android: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" android:src="@drawable/sample_1" app:type="2" /> <com.pengkv.may.widget.tiltview android:layout_width="match_parent" android:layout_height="100dp" android:layout_margintop="-15dp" android:src="@drawable/sample_2" app:type="4" /> </linearlayout>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。