圆形布局
圆形布局
提问于 2013-10-01 20:44:12
我想在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>屏幕截图
问题：
是否有其他库可以帮助开发所需的屏幕？
如何使用自定义视图开发这样的屏幕？我的意思是，有哪些步骤可以轻松地开发这样的自定义视图？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-09-24 19:37:43
我实现了一个用于圆形布局的库。目前正在开发中，我认为基本上满足了需求。请随意派生和开发。
https://github.com/ycagri/CircularLayout
编辑的结束
您可以使用下面给出的自定义布局。项目的数量，内半径和外半径在类中定义。您可以将这些变量用作自定义布局属性。下面给出的布局在中间和圆圈周围绘制了android launcher图标。标题绘制在选择项的下方。
屏幕截图属于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);
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19116498
复制相关文章
相似问题
腾讯云开发者
