Układ okrągły

Question

Chcę utworzyć następujący ekran w systemie Android.

Użyłem CircleLayout, ale nadal nie jestem w stanie osiągnąć pożądanej wydajności. Zobacz poniższy kod i zrzut ekranu.

<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

Pytanie: -

Czy istnieją inne biblioteki, które mogą pomóc w rozwijaniu żądany ekran?

Jak stworzyć taki ekran za pomocą niestandardowego widoku? Chodzi mi o to, jakie są kroki, aby łatwo stworzyć taki niestandardowy widok?

Answer 1

Zaimplementowałem bibliotekę do układu kołowego. Obecnie w fazie rozwoju, w zasadzie spełnia potrzeby myślę. Zapraszam do rozwidlenia i rozwoju.

https://github.com/ycagri/CircularLayout

Koniec Edytuj

Można użyć niestandardowy układ podanej poniżej. Liczba przedmiotów, promień wewnętrzny i promień zewnętrzny są zdefiniowane w klasie. Możesz użyć tych zmiennych jako niestandardowego atrybutu układu. Poniższy układ rysuje ikonę Androida na ekranie w środku i wokół kręgów. Tytuły są rysowane poniżej pozycji wyboru.

Zrzut ekranu należy do urządzenia Nexus 7. Można zdefiniować dodatkowy margines i dopełnienie, aby uzyskać lepsze wyniki na różnych rozdzielczościach ekranu.

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