圆形布局

我想在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> 

截图 在这里输入图像说明

题:-

有没有其他库可以帮助开发所需的屏幕?

如何使用自定义视图开发这样的屏幕? 我的意思是什么是轻松开发这种自定义视图的步骤?

Solutions Collecting From Web of "圆形布局"

我已经实现了一个圆形布局库。 目前正在开发中,基本满足我的需要。 随意分叉和发展。

https://github.com/ycagri/CircularLayout

编辑结束

您可以使用下面给出的自定义布局。 项目数,内半径和外半径在类中定义。 您可以使用这些variables作为自定义布局属性。 下面给出的布局在中间和周围绘制了android启动器图标。 标题被绘制在select项目之下。

截图属于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); } 

}

在这里输入图像说明