fresco 设置图片的圆角

本文介绍了Fresco库如何轻松支持图片显示为圆角,详细讲解了XML和代码中设置圆角的方法,包括Drawee的圆角配置、不同呈现方式以及限制条件。特别指出,只有BitmapDrawable和ColorDrawable能实现圆角,其他如NinePatchDrawable不受支持,并讨论了内存和性能方面的考量。
部署运行你感兴趣的模型镜像


<com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/tv_retail_item_pic"
            android:layout_width="@dimen/x_px230"
            android:layout_height="@dimen/y_px230"
            fresco:roundedCornerRadius="@dimen/x_px8"
            fresco:roundBottomLeft="false"
            fresco:roundBottomRight="false"
            android:scaleType="fitCenter"
            android:layout_gravity="center_horizontal"
            fresco:placeholderImage="@mipmap/image_loading"
            />


参考:

Drawee 轻松支持圆角显示,并且显示圆角时,并不复制和修改Bitmap对象,那样太耗费内存。

圆角

圆角实际有2中呈现方式:

  1. 圆圈 - 设置roundAsCircle为true
  2. 圆角 - 设置roundedCornerRadius

设置圆角时,支持4个角不同的半径。XML中无法配置,但可在Java代码中配置。

设置圆角

可使用以下两种方式:

  1. 默认使用一个shader绘制圆角,但是仅仅占位图所要显示的图有圆角效果。失败示意图和重下载示意图无圆角效果。
  2. 叠加一个solid color来绘制圆角。但是背景需要固定成指定的颜色。 在XML中指定 roundWithOverlayColor, 或者通过调用setOverlayColor来完成此设定。

XML中配置

SimpleDraweeView 支持如下几种圆角配置:

xml
<com.facebook.drawee.view.SimpleDraweeView
   ...
   fresco:roundedCornerRadius="5dp"
   fresco:roundBottomLeft="false"
   fresco:roundBottomRight="false"
   fresco:roundWithOverlayColor="@color/blue"
   fresco:roundingBorderWidth="1dp"
   fresco:roundingBorderColor="@color/red"

代码中配置

在创建 DraweeHierarchy 时,可以给GenericDraweeHierarchyBuilder指定一个RoundingParams 用来绘制圆角效果。

RoundingParams roundingParams = RoundingParams.fromCornersRadius(7f);
roundingParams.setOverlayColor(R.color.green);
// 或用 fromCornersRadii 以及 asCircle 方法
genericDraweeHierarchyBuilder
    .setRoundingParams(roundingParams);

你也可以在运行时,改变圆角效果

RoundingParams roundingParams = 
    mSimpleDraweeView.getHierarchy().getRoundingParams();
roundingParams.setBorder(R.color.red, 1.0);
roundingParams.setRoundAsCircle(true);
mSimpleDraweeView.getHierarchy().setRoundingParams(roundingParams);

在运行时,不能改变呈现方式: 原本是圆角,不能改为圆圈。

说明

当使用BITMAP_ONLY(默认)模式时的限制:

  • 并非所有的图片分支部分都可以实现圆角,目前只有占位图片和实际图片可以实现圆角,我们正在努力为背景图片实现圆角功能。
  • 只有BitmapDrawable 和 ColorDrawable类的图片可以实现圆角。我们目前不支持包括NinePatchDrawable和 ShapeDrawable在内的其他类型图片。(无论他们是在XML或是程序中声明的)
  • 动画不能被圆角。
  • 由于Android的BitmapShader的限制,当一个图片不能覆盖全部的View的时候,边缘部分会被重复显示,而非留白。对这种情况可以使用不同的缩放类型(比如centerCrop)来保证图片覆盖了全部的View。 OVERLAY_COLOR模式没有上述限制,但由于这个模式使用在图片上覆盖一个纯色图层的方式来模拟圆角效果,因此只有在图标背景是静止的并且与图层同色的情况下才能获得较好的效果。

Drawee 内部实现了一个CLIPPING模式。但由于有些Canvas的实现并不支持路径剪裁(Path Clipping),这个模式被禁用了且不对外开放。并且由于路径剪裁不支持反锯齿,会导致圆角的边缘呈现像素化的效果。

总之,如果生成临时bitmap的方法,所有的上述问题都可以避免。但是这个方法并不被支持因为这会导致很严重的内存问题。


<com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/tv_retail_item_pic"
            android:layout_width="@dimen/x_px230"
            android:layout_height="@dimen/y_px230"
            fresco:roundedCornerRadius="@dimen/x_px8"
            fresco:roundBottomLeft="false"
            fresco:roundBottomRight="false"
            android:scaleType="fitCenter"
            android:layout_gravity="center_horizontal"
            fresco:placeholderImage="@mipmap/image_loading"
            />

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰(StepFun)与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量,支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是,它可以生成多种语言的歌曲,包括但不限于中文、英文、日文等19种语言

在 Android 开发中,如果希望在 XML 布局文件中直接设置图片圆角效果,可以通过使用特定的第三方库或自定义控件来实现。以下是几种实现方式: ### 使用 Fresco 库实现圆角图片 Fresco 是 Facebook 提供的一个强大的图片加载库,支持在 XML 中直接设置圆角。首先需要在项目中引入 Fresco 库,并在 `AndroidManifest.xml` 中添加权限声明。 在 XML 布局文件中使用 Fresco 提供的 `SimpleDraweeView` 控件,并设置圆角属性: ```xml <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/profile" android:layout_width="wrap_content" android:layout_height="wrap_content" fresco:roundedCornerRadius="10dp" fresco:placeholderImage="@drawable/placeholder" /> ``` 为了使 Fresco 正常工作,还需要在 XML 中添加命名空间声明: ```xml xmlns:fresco="http://schemas.android.com/apk/res-auto" ``` 在对应的 `Activity` 或 `Fragment` 中,加载图片资源: ```java import android.net.Uri; import com.facebook.drawee.view.SimpleDraweeView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); SimpleDraweeView draweeView = findViewById(R.id.profile); Uri uri = Uri.parse("https://example.com/image.jpg"); draweeView.setImageURI(uri); } } ``` ### 使用自定义 ImageView 实现圆角 如果不想使用第三方库,也可以通过继承 `ImageView` 并重写其绘制逻辑来实现圆角效果。在 XML 布局文件中使用自定义的 `ImageView`: ```xml <com.example.app.CustomImageView android:id="@+id/img_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/img1" /> ``` 在 Java 代码中定义 `CustomImageView` 类,并实现圆角绘制逻辑: ```java public class CustomImageView extends AppCompatImageView { private float roundPx; public CustomImageView(Context context) { super(context); init(); } public CustomImageView(Context context, AttributeSet attrs) { super(context, attrs); init(); TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, 0, 0); try { roundPx = a.getDimension(R.styleable.CustomImageView_roundedCornerRadius, 0); } finally { a.recycle(); } } private void init() { setLayerType(LAYER_TYPE_HARDWARE, null); } @Override protected void onDraw(Canvas canvas) { Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); Canvas tempCanvas = new Canvas(bitmap); Paint paint = new Paint(); paint.setAntiAlias(true); RectF rectF = new RectF(0, 0, getWidth(), getHeight()); tempCanvas.drawRoundRect(rectF, roundPx, roundPx, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); super.onDraw(tempCanvas); canvas.drawBitmap(bitmap, 0, 0, paint); bitmap.recycle(); } public void setRoundedCornerRadius(float radius) { roundPx = radius; invalidate(); } } ``` 同时需要在 `res/values/attrs.xml` 中定义自定义属性: ```xml <declare-styleable name="CustomImageView"> <attr name="roundedCornerRadius" format="dimension" /> </declare-styleable> ``` ### 使用工具类实现圆角图片 也可以通过工具类将普通 `Bitmap` 转换为圆角图片,然后设置到 `ImageView` 上: ```java public class DrawableUtils { public static Bitmap SetRoundCornerBitmap(Bitmap bitmap, float roundPx) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); Bitmap outmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(outmap); final int color = 0xff424242; final Paint paint = new Paint(); final Rect rect = new Rect(0, 0, width, height); final RectF rectf = new RectF(rect); paint.setAntiAlias(true); canvas.drawARGB(0, 0, 0, 0); paint.setColor(color); canvas.drawRoundRect(rectf, roundPx, roundPx, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(bitmap, rect, rect, paint); return outmap; } public static BitmapDrawable BitmapToDrawable(Bitmap bitmap) { return new BitmapDrawable(bitmap); } } ``` 在 `Activity` 中调用工具类设置圆角图片: ```java ImageView mImageView3 = findViewById(R.id.img_3); mImageView3.setImageDrawable(DrawableUtils.BitmapToDrawable( DrawableUtils.SetRoundCornerBitmap( BitmapFactory.decodeResource(getResources(), R.drawable.img1), 60))); ``` 通过以上几种方式,可以在 Android 的 XML 布局文件中实现图片圆角效果,选择合适的方法取决于项目需求和开发者的偏好[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值