java - 自定义圆形 TextView - 文本不以圆为中心

Question

我利用我看到的一些不同建议组合了一个 TextView 类，并编写了这个类以在圆圈内显示一个 TextView。圆圈效果很好，但文字略高于圆圈中心。

我不知道是什么原因造成的。这是我的代码:

圆形 TextView

public class CircularTextView extends AppCompatTextView {
    private ShapeDrawable backgroundDrawable;
    private OvalShape ovalShape;

    private int backgroundColor;

    public CircularTextView(Context context) {
        super(context);
        backgroundColor = ContextCompat.getColor(context, R.color.color_circle_test_solid);
        allocateShapes();
    }

    public CircularTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        backgroundColor = ContextCompat.getColor(context, R.color.color_circle_test_solid);
        allocateShapes();
    }

    public CircularTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        backgroundColor = ContextCompat.getColor(context, R.color.color_circle_test_solid);
        allocateShapes();
    }

    //Source https://stackoverflow.com/questions/25203501/android-creating-a-circular-textview/34685568#34685568
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int h = this.getMeasuredHeight();
        int w = this.getMeasuredWidth();
        int r = Math.max(w, h);

        setMeasuredDimension(r, r);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        backgroundDrawable.setShape(ovalShape);
        backgroundDrawable.getPaint().setColor(backgroundColor);

        setBackground(backgroundDrawable);
    }

    private void allocateShapes(){
        backgroundDrawable = new ShapeDrawable();
        ovalShape = new OvalShape();
    }

    public void setBackgroundColor(int color){
        backgroundColor = color;
        invalidate();
    }
}

TestCircleTextViewActivity

public final class TestCircleTextViewActivity extends BaseActivity {

    @BindView(R.id.circle_text)
    CircularTextView circleText;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_circular_textview);
        ButterKnife.bind(this);

        int circleColor = ContextCompat.getColor(this, R.color.color_circle_test_solid);
        circleText.setBackgroundColor(circleColor);
    }
}

activity_test_circular_textview.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.thinkbubble.app.ui.view.CircularTextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/circle_text"
        android:layout_gravity="center"
        android:layout_centerInParent="true"
        android:padding="4dp"
        android:text="Keyword">

    </com.thinkbubble.app.ui.view.CircularTextView>

</RelativeLayout>

Answer 1

使用 android:gravity="center" TextView 使文本在圆圈中居中