zl程序教程

您现在的位置是:首页 >  移动开发

当前栏目

Android开发 两种ImageView 圆角化的方法与效果对比

Android方法开发 效果 对比 两种 ImageView
2023-09-11 14:15:13 时间

程序效果如下:

原图:

5dp圆角化及增加边框5dp阴影效果: 

 

第一种方法 :直接在需要圆角化的ImageView外部嵌套一层CardView控件即可

代码如下:(注:网上您能搜索到的都是<android.support.v7.widget.CardView> 实际上这个已经过时了,替代的方案就是下面的Androidx )

使用新的CardView依赖关系androidx.cardview:cardview:1.0.0。在xml中使用<androidx.cardview.widget.CardView/>而不是<android.support.v7.widget.CardView/>

    <androidx.cardview.widget.CardView
            android:id="@+id/imgCard"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardCornerRadius="5dp"
            app:cardElevation="5dp"
            android:layout_gravity="center"
            android:layout_marginTop="20dp" >

        <ImageView
                android:src="@drawable/userface1"
                android:id="@+id/imageView"
                android:layout_width="100dp"
                android:layout_height="100dp"/>
    </androidx.cardview.widget.CardView>

主要用到的是3个属性:

​​app:cardElevation="5dp"  阴影的大小​​
app:cardCornerRadius="5dp"  卡片的圆角大小
​​app:contentPadding="5dp" 卡片内容于边距的间隔​​ 通常都是3-5dp左右

第二种方法:ImageView控件自绘,重载onDraw方法实现自己的RoundImageView即可

代码如下:

package com.example.UserCenter;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * @author wh445306
 * @version 1.0
 * @Description RoundImageView
 * @Date 2023-03-12 0:51
 */


@SuppressLint("AppCompatCustomView")
public class RoundImageView extends ImageView {

    //圆角弧度
    float radius = 20.0f;//20.0f;// 画出圆角效果,圆角(180度为正圆)

    public RoundImageView(Context context) {
        super(context);
    }

    public RoundImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        int w = this.getWidth();
        int h = this.getHeight();

        //绘制圆角imageview
        path.addRoundRect(new RectF(0,0,w,h),radius, radius, Path.Direction.CW);
        canvas.clipPath(path);
        super.onDraw(canvas);
    }
}

说明:

两种方法都可以完美实现图片圆角化,第二种重载控件自绘的方法也是不错的。灵活性更高。可以实现特殊复杂的要求,比如只某一个角或两个角圆角化。其它不变。