前言
在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>