具有 4 个单独 "borders" 的按钮布局：无法在中心显示文本

Question

我创建了一个按钮布局，其中包含 4 个单独的 "border" 视图（左、右、上、下），字母数字文本位于中心。我使用 4 个单独的边框视图，因此我可以有选择地隐藏（或不隐藏）每一边。在网格布局中使用时，我打算在每个按钮的基础上启用边框以在按钮之间创建网格线（想想井字游戏线）。

但我似乎无法将字母数字文本在按钮内垂直居中。任何帮助将不胜感激。

这里是相关的 xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/dialPadButton"
    android:id="@+id/pad_btn_2"
    android:orientation="horizontal"
    android:background="@android:color/darker_gray">

    <!-- Left Border -->
    <View style="@style/dialPadButtonVerticalBorderStyle"
        android:id="@+id/left_border"
        android:visibility="visible"
        android:layout_alignParentLeft="true"
        ></View>

    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Top Border -->
        <View style="@style/dialPadButtonHorizontalBorderStyle"
            android:id="@+id/top_border"
            android:visibility="visible"
            android:layout_alignParentTop="true"
            ></View>

        <!-- Alpha-numeric text -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:orientation="vertical">
            <TextView style="@style/dialPadButtonNumber"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAlignment="center"
                android:textSize="@dimen/dial_number_text_size"
                android:text="2"
                android:layout_gravity="center" />
            <TextView style="@style/dialPadButtonText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="@dimen/dial_letter_text_size"
                android:text="abc"
                android:layout_gravity="center" />
        </LinearLayout>

        <!-- Bottom Border -->
        <View style="@style/dialPadButtonHorizontalBorderStyle"
            android:id="@+id/bottom_border"
            android:visibility="visible"
            android:layout_alignParentBottom="true"
            ></View>
    </RelativeLayout>

    <!-- Right Border -->
    <View style="@style/dialPadButtonVerticalBorderStyle"
        android:id="@+id/right_border"
        android:visibility="visible"
        android:layout_alignParentRight="true"
        ></View>

</RelativeLayout>

作为额外参考，这里是样式定义：

<resources>

    <style name="dialPadButton">
        <item name="android:layout_width">100dp</item>
        <item name="android:layout_height">100dp</item>
        <item name="android:fontFamily">sans-serif</item>
    </style>

    <style name="dialPadButtonNumber">
        <item name="android:textColor">#00FF00</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="dialPadButtonText">
        <item name="android:textColor">#00FF00</item>
        <item name="android:layout_marginTop">-10dp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="dialPadButtonHorizontalBorderStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">2dp</item>
        <item name="android:background">#EEEEEE</item>
    </style>

    <style name="dialPadButtonVerticalBorderStyle">
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_width">2dp</item>
        <item name="android:background">#EEEEEE</item>
    </style>


</resources>

Answer 1

只需添加

       android:gravity="center"

对于包含两个文本视图的线性布局，线性布局定义为与父级匹配，因此您需要子级为 gravity:center

像这样：

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:orientation="vertical">
        <TextView style="@style/dialPadButtonNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:textSize="25sp"
            android:text="2"
            android:layout_gravity="center" />
        <TextView style="@style/dialPadButtonText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:text="abc"
            android:layout_gravity="center" />
    </LinearLayout>

Answer 2

你可以做到这些

android:gravity="center"

或

android:layout_height="wrap_content"

在你的 LinearLayout

具有 4 个单独 "borders" 的按钮布局：无法在中心显示文本

Button layout with 4 separate "borders": Can't get text in center

android

android-layout

android-linearlayout

android-relativelayout

或