Bố cục Thông tư

Question

Tôi muốn phát triển màn hình sau trong Android.

Tôi đã sử dụng CircleLayout nhưng tôi vẫn không thể đạt được kết quả mong muốn. Xem mã và ảnh chụp màn hình sau.

<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

Câu hỏi: -

Có bất kỳ thư viện khác có thể giúp phát triển màn hình mong muốn?

Làm cách nào để phát triển màn hình như vậy bằng chế độ xem tùy chỉnh? Tôi có nghĩa là các bước để phát triển xem tùy chỉnh dễ dàng như thế nào?

Answer 1

Tôi đã triển khai một thư viện cho bố cục hình tròn. Hiện đang được phát triển, về cơ bản đáp ứng nhu cầu tôi nghĩ. Cảm thấy tự do để ngã ba và phát triển.

https://github.com/ycagri/CircularLayout

Cuối Sửa

Bạn có thể sử dụng một cách bố trí tùy chỉnh đưa ra dưới đây. Số lượng mục, bán kính trong và bán kính ngoài được xác định trong lớp. Bạn có thể sử dụng các biến đó làm thuộc tính bố cục tùy chỉnh. Bố cục được đưa ra bên dưới vẽ biểu tượng trình khởi chạy Android ở giữa và xung quanh vòng kết nối. Tiêu đề được vẽ bên dưới các mục lựa chọn.

Ảnh chụp màn hình thuộc về thiết bị Nexus 7. Thêm lề và đệm có thể được xác định để có được kết quả tốt hơn trên các độ phân giải màn hình khác nhau.

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