Android 斜切图片

前言

按设计的要求，首页的布局中需要实现图片的斜切进行布局，之前有写过一篇文章juejin.cn/post/733203... ，这已经算是不规则图形中相对复杂的做法了，如果学会了这种方法，任何的切图对我来说那岂不是手到擒来。

最终效果

可以先看看最终的一个效果（项目肯定是没法展示出来，写个Demo）

实现过程

如果没看过 juejin.cn/post/733203... 的话，可以建议先简单看看，了解一下大概的裁切思路，这篇文章讲得很清楚，这里就不重复了。如果觉得复杂不完全看得懂没关系，主要是要了解裁切的思路，这个是最重要的。

简单来说，就是使用ShapeableImageView来实现，而裁切的原理就就是像我们剪纸一样，shapePath路径就相当于剪刀走过的路径，我们把要裁切的部分给根据路径剪掉

从图中看，左边的图就是要剪掉右下角的部分，右边的图就是要剪掉左上角的部分。那就比之前的圆五边形好剪多了，直接拿代码来看看。

kotlin 复制代码

class BevelCutImageHelper {  

    fun cut(type: Int, view : ShapeableImageView){  
        val shapePathModel = ShapeAppearanceModel  
            .Builder()  
            .setTopEdge(object : EdgeTreatment() {  

                override fun getEdgePath(  
                    length: Float,  
                    center: Float,  
                    interpolation: Float,  
                    shapePath: ShapePath  
                    ) {  
                        if (type == 0) {  
                            shapePath.lineTo((length/4), 0f)  
                            shapePath.lineTo(0f, length)  
                            shapePath.lineTo(0f, 0f)  
                            shapePath.lineTo(length, 0f)  
                        }else {  
                            shapePath.lineTo(length, 0f)  
                            shapePath.lineTo((length/4 * 3), length)  
                            shapePath.lineTo(length, length)  
                            shapePath.lineTo(length, 0f)  
                        }  
                    }  

                })  

            view?.let {  
                it.shapeAppearanceModel = shapePathModel.build()  
            }  
    }  

}

看到这里的type只有两种类型，正常的是可以有4种，切掉左上、左下、右上、右下，我这里因为是Demo，就简单写了左上和右下，type为0就是剪左上，否则就是右下。

再方便好理解一点，我再画一张图

对左边的撒是给裁切划分4步

就按照这个图的路径去裁切，所以最终得到把右下角裁掉的效果。同理右边的那撸多一样。

这边把剩下的Demo代码贴出来

ini 复制代码

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/iv_left"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginEnd="125dp"
        android:src="@drawable/abc1"
        android:scaleType="fitEnd"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/iv_right"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginStart="125dp"
        android:src="@drawable/abc2"
        android:scaleType="fitStart"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

kotlin 复制代码

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.test_main)
        val iv_left : ShapeableImageView = findViewById(R.id.iv_left)
        val iv_right : ShapeableImageView = findViewById(R.id.iv_right)

        val k = BevelCutImageHelper()
        k.cut(1, iv_left)
        k.cut(0, iv_right)

    }

}

结论就是当你把裁切路径shapePath的这个思路给搞懂后，这类型的需求实现都能手到擒来

UI："手到擒来？来，我给你个带贝塞尔曲线的"