Layout circolare

Question

Voglio sviluppare la seguente schermata in Android.

Ho utilizzato CircleLayout ma non riesco ancora a ottenere l'output desiderato. Vedi il seguente codice e screenshot.

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

screenshot

Domanda: -

C'è qualche altra libreria che può aiutare a sviluppare la schermata desiderata?

Come sviluppare tale schermo utilizzando la vista personalizzata? Intendo quali sono i passaggi per sviluppare facilmente tale visualizzazione personalizzata?

Answer 1

Ho implementato una libreria per il layout circolare. Attualmente in fase di sviluppo, fondamentalmente soddisfa la necessità, penso. Sentiti libero di biforcarti e svilupparti.

https://github.com/ycagri/CircularLayout

Fine Edit

È possibile utilizzare un layout personalizzato indicato di seguito. Il numero di oggetti, raggio interno e raggio esterno sono definiti in classe. È possibile utilizzare tali variabili come attributo di layout personalizzato. Il layout qui sotto disegna l'icona di Android Launcher nel mezzo e intorno ai cerchi. I titoli sono disegnati sotto gli elementi di selezione.

L'immagine appartiene al dispositivo Nexus 7. È possibile definire margini e padding aggiuntivi per ottenere risultati migliori con risoluzioni dello schermo diverse.

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