androidで六角形のリストビューを作成する方法

Question

私はこのような六角形のリストビューを作成したいと考えています。

Answer 1

あなたがXMLで子のレイアウトにこの六角形のImageViewのを使用するとマージン

import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.graphics.Path; 
import android.graphics.PorterDuff; 
import android.graphics.Region; 
import android.util.AttributeSet; 
import android.widget.ImageView; 

public class HexagonMaskView extends ImageView { 
    private Path hexagonPath; 
    private Path hexagonBorderPath; 
    private Paint mBorderPaint; 

    public HexagonMaskView(Context context) { 
     super(context); 
     init(); 
    } 

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

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

    private void init() { 
     this.hexagonPath = new Path(); 
     this.hexagonBorderPath = new Path(); 

     this.mBorderPaint = new Paint(); 
     this.mBorderPaint.setColor(Color.WHITE); 
     this.mBorderPaint.setStrokeCap(Paint.Cap.ROUND); 
     this.mBorderPaint.setStrokeWidth(50f); 
     this.mBorderPaint.setStyle(Paint.Style.STROKE); 
    } 

    public void setRadius(float radius) { 
     calculatePath(radius); 
    } 

    public void setBorderColor(int color) { 
     this.mBorderPaint.setColor(color); 
     invalidate(); 
    } 

    private void calculatePath(float radius) { 
     float halfRadius = radius/2f; 
     float triangleHeight = (float) (Math.sqrt(3.0) * halfRadius); 
     float centerX = getMeasuredWidth()/2f; 
     float centerY = getMeasuredHeight()/2f; 

     this.hexagonPath.reset(); 
     this.hexagonPath.moveTo(centerX, centerY + radius); 
     this.hexagonPath.lineTo(centerX - triangleHeight, centerY + halfRadius); 
     this.hexagonPath.lineTo(centerX - triangleHeight, centerY - halfRadius); 
     this.hexagonPath.lineTo(centerX, centerY - radius); 
     this.hexagonPath.lineTo(centerX + triangleHeight, centerY - halfRadius); 
     this.hexagonPath.lineTo(centerX + triangleHeight, centerY + halfRadius); 
     this.hexagonPath.close(); 

     float radiusBorder = radius - 5f; 
     float halfRadiusBorder = radiusBorder/2f; 
     float triangleBorderHeight = (float) (Math.sqrt(3.0) * halfRadiusBorder); 

     this.hexagonBorderPath.reset(); 
     this.hexagonBorderPath.moveTo(centerX, centerY + radiusBorder); 
     this.hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY + halfRadiusBorder); 
     this.hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY - halfRadiusBorder); 
     this.hexagonBorderPath.lineTo(centerX, centerY - radiusBorder); 
     this.hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY - halfRadiusBorder); 
     this.hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY + halfRadiusBorder); 
     this.hexagonBorderPath.close(); 
     invalidate(); 
    } 

    @Override 
    public void onDraw(Canvas c) { 
     c.drawPath(hexagonBorderPath, mBorderPaint); 
     c.clipPath(hexagonPath, Region.Op.INTERSECT); 
     c.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR); 
     super.onDraw(c); 
    } 

    @Override 
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){ 
     super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
     int width = MeasureSpec.getSize(widthMeasureSpec); 
     int height = MeasureSpec.getSize(heightMeasureSpec); 
     setMeasuredDimension(width, height); 
     calculatePath(Math.min(width/2f, height/2f) - 10f); 
    } 
} 

を調整することができます

<YourpakageName.HexagonMaskView 
    android:id="@+id/image" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:src="@drawable/bear" 
    android:background="@android:color/holo_green_light"/> 

希望これは

Answer 2

ねえ、そのためにベクトル画像を使用します -

<vector android:height="24dp" 
android:viewportHeight="628.0" 
android:viewportWidth="726.0" 
android:width="27dp" 
xmlns:android="http://schemas.android.com/apk/res/android"> 
<path 
    android:fillColor="#00ffffff" 
    android:pathData="m723,314c-60,103.9 -120,207.8 -180,311.8 -120,0 -240,0 -360,0C123,521.8 63,417.9 3,314 63,210.1 123,106.2 183,2.2c120,0 240,0 360,0C603,106.2 663,210.1 723,314Z" 
    android:strokeColor="#000000" 
    android:strokeWidth="4" /> 

・ホープ、このhelp.Happyコーディング。