首页 > 解决方案 > 更改背景图像但保持可绘​​制到视图 android xml

问题描述

我有一个 Framelayout,它通过一个可绘制的 xml 文件有一些圆角

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

    <!-- View background color -->
    <solid
            android:color="@color/colorPrimary" >
    </solid>

    <!-- The radius makes the corners rounded -->
    <corners
        android:topLeftRadius="20dp"
        android:bottomRightRadius="20dp" >
    </corners>
</shape>

在 FrameLayout 内部,我有 2 个 TextView 和一个 imageView,它以编程方式加载了位图。问题是我已经尝试了所有方法来为 ImageView 提供与 FrameLayout 相同的圆角,所以我决定用另一个简单的 View(如 FrameLayout 或 smth)替换 ImageView,并将位图图像设置为视图的背景。这也不起作用。

那么有什么方法可以在 xml 中设置带有角的可绘制对象,然后在以后以编程方式使用位图更改背景以在加载新图像时以某种方式保持圆角?谢谢

标签: androidimageviewandroid-drawableandroid-bitmapandroid-framelayout

解决方案


解决方案

步骤 1.转到res/values文件夹,创建一个名为的 xml 文件attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundedImageView">
        <attr name="topLeftCorner" format="dimension" />
        <attr name="topRightCorner" format="dimension" />
        <attr name="bottomRightCorner" format="dimension" />
        <attr name="bottomLeftCorner" format="dimension" />
    </declare-styleable>
</resources>

步骤 2.创建一个从 AppCompatImageView 扩展的类,命名为RoundedImageView

public class RoundedImageView extends AppCompatImageView {

    private final Path path = new Path();
    private final float[] radii = new float[8];
    private final RectF rect = new RectF();

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

    public RoundedImageView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundedImageView);
        try {
            int topLeftCorner = a.getDimensionPixelSize(R.styleable.RoundedImageView_topLeftCorner, 0);
            int topRightCorner = a.getDimensionPixelSize(R.styleable.RoundedImageView_topRightCorner, 0);
            int bottomRightCorner = a.getDimensionPixelSize(R.styleable.RoundedImageView_bottomRightCorner, 0);
            int bottomLeftCorner = a.getDimensionPixelSize(R.styleable.RoundedImageView_bottomLeftCorner, 0);
            radii[0] = topLeftCorner;
            radii[1] = topLeftCorner;
            radii[2] = topRightCorner;
            radii[3] = topRightCorner;
            radii[4] = bottomRightCorner;
            radii[5] = bottomRightCorner;
            radii[6] = bottomLeftCorner;
            radii[7] = bottomLeftCorner;
        } finally {
            a.recycle();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        rect.left = 0;
        rect.top = 0;
        rect.right = getWidth();
        rect.bottom = getHeight();
        path.rewind();
        path.addRoundRect(rect, radii, Path.Direction.CW);
        canvas.clipPath(path);
        super.onDraw(canvas);
    }
}

步骤 3.从布局文件中使用它。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F00"
    android:gravity="center">

    <com.example.roundedimageview.RoundedImageView
        android:id="@+id/imageView"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_gravity="center"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_android"
        app:bottomRightCorner="20dp"
        app:topLeftCorner="20dp" />
</FrameLayout>

结果

在此处输入图像描述

益处

  • 您可以设置左上角、右上角、右下角、左下角的圆角半径。

  • 使用 Glide、毕加索图书馆

限制


推荐阅读