परिपत्र लेआउट

Question

मैं एंड्रॉइड में निम्न स्क्रीन विकसित करना चाहता हूं।

मैंने 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

संपादित

का अंत आप नीचे दिए गए एक कस्टम लेआउट का उपयोग कर सकते हैं। वस्तुओं की संख्या, आंतरिक त्रिज्या और बाहरी त्रिज्या कक्षा में परिभाषित हैं। आप कस्टम चर लेआउट विशेषता के रूप में उन चर का उपयोग कर सकते हैं। नीचे दी गई लेआउट मध्य में और मंडलियों के आस-पास एंड्रॉइड लॉन्चर आइकन खींचती है। टाइटल को चयन आइटम के नीचे खींचा जाता है।

स्क्रीनशॉट नेक्सस 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); 
} 
}