最近较流行的效果 Android自定义View实现倾斜列表/图片
作者:pengkv 时间:2021-09-06 03:56:51
先看看效果图:
实现思路:擦除图片相应的角,然后层叠图片,产生倾斜效果
代码实现:
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>
标签:Android,View,倾斜,图片
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
c# chart缩放,局部放大问题
2021-09-26 20:46:40
![](https://img.aspxhome.com/file/2023/7/116527_0s.png)
c# 图片加密解密的实例代码
2023-08-20 21:21:01
Spring Cloud Hystrix 服务降级限流策略详解
2022-05-02 15:20:27
![](https://img.aspxhome.com/file/2023/4/67104_0s.png)
Android编程获取GPS数据的方法详解
2023-09-20 16:37:34
![](https://img.aspxhome.com/file/2023/1/88721_0s.jpg)
C语言中传值与传指针的介绍与区别
2023-08-01 15:26:51
![](https://img.aspxhome.com/file/2023/6/120806_0s.png)
hutool实战:IoUtil 流操作工具类(将内容写到流中)
2022-11-16 09:17:47
![](https://img.aspxhome.com/file/2023/6/83086_0s.png)
Android实现简单的banner轮播图
2021-10-25 01:11:28
![](https://img.aspxhome.com/file/2023/4/117174_0s.jpg)
Kotlin语言编程Regex正则表达式实例详解
2023-06-22 02:06:29
C语言字符串大小比较
2022-06-02 14:15:17
微信第三方登录Android实现代码
2023-07-27 08:05:49
![](https://img.aspxhome.com/file/2023/6/85986_0s.png)
关于java数组与字符串相互转换的问题
2021-08-08 18:50:31
Android自定义相机Camera实现手动对焦的方法示例
2022-08-23 14:45:11
![](https://img.aspxhome.com/file/2023/8/116008_0s.png)
js 交互在Flutter 中使用 webview_flutter
2023-07-20 22:40:14
![](https://img.aspxhome.com/file/2023/5/91785_0s.jpg)
详谈java 堆区、方法区和栈区
2023-11-23 18:35:22
C#事件标准命名规则及说明(包括用作事件类型的委托命名)
2022-02-27 06:57:43
JAVA中 redisTemplate 和 jedis的配合使用操作
2022-05-01 23:38:46
![](https://img.aspxhome.com/file/2023/2/78912_0s.jpg)
SpringBoot Admin用法实例讲解
2021-07-26 17:57:58
![](https://img.aspxhome.com/file/2023/9/101809_0s.png)
深入Java Final
2022-06-22 09:38:14
SpringBoot通过@Value实现给静态变量注入值详解
2022-04-30 14:30:37
ToLua框架下C#与Lua代码的互调操作
2023-12-07 06:27:48
![](https://img.aspxhome.com/file/2023/7/67567_0s.jpg)