Question

我尽力将文字垂直居中，但我无法做到。问题是我有一排按钮，其高度= fill_parent和weight = 1，随着行变小，我的文本开始触及视图的底部，如下所示：

enter image description here

我尝试去除填充，边距，更改高度等等。但似乎没有做到这一点。

即使文字大小接近视图高度，我怎样才能垂直对齐？

这里是包含数字5的视图的代码：

    <Button
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="5"
        android:layout_weight="1"
        tools:ignore="HardcodedText"
        android:clickable="false"
        android:textSize="90dp"
        android:textColor="?attr/color1"
        android:gravity="center"
        android:paddingLeft="@dimen/normal_margin"
        android:paddingRight="@dimen/normal_margin"
        android:padding="0dp" />

Answer 1

如果此按钮位于垂直方向的线性布局内。由于您定义了权重，因此您希望将高度设置为“0dp”而不是“fill_parent”。使文本中心垂直。你试过android：gravity：“center_vertical”？

Answer 2

根据我的建议，如果您有两个选项可以进行此类布局并从您遇到的问题中解决问题。

<强> 1。使用GridView

使用gridview，您将在所有四个方向（左，右，上，下）拥有相等的空间。您不必担心网格项的等间距。

 <GridView
    android:id="@+id/album_list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:cacheColorHint="#00000000"
    android:gravity="center"
    android:numColumns="auto_fit"
    android:stretchMode="spacingWidthUniform"
    android:drawSelectorOnTop="true"/>

尝试上面的代码，您将在网格中平均分配所有视图。

<强> 2。使用TableLayout和TableRow

请检查以下代码，以使用TableLayout和TableRow及其属性来平等地排列所有视图。即使你缩小了TableLayout的高度和宽度，它也会在该视图中保持相同的排列。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"                      android:layout_width="match_parent"
   android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:layout_margin="5dp">
<TableRow android:weightSum="3"
    android:layout_weight="1" android:gravity="center">
    <Button android:gravity="center"
        android:textSize="13sp" android:textColor="#000000"
        android:text="1" android:layout_weight="1"/>
    <Button  android:gravity="center"
        android:textSize="13sp" android:textColor="#000000"
        android:text="1" android:layout_weight="1"/>
    <Button android:gravity="center"
        android:textSize="13sp" android:textColor="#000000"
        android:text="1" android:layout_weight="1"/>
</TableRow>

    <TableRow android:weightSum="3" android:layout_weight="1" android:gravity="center">
        <Button android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
        <Button  android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
        <Button android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
    </TableRow>

    <TableRow android:weightSum="3" android:layout_weight="1" android:gravity="center">
        <Button android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
        <Button  android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
        <Button android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
    </TableRow>
</TableLayout>

请查找此TableLayout的输出。 enter image description here

如果此问题得到解决，请与我们联系。如果没有，我很乐意再次帮助你。

享受编码......：）

Answer 3

试试这个

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentBottom="true"
    android:layout_below="@+id/dialer_title"

    android:orientation="vertical"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.2" >

        <ImageButton
            android:id="@+id/btn1"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_1"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_1_no_vm" />

        <ImageButton
            android:id="@+id/btn2"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_2"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_2" />

        <ImageButton
            android:id="@+id/btn3"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_3"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_3" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.2" >

        <ImageButton
            android:id="@+id/btn4"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_4"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_4" />

        <ImageButton
            android:id="@+id/btn5"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_5"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_5" />

        <ImageButton
            android:id="@+id/btn6"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_6"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_6" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.2" >

        <ImageButton
            android:id="@+id/btn7"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_7"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_7" />

        <ImageButton
            android:id="@+id/btn8"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_8"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_8" />

        <ImageButton
            android:id="@+id/btn9"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_9"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_9" />
    </LinearLayout>

    <LinearLayout
        style="@style/DialPadRow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.2" >

        <ImageButton
            android:id="@+id/btnStar"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_astr"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_star" />

        <ImageButton
            android:id="@+id/btn0"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_0"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_0" />

        <ImageButton
            android:id="@+id/btnHash"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_hash"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="false"
            android:src="@drawable/dial_num_hash" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.2" >

        <ImageButton
            android:id="@+id/btnContacts"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/string_menu_contacts"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="true"
            android:src="@drawable/selector_dial_contact_b" />

        <ImageButton
            android:id="@+id/btnCall"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/string_menu_call"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="true"
            android:src="@drawable/dial_num_call" />

        <ImageButton
            android:id="@+id/btnDelete"
            style="@style/DialPadButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.33"
            android:contentDescription="@string/desc_backspace"
            android:scaleType="centerCrop"
            android:soundEffectsEnabled="true"
            android:src="@drawable/dial_num_delete" />
    </LinearLayout>
</LinearLayout>

这将创建具有相同按钮大小的手机经销商。对于style =“@ style / DialPadButton”，使用名称DialPadButton创建样式并根据需要自定义按钮。在我的情况下，我添加了项目名称=“android：layout_margin”，值为5dp。

Answer 4

使用网格视图进行设计，您将获得更多功能。否则在其中设置一个线性布局，将另外三个线性布局方向设置为水平，权重总和= 3，将每个按钮放在子布局上，并为每个按钮提供布局权重= 1。

Answer 5

这并不意味着文本＆＃34; 5＆＃34;没有居中。文字＆＃34; 5＆＃34;显示略低于中心，因为按钮没有足够的空间来布局其文本内容。即使它提供了足够的高度，文字＆＃34; 5＆＃34;将略高于中心。这是因为，有一些字符（＆＃39; y＆＃39;，＆＃39; g＆＃39;等）的下降幅度大于＆＃34; 5＆＃34; （在布局文本时，可以考虑最大可能的上升和下降，即使文本中没有较高的字形或非零下降的字形）。另请参阅this。

如果为行中的按钮提供了更多高度，它们将整齐地居中对齐文本。

Answer 6

我建议您使用TextView而不是Button，因为它的边距较少，并且可以让您更好地控制如何放置文本。（一般来说，我很少使用按钮，但往往会使其他视图TextView，ImageView，......可点击）

 <TextView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="5"
    android:layout_weight="1"
    tools:ignore="HardcodedText"
    android:clickable="false"
    android:textSize="90dp"
    android:textColor="?attr/color1"
    android:gravity="center"
    android:paddingLeft="@dimen/normal_margin"
    android:paddingRight="@dimen/normal_margin"
    android:padding="0dp" />

如果您需要某种关于是否按下TextView的指示，您可以添加选择器作为背景。为此，请查看here。

最后，如果您希望文字适合任何可能的视图尺寸，请查看AutoFitTextView。

Answer 7

你不能使用上部间距进行居中，因为它属于字体。我的意思是每种字体都有上升和下降指标。见下图。

enter image description here

因此当android中心文本时，它计算它的整体高度（包括上部nad底部间距）。并且中心导致了rect。您可以使用FontMetrics查看字体的acsent和descent值。例如。我们得到了Paint.FontMetrics fm = textView.getPaint().getFontMetrics();：

fm = {android.graphics.Paint$FontMetrics@3668}
ascent = -25.976562
bottom = 7.5878906
descent = 6.8359375
leading = 0.0
top = -29.572266

Intresting？那么如何删除顶部和底部间距并使用此空间来居中字体？我看到两个解决方案：

创建自定义组件和布局文本，不包括这些间距。如果你只想要单行文字，这将很容易。请参阅TextView代码。
我们知道间距，因此我们可以相应地移动文本。设置翻译为一个按钮内容。要删除顶部间距，您可以执行以下操作：
button.setTranslationY(fm.top - fm.ascent);如果您希望文字居中如果没有间距，请执行以下操作：button.setTranslationY((fm.top - fm.ascent) + (fm.bottom - fm.descent));

Answer 8

我认为使用 AutoFitTextView

实现这一目标的最简单方法

您可以通过此链接获取此库：https://github.com/grantland/android-autofittextview

它将使用当前高度和宽度动态调整文本大小。

我希望这会对你有所帮助。

祝你好运。

Answer 9

尝试使用负顶部填充，例如：

<Button
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="5"
    android:layout_weight="1"
    tools:ignore="HardcodedText"
    android:clickable="false"
    android:textSize="90dp"
    android:textColor="?attr/color1"
    android:gravity="center"
    android:paddingLeft="@dimen/normal_margin"
    android:paddingRight="@dimen/normal_margin"
    android:paddingTop="-2dp" />

您可以使用它，并获得顶部填充所需的值。当然，您可以使用@dimen。

为不同的屏幕密度使用不同的值

中心文本垂直独立于视图高度？

9 个答案: