在自定義視圖中添加矩形圖像

Question

第一個觀點是我想要實現的

第二個觀點是我所取得的成就

在第二個視圖中，兩者都是 Recf

這是我在xml view

<com.aws.renooji.utils.CustomCategoriesImageView
    android:id="@+id/customCategoriesImageView"
    android:layout_width="200dp"
    android:layout_height="120dp"
    android:layout_marginStart="16dp"
    android:layout_marginBottom="32dp"
    app:bg_color="@color/colorLightBlue"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:square_angle="6"
    app:square_topMargin="50"
    app:square_rightMargin="80"
    app:square_color="@color/colorAccent"
    app:square_position_x="0"
    app:square_position_y="20"
    app:square_size="115dp" />

這是attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomCategoriesImageView">
        <attr name="square_color" format="color"/>
        <attr name="square_size" format="dimension"/>
        <attr name="square_angle" format="integer"/>
        <attr name="square_position_x" format="integer"/>
        <attr name="square_position_y" format="integer"/>
        <attr name="square_image" format="reference"/>
        <attr name="bg_color" format="color"/>
        <attr name="square_topMargin" format="integer"/>
        <attr name="square_rightMargin" format="integer"/>
    </declare-styleable>
</resources>

這是我的 customView 類CustomCategoriesImageView extends View

private static final int SQUARE_SIZE_DEF = 200;
private Rect rectImage;
private RectF rectBG;
private Paint paint,bgPaint;
private int squareColor, bgColor, squareSize squarePosX, squarePosY;
private int squareTopMargin, squareRightMargin, squareAngle, canvasWidth, canvasHeight;
private int image;
private float[] corners = new float[]{};
private Path path;

public CustomCategoriesImageView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);

    init(attrs);
}

public CustomCategoriesImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(attrs);
}

private void init(@Nullable AttributeSet set) {
    rectImage = new Rect();
    rectBG = new RectF();
    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    if (set == null) {
        return;
    }

    TypedArray ta = getContext().obtainStyledAttributes(set, R.styleable.CustomCategoriesImageView);

    squareColor = ta.getColor(R.styleable.CustomCategoriesImageView_square_color, Color.RED);
    bgColor = ta.getColor(R.styleable.CustomCategoriesImageView_bg_color, Color.YELLOW);
    squareSize = ta.getDimensionPixelSize(R.styleable.CustomCategoriesImageView_square_size, SQUARE_SIZE_DEF);
    squarePosX = ta.getInt(R.styleable.CustomCategoriesImageView_square_position_x, getWidth() - 50);
    squarePosY = ta.getInt(R.styleable.CustomCategoriesImageView_square_position_y, getHeight() - 50);
    squareAngle = ta.getInt(R.styleable.CustomCategoriesImageView_square_angle, 10);
    image = ta.getResourceId(R.styleable.CustomCategoriesImageView_square_image, R.color.trans);
    squareTopMargin = ta.getInt(R.styleable.CustomCategoriesImageView_square_topMargin, 20);
    squareRightMargin = ta.getInt(R.styleable.CustomCategoriesImageView_square_rightMargin, 20);

    corners = new float[]{
            30, 30,        // Top left radius in px
            30, 30,        // Top right radius in px
            30, 30,          // Bottom right radius in px
            30, 30           // Bottom left radius in px
    };

    path = new Path();

    ta.recycle();
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    canvasWidth = w;
    canvasHeight = h;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    bgPaint.setColor(bgColor);
    rectBG.left = 0;
    rectBG.top = 0;
    rectBG.bottom = canvasHeight;
    rectBG.right = canvasWidth;

    path.addRoundRect(rectBG, corners, Path.Direction.CW);
    canvas.drawPath(path, bgPaint);

    Bitmap bmp = BitmapFactory.decodeResource(getResources(), image);

    // first point, here square's top left point will be
    rectImage.left = canvasWidth - (squareSize - squareRightMargin);
    rectImage.top = canvasHeight - (squareSize - squareTopMargin);

    // second point, here square's bottom right point will be
    rectImage.right = canvasWidth - squarePosX;
    rectImage.bottom = canvasHeight - squarePosY;

    paint.setColor(squareColor);

    canvas.save();
    canvas.rotate(squareAngle, 100, 100);
    canvas.drawRect(rectImage, paint);
}

我沒有粘貼我的整個類和構造函數，所以

我不擔心文本，因為我可以在 ConstraintLayout 中的 customView 上添加 TextView 我一直堅持如何使這種 DarkBlue 顏色 Recq 成為圖像，並在運行時動態更改它的圖像

不用擔心漸變和陰影

任何幫助或朝正確方向推動都會很棒謝謝

Answer 1

我使用drawBitmap()在另一個形狀內繪制圖像

canvas.drawBitmap(bmp, null, rectBG, null);
// here bmp is a BitMap where I will setImage
// rectBG is a rectangle on the CustomView, you can see it in the Image I posted, it is the smaller one which is tiled
// first null can be replaces with a new Rect and last null can be replace with Paint

這是一種從類發送圖像的方法

// set image from Classes
public void setImage(int image) {
    bmp = BitmapFactory.decodeResource(getResources(), image);
    postInvalidate();
    //here postInvalidate will replace the View with the new image data Async so if the image will take time to load, loading will not block the main thread
}

如果你想實現類似的東西，你可以使用我的問題中的代碼，並在傾斜的正方形或任何其他場景中添加setImage()方法到 setImage

希望這會有所幫助！