android - 円形レイアウト

Question

Androidで以下の画面を開発したいです。

CircleLayoutを使用しましたが、まだ目的の出力を達成できません。次のコードとスクリーンショットを参照してください。

<com.example.hl.CircleLayout
        android:id="@+id/pie"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        custom:dividerWidth="5dp"
        custom:innerCircle="@drawable/profile_pic_icon"
        custom:innerRadius="50dp"
        custom:layoutMode="pie"
        custom:sliceDivider="@android:color/transparent" >

        <RelativeLayout
            android:id="@+id/appt_center_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/appt_center_bg" >

            <TextView
                android:id="@+id/one"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:onClick="onClick"
                android:text="APP CENTER"
                android:textStyle="bold" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/meds_cabinet_bg" >

            <TextView
                android:id="@+id/two"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:onClick="onClick"
                android:text="MEDS CABINET"
                android:textStyle="bold" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/check_in_bg" >

            <TextView
                android:id="@+id/three"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:onClick="onClick"
                android:text="CHECK-IN"
                android:textStyle="bold" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/my_tracker_bg" >

            <TextView
                android:id="@+id/four"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:onClick="onClick"
                android:text="MY TRACKERS"
                android:textStyle="bold" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/myaccount_bg" >

            <TextView
                android:id="@+id/five"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:onClick="onClick"
                android:text="MY ACCOUNTS"
                android:textStyle="bold" />
        </RelativeLayout>
    </com.example.hl.CircleLayout>

スクリーンショット

質問：-

目的の画面の開発に役立つ他のライブラリはありますか?

カスタムビューを使用してそのような画面を開発するにはどうすればよいですか? このようなカスタム ビューを簡単に開発するための手順は何ですか?

Answer 1

円形レイアウト用のライブラリを実装しました。現在開発中ですが、基本的にはニーズを満たしていると思います。自由にフォークして開発してください。

https://github.com/ycagri/CircularLayout

編集の終わり

以下のカスタム レイアウトを使用できます。アイテムの数、内側の半径と外側の半径はクラスで定義されます。これらの変数をカスタム レイアウト属性として使用できます。以下のレイアウトでは、Android ランチャー アイコンが中央と円の周りに描画されます。タイトルは選択項目の下に描画されます。

スクリーンショットは Nexus 7 デバイスのものです。余分なマージンとパディングを定義して、さまざまな画面解像度でより良い結果を得ることができます。

public class CircleLayout extends View {

private final static int TOTAL_DEGREE = 360;
private final static int START_DEGREE = -90;

private Paint mPaint;
private RectF mOvalRect = null;

private int mItemCount = 5;
private int mSweepAngle;

private int mInnerRadius;
private int mOuterRadius;
private Bitmap mCenterIcon;
private int[] mColors = {Color.RED, Color.YELLOW, Color.GREEN, Color.BLUE, Color.CYAN};
private String[] mTitles = {"APPT CENTER", "MEDS CABINET", "CHECK-IN", "MY TRACKERS", "MY ACCOUNTS"};

public CircleLayout(Context context) {
    this(context, null);
}

public CircleLayout(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

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

    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setStrokeWidth(2);

    mSweepAngle = TOTAL_DEGREE / mItemCount;

    mInnerRadius = 125;
    mOuterRadius = 400;

    mCenterIcon = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
}

@Override
protected void onDraw(Canvas canvas) {

    int width = getWidth();
    int height = getHeight();

    if (mOvalRect == null) {
        mOvalRect = new RectF(width / 2 - mOuterRadius, height / 2 - mOuterRadius, width / 2 + mOuterRadius, height / 2 + mOuterRadius);
    }

    for (int i = 0; i < mItemCount; i++) {
        int startAngle = START_DEGREE + i * mSweepAngle;
        mPaint.setColor(mColors[i]);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawArc(mOvalRect, startAngle, mSweepAngle, true, mPaint);

        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawArc(mOvalRect, startAngle, mSweepAngle, true, mPaint);

        int centerX = (int) ((mOuterRadius + mInnerRadius) / 2 * Math.cos(Math.toRadians(startAngle + mSweepAngle / 2)));
        int centerY = (int) ((mOuterRadius + mInnerRadius) / 2 * Math.sin(Math.toRadians(startAngle + mSweepAngle / 2)));
        canvas.drawBitmap(mCenterIcon, width / 2 + centerX - mCenterIcon.getWidth() / 2, height / 2 + centerY - mCenterIcon.getHeight() / 2, null);

        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawText(mTitles[i], width / 2 + centerX - mCenterIcon.getWidth() / 2, height / 2 + centerY + mCenterIcon.getHeight(), mPaint);
    }

    mPaint.setColor(Color.WHITE);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(width / 2, height / 2, mInnerRadius, mPaint);
    canvas.drawBitmap(mCenterIcon, width / 2 - mCenterIcon.getWidth() / 2, height / 2 - mCenterIcon.getHeight() / 2, null);

    super.onDraw(canvas);
}
}