Question

如何创建如图所示的布局？

Answer 1

我认为您可以使用android:rotation="-45"将图像叠加成交叉组件并产生此效果。

Answer 2

使用此代码：

1. 在Java文件夹中创建 TriangleImageView.java 类：

public class TriangleImageView extends ImageView {

    public TriangleImageView(Context ctx, AttributeSet attrs) {
        super(ctx, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        int w = getWidth(), h = getHeight();

        Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
        canvas.drawBitmap(roundBitmap, 0, 0, null);

    }

    public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
        Bitmap finalBitmap;
        if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
            finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
                    false);
        else
            finalBitmap = bitmap;
        Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
                finalBitmap.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
                finalBitmap.getHeight());

        Point point1_draw = new Point(75, 0);
        Point point2_draw = new Point(0, 180);
        Point point3_draw = new Point(180, 180);

        Path path = new Path();
        path.moveTo(point1_draw.x, point1_draw.y);
        path.lineTo(point2_draw.x, point2_draw.y);
        path.lineTo(point3_draw.x, point3_draw.y);
        path.lineTo(point1_draw.x, point1_draw.y);
        path.close();
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawPath(path, paint);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(finalBitmap, rect, rect, paint);

        return output;
    }

}

在Acitivity中使用此代码：

private imageViewTriangle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageViewTriangle=(ImageView)findViewById(R.id.imageView_triangle);

        Bitmap icon = BitmapFactory.decodeResource(getResources(), R.drawable.images);
        imageViewTriangle.setImageBitmap(icon);

    }

输出是：

根据需要修改它。

注意：ImageView是在评论中定义的，因为它让我无法改善格式。

Answer 3

如上所述，您可以将自定义图像类重构为下面的代码

public class ProfileImageView extends AppCompatImageView{
public ProfileImageView(Context context) {
    super(context);
}

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

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



@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

    if (getWidth() == 0 || getHeight() == 0) {
        return;
    }
    Bitmap b = ((BitmapDrawable) drawable).getBitmap();
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

    int w = getWidth(), h = getHeight();

    Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w,this.getLayoutParams().width,this.getLayoutParams().height);
    canvas.drawBitmap(roundBitmap, 0, 0, null);

}



public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius, int dimension_w, int dimension_h) {
    Bitmap finalBitmap;
    if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
        finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
                false);
    else
        finalBitmap = bitmap;
    Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
            finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
            finalBitmap.getHeight());


    Log.e("Profile",""+dimension_w);

    Point point1_draw = new Point(0, 0);
    Point point2_draw = new Point(dimension_w, 0);
    Point point3_draw = new Point(dimension_w, (dimension_h/2));
    Point point4_draw = new Point(0, dimension_h);


    Path path = new Path();
    path.moveTo(point1_draw.x, point1_draw.y);
    path.lineTo(point2_draw.x, point2_draw.y);
    path.lineTo(point3_draw.x, point3_draw.y);
    path.lineTo(point4_draw.x, point4_draw.y);
    path.lineTo(point1_draw.x, point1_draw.y);
    path.close();
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawPath(path, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(finalBitmap, rect, rect, paint);

    return output;
}

}

Sample screen shot

如何在android中定义像这个图像的三角形布局？

3 个答案: