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);
}
}