Circular Layout

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

Конец Edit

Вы можете использовать пользовательский макет приведенной ниже. Количество элементов, внутренний радиус и внешний радиус определяются в классе. Эти переменные можно использовать как атрибут пользовательского макета. Приведенный ниже макет рисует значок запуска 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); 
} 
}