[英]Adding image in rect in a custom view
第一个观点是我想要实现的
第二个观点是我所取得的成就
在第二个视图中,两者都是 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 成为图像,并在运行时动态更改它的图像
不用担心渐变和阴影
任何帮助或朝正确方向推动都会很棒谢谢
我使用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
希望这会有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.