我如何構建這個customView？

Question

如何建立這個視圖如果...

每個按鈕都是一個imageView，如果每個按鈕都是一個帶有透明度的正方形，可以對齊圖像嗎？ 。問題是圖像是一個「正方形」，不可能將圖像對齊到任何想法？

我需要知道的是我如何對齊按鈕，即 覆蓋。

存在其他選擇嗎？

Answer 1

<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> 

跟上這個代碼玩！祝你好運。

Answer 2

要將方形圖像更改爲六邊形圖像視圖，您只需自定義圖像視圖。

定製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" />