徽章 TextView 文本未与中心对齐答案

【问题标题】：Badge TextView Text is not aligned to center徽章 TextView 文本未与中心对齐
【发布时间】：2018-02-02 17:35:06
【问题描述】：

全新的 android 开发...我在按钮上有一个徽章文本，但由于某种原因文本未与中心对齐。

我创建了一个新片段并将Component Tree 设置为relativeLayout

然后我添加了按钮和文本视图。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <Button
        android:id="@+id/intercom_button"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="40dp"
        android:background="@drawable/ic_intercom_logo"
        android:elevation="10dp"
        android:outlineProvider="bounds"
        android:shadowColor="@color/brownishGrey"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/intercom_badge_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@id/intercom_button"
        android:layout_alignRight="@id/intercom_button"
        android:layout_alignTop="@id/intercom_button"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="35dp"
        android:background="@drawable/badge_circle"
        android:elevation="11dp"
        android:paddingEnd="8dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:text="10"
        android:textAlignment="center"
        android:gravity="center"
        android:textColor="#FFF"
        android:textSize="10dp"
        app:layout_constraintEnd_toEndOf="@+id/intercom_button"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

在drawable/badge_circle我用过。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"
    android:thickness="8dp"
    android:innerRadius="0dp"
    >

    <solid
        android:color="#F00"
        />
    <stroke
        android:width="1dip"
        android:color="#F00" />

    <padding
        android:top="2dp"
        android:bottom="2dp"/>

</shape>

这会导致

据我了解，这是因为 textview 属性设置为

layout_width:wrap_content 
layout_height:wrap_content

但是如果我将它们设置为静态约束，例如

layout_width:16dp
layout_height:16dp

文本仍然没有对齐。设置重力或文本对齐也无济于事

android:textAlignment="center"
android:gravity="center"

我该如何解决这个问题？

【问题讨论】：

您是否在我们的 android.support.constraint.ConstraintLayout 上添加了中心标签？
我做对了吗？问题是“10”没有画在红圈中间？
是否有理由不只是将文本添加到带有android:text="10" 的按钮。它应该会自动为您居中。
@DroiDev 我不这么认为，我该怎么做？也许我误解了你，但这不是一个系统库，为什么我需要编辑它？
@0X0nosugar 是的，正确的。

标签： android android-layout textview android-7.0-nougat

【解决方案1】：

badge_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"
    android:thickness="8dp"
    android:innerRadius="0dp"
    >

    <solid
        android:color="#F00"
        />
    <stroke
        android:width="1dip"
        android:color="#F00" />


</shape>

更改为 TextView

<TextView
    android:id="@+id/intercom_badge_textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignEnd="@id/intercom_button"
    android:layout_alignRight="@id/intercom_button"
    android:layout_alignTop="@id/intercom_button"
    android:layout_marginTop="35dp"
    android:background="@drawable/badge_circle"
    android:elevation="11dp"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    android:paddingEnd="8dp"
    android:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:text="10"
    android:textAlignment="center"
    android:gravity="center|center_horizontal|center_vertical"
    android:textColor="#FFF"
    android:textSize="10dp"
    app:layout_constraintEnd_toEndOf="@+id/intercom_button"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="357dp" />

我从徽章圈内部删除了填充并添加到文本视图中......似乎已修复......

【讨论】：