Android圆角布局，你有几种实现方式？

前言

在Android中有时候需要用到圆角布局，或者圆角头像，实现办法有很多，但是各种办法有坑没坑那就是另一说了，今天就说三种办法，CardView、Shape、自定义View。

CardView

首先说第一种CardView，这是官方提供的一个控件，使用他需要引入，具体什么时候发布的就不知道了。

使用CardView非常简单，只需要给他配置app:cardCornerRadius圆角大小就行。

   implementation 'androidx.cardview:cardview:1.0.0'

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:cardCornerRadius="50dp"
        app:cardElevation="0dp"
        app:cardUseCompatPadding="false">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/test"></ImageView>
    </androidx.cardview.widget.CardView>

</LinearLayout>

但是这个是有坑的，具体在那个版本忘了，顺便也把什么坑也忘了，当时因为好久解决不了，最终放弃这个控件。

Shape

新建一个Shape，指定圆角大小和填充颜色。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="100dp">

    </corners>
    <solid android:color="#ff0000"></solid>
</shape>

在需要的布局上指定这个Shape。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#000000"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:cardCornerRadius="50dp"
        app:cardElevation="0dp"
        app:cardUseCompatPadding="false">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/test"></ImageView>
    </androidx.cardview.widget.CardView>

    <RelativeLayout
        android:background="@drawable/round_shape"
        android:layout_width="100dp"
        android:layout_height="100dp">
    </RelativeLayout>
</LinearLayout>

怎么样，简单把，但是！！！ 不能使用这种办法做圆角布局，原因是他不裁剪布局，会导致内部控件出来，这肯定不是我们想要的。

自定义圆角布局

这种方式需要对Android绘制流程熟悉，并且还要对每个版本相关的API差异熟悉，否则坑会连续的踩。

package com.example.androiddemo;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.widget.RelativeLayout;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class RoundRelativeLayout extends RelativeLayout {
    private Path mPath;
    private Paint mPaint;
    private RectF mRectF;
    private float mRadius = 200;

    public RoundRelativeLayout(@NonNull Context context) {
        this(context, null);
    }

    public RoundRelativeLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundRelativeLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPath = new Path();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mRectF = new RectF();
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mRectF.set(0, 0, w, h);
    }

    @SuppressLint("MissingSuperCall")
    @Override
    public void draw(Canvas canvas) {
        canvas.save();
        canvas.clipPath(genPath());
        super.draw(canvas);
        canvas.restore();
    }

    private Path genPath() {
        mPath.reset();
        mPath.addRoundRect(mRectF, mRadius, mRadius, Path.Direction.CW);
        return mPath;
    }
}

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#000000"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:cardCornerRadius="50dp"
        app:cardElevation="0dp"
        app:cardUseCompatPadding="false">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/test"></ImageView>
    </androidx.cardview.widget.CardView>

    <RelativeLayout
        android:background="@drawable/round_shape"
        android:layout_width="100dp"
        android:layout_height="100dp">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/test"></ImageView>
    </RelativeLayout>

    <com.example.androiddemo.RoundRelativeLayout
        android:background="#00FF0000"
        android:layout_width="100dp"
        android:layout_height="100dp">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/test"></ImageView>
    </com.example.androiddemo.RoundRelativeLayout>
</LinearLayout>