Question

我创建了一个按钮布局，其中包含4个单独的＆＃34; border＆＃34;视图（左，右，顶部，底部）和意图位于中心的字母数字文本。我使用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"

到包含两个文本视图的linearlayout，线性布局定义为匹配父级，因此您需要子项为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:layout_height="wrap_content"

或

LinearLayout

在<FlatButton onClick={e => this.setState({ cards: [ ...this.state.cards, 'asdf'] })}>Add new card</FlatButton>

上

按钮布局有4个单独的＆＃34;边框＆＃34;：无法在中心获取文本

2 个答案:

或