在Android Studio中创建固定大小的圆圈视图

时间:2018-12-04 02:32:50

标签: java android xml android-studio android-view

所以我对我来说有点沮丧。我实际上想要实现的是一个按钮,该按钮的中心有两个textviews。一个带有名称,另一个带有数字值...就像计数器...

我希望它看起来像这样:

Counter Idea

它周围有一个细的白色边框(鉴于它的颜色无法完全看到...对不起)。

我想做的就是根据按钮的按下方式增加和减少值。

到目前为止,我有以下内容:

attrs.xml

<resources>
<declare-styleable name="ButtonCounter">
    <attr name="backgroundColor" format="color"/>
    <attr name="borderColor" format="color"/>
    <attr name="borderSize" format="integer"/>
    <attr name="labelNameColor" format="color"/>
    <attr name="labelValueColor" format="color"/>
    <attr name="labelName" format="string"></attr>
    <attr name="labelValue" format="string"></attr>
</declare-styleable>

ButtonCounter.java

public class ButtonCounter extends View {
private int                 backgroundColor,
                            borderColor,
                            borderSize,
                            labelNameColor,
                            labelValueColor;
private String              labelName,
                            labelValue;
private Paint               paintCircle,
                            paintStroke;

public ButtonCounter(Context context, AttributeSet attrs) {
    super(context);

    paintCircle = new Paint();
    paintStroke = new Paint();

    TypedArray a = context.getTheme().obtainStyledAttributes(
            attrs,
            R.styleable.ButtonCounter
            ,
            0,
            0
    );

    try {
        backgroundColor = a.getInteger(R.styleable.ButtonCounter_backgroundColor, 0);
        borderColor = a.getInteger(R.styleable.ButtonCounter_borderColor, 0);
        borderSize = a.getInteger(R.styleable.ButtonCounter_borderSize, 0);
        labelNameColor = a.getInteger(R.styleable.ButtonCounter_labelNameColor,0);
        labelValueColor = a.getInteger(R.styleable.ButtonCounter_labelValueColor, 0 );
        labelName = a.getString(R.styleable.ButtonCounter_labelName);
        labelValue = a.getString(R.styleable.ButtonCounter_labelValue);
    } finally {
        a.recycle();
    }
}

@Override
protected void onDraw(Canvas canvas) {
    paintCircle.setColor(backgroundColor);
    paintCircle.setAntiAlias(true);
    paintStroke.setColor(borderColor);
    paintStroke.setAntiAlias(true);

    int width = this.getMeasuredWidth();
    int height = this.getMeasuredHeight();

    int diameter = ((height > width) ? height : width);
    int radius = diameter / 2;


    canvas.drawCircle(diameter / 2, diameter / 2, radius - borderSize, paintCircle);
    canvas.drawCircle(diameter / 2, diameter / 2, radius, paintStroke);
}

}

这并不能满足我的要求,因为它变得太大了。

关于如何开始尝试此操作的任何想法?

谢谢!

1 个答案:

答案 0 :(得分:0)

嗨,如果您想在不使用Java类的情况下实现相同的目的,请参见以下解决方案:

  1. 使用任何名称创建一个可绘制对象可让circle_bg_xml
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <solid android:color="@color/black" />
    </shape>
  1. 现在在您的布局中使用将两个TextViews(或任何视图)放入LinearLayout中,并将该可绘制对象设置为Layout背景。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="100dp"
    android:layout_height="100dp"
    android:gravity="center"
    android:background="@drawable/circle_bg">
    <TextView
        android:layout_width="wrap_content"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:layout_height="wrap_content"
        android:text="Global"/>
    <TextView
        android:layout_width="wrap_content"
        android:textColor="@color/white"
        android:textSize="22sp"
        android:layout_height="wrap_content"
        android:text="0"/>
</LinearLayout>

希望它会对您有所帮助。 谢谢