Disposición circular

Quiero desarrollar la siguiente pantalla en Android. Introduzca aquí la descripción de la imagen

Utilicé CircleLayout pero todavía no puedo alcanzar la salida deseada. Vea el siguiente código y captura de pantalla.

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

captura de pantalla Introduzca aquí la descripción de la imagen

Pregunta:-

¿Existe alguna otra biblioteca que pueda ayudar a desarrollar la pantalla deseada?

¿Cómo desarrollar esa pantalla con la vista personalizada? Me refiero a lo que son los pasos para desarrollar tal vista personalizada fácilmente?

He implementado una biblioteca para el diseño circular. Actualmente en desarrollo, básicamente cumple la necesidad creo. Siéntase libre de bifurcar y desarrollarse.

https://github.com/ycagri/CircularLayout

Fin de la edición

Puede utilizar un diseño personalizado que se muestra a continuación. El número de elementos, el radio interior y el radio exterior se definen en la clase. Puede utilizar esas variables como atributo de diseño personalizado. La disposición dada abajo dibuja el icono androide del lanzador en el centro y alrededor de los círculos. Los títulos se dibujan debajo de los ítems de selección.

La captura de pantalla pertenece al dispositivo Nexus 7. El margen extra y el relleno se pueden definir para obtener mejores resultados en diferentes resoluciones de pantalla.

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

}

Introduzca aquí la descripción de la imagen

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.