Question

如果...

，如何构建此视图

每个按钮都是一个imageView，如果每个按钮都是透明的正方形，可以对齐图像吗？。问题是图像是“方形”，并且不可能以这种形式对齐图像，任何想法？

我需要知道的是我如何对齐这些按钮覆盖。

还有其他选择吗？

Answer 1

要将方形图像更改为六边形图像视图，只需自定义图像视图。

自定义HexagonImageView类：

public class HexagonImageView extends ImageView {

    public HexagonImageView(Context context) {
        super(context);
    }

    public HexagonImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public HexagonImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Drawable drawable = getDrawable();
        if (drawable == null || getWidth() == 0 || getHeight() == 0) {
            return;
        }

        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        int width = getWidth(), height = getHeight();
        int radius = width < height ? width : height;
        Log.i("HexagonImage", "width : " + width + "  " + "Height : " + height + "  " + "Radius : " + radius);

        Bitmap roundBitmap = getCroppedBitmap(bitmap, radius, width, height);
        canvas.drawBitmap(roundBitmap, 0, 0, null);
    }

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius, int width, int height) {
        Bitmap sbmp;
        if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
            float _w_rate = 1.0f * radius / bmp.getWidth();
            float _h_rate = 1.0f * radius / bmp.getHeight();
            float _rate = _w_rate < _h_rate ? _h_rate : _w_rate;
            sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() * _rate), (int)(bmp.getHeight() * _rate), false);
        }
        else
            sbmp = bmp;

        Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(),
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final Rect rect = new Rect(0, 0, width, width);
        final int offset = (int) (width / (double) 2 * Math.tan(30 * Math.PI / (double) 180)); // (width / 2) * tan(30deg)
        Log.i("HexagonImage", "Offset : " + offset);
        final int length = width - (2 * offset);
        Log.i("HexagonImage", "Lenght : " + length);

        final Path path = new Path();
        path.moveTo(width / 2, 0); // top
        path.lineTo(0, offset); // left top
        path.lineTo(0, offset + length); // left bottom
        path.lineTo(width / 2, width); // bottom
        path.lineTo(width, offset + length); // right bottom
        path.lineTo(width, offset); // right top
        path.close(); //back to top

        Paint paint = new Paint();
        paint.setStrokeWidth(4);
        canvas.drawARGB(0, 0, 0, 0);
        canvas.drawPath(path, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(sbmp, rect, rect, paint); 

        paint.setColor(Color.parseColor("#BAB399"));
        paint.setColor(Color.parseColor("white"));
        paint.setStrokeWidth(4);
        paint.setDither(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setPathEffect(new CornerPathEffect(10));
        return output;
    }

}

在XML中添加以下内容：

<PackageName.HexagonImageView
        android:id="@+id/iv_hexagon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:src="@drawable/logo"
        android:adjustViewBounds="true" />

Answer 2

<View
    android:id="@+id/uno"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_centerHorizontal="true"
    android:background="@drawable/hexa"></View>

<LinearLayout
    android:id="@+id/layout_dos"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/uno"
    android:layout_centerHorizontal="true"
    android:gravity="center">

    <View
        android:id="@+id/dos"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/hexa"></View>

    <View
        android:id="@+id/tres"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/hexa"></View>
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/layout_dos"
    android:layout_centerHorizontal="true">

    <View
        android:id="@+id/cuatro"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/hexa"></View>

    <View
        android:id="@+id/cinco"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/hexa"></View>

    <View
        android:id="@+id/seis"
        android:layout_width="50dp"
        android:layout_height="50dp"></View>

</LinearLayout>

继续使用此代码！祝你好运。

如何构建此customView？

2 个答案: