帶有動態文本的右對齊按鈕

Question

在我的用戶界面中，我有一個帶有RelativeLayout的片段。 在此RelativeLayout的底部，我有兩個按鈕：一個應該在左側，另一個應該在右側，它們之間有空白。 左邊的是靜態文本（但是由於該應用將被翻譯，所以我不知道它將是多少寬度）。 右邊的文本可以任意更改。

由於我已經有了RelativeLayout，因此我開始嘗試將它們放在RelativeLayout內，如下所示：

<Button
    android:id="@+id/button_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:text="@string/left" />

<Button
    android:id="@+id/button_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:text="@string/right" />

但這有一個問題，如果右側按鈕中的文本太長，它將與左側按鈕重疊。

接下來，我嘗試通過添加android:layout_toRightOf="@+id/button_left"來限制右側按鈕的左側邊緣，但android:layout_toRightOf="@+id/button_left" ，右側按鈕將始終填充可用寬度。 當右側按鈕中的文本很短時，我希望它縮小以在它和左側按鈕之間留一個間隙。

接下來，我嘗試使用LinearLayout，因此可以在按鈕上設置layout_gravity，如下所示：

<LinearLayout
    android:id="@+id/buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" >

    <Button
        android:id="@+id/button_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/left" />

    <Button
        android:id="@+id/button_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:drawableLeft="@drawable/pass"
        android:text="@string/right" />

</LinearLayout>

仍然沒有喜悅。 我希望它能正常工作，但是右側按鈕保持在左側按鈕的右側，而不是停留在屏幕的右側。 我可以在布局編輯器中看到LinearLayout正確地填充了屏幕的寬度，但是該按鈕卻頑固地停留在它的朋友旁邊。

我也嘗試在右側按鈕上添加android:layout_weight="1" ，但這又使其始終擴展以填充可用空間。

接下來，我嘗試在按鈕之間添加一個空的View，以展開並向右推動右按鈕，如下所示：

<LinearLayout
    android:id="@+id/buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" >

    <Button
        android:id="@+id/button_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/left" />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <Button
        android:id="@+id/button_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/right" />

</LinearLayout>

當文本較短時，此效果很好，就像我原來的RelativeLayout一樣，但是現在當右側按鈕上的文本較長時，其寬度受屏幕寬度的限制，而不是可用空間的限制，因此它會擴展屏幕的右邊緣。 再次，我可以在布局編輯器中看到LinearLayout具有正確的寬度，但是該按鈕將其父對象的邊界擴展到了我們身邊。 即使按鈕具有android:layout_width="match_parent"也會發生這種情況。 奇怪的是，增加右側按鈕上的layout_gravity使其變小，直到它適合可用空間為止，但是當然也使它在文本較小時填充該空間。

我真不敢相信，要做到這一點很難。 我已經在SO上看到了六個類似的問題，但是它們都有簡單的解決方法。 如果按鈕文本是固定的，則可以手動將邊距設置為固定寬度。 如果展開的小部件是TextView而不是Button，則可以讓它展開並使用android:gravity在小部件內移動文本，但不能使用按鈕進行操作，因為背景和邊框在屏幕。

Answer 1

事實證明，添加LinearLayout是錯誤的方法。 使用android:layout_toRightOf="@+id/button_left" android:layout_alignParentRight="true"可以與TextView配合使用，因為它可以吸收可用空間而不改變其外觀。 無需嘗試更改布局，我只需要使用可以擴展以填充可用空間並包含Button的內容：FrameLayout。 這是工作代碼，仍然位於我的根目錄RelativeLayout中：

<Button
    android:id="@+id/button_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:text="@string/left" />

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_toRightOf="@+id/button_left" >

    <Button
        android:id="@+id/Turn_button_pass"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/right" />

</FrameLayout>

現在，FrameLayout總是占據左側按鈕右側的所有空間，並使用android:layout_gravity="right"在該空間內android:layout_gravity="right"按鈕。

這個答案只增加了一個額外的布局，但是如果有人只能使用現有的RelativeLayout來做到這一點，以最大程度地減少布局中ViewGroup的數量，我將接受它作為解決方案。

Answer 2

您可以只使用TextView並使它看起來像一個按鈕。 創建一個虛擬按鈕，提取背景，然后以編程方式將該背景設置為文本字段。 （未經測試，但應該給它一個按鈕的外觀）

Drawable d = button1.getBackground();
textView1.setBackground(d);

那么您只需設置onClickListener即可產生所需的內容。 TextView將在您的第一個布局中代替“ button_right”。

**編輯

您的xml看起來像這樣

<Button
 android:id="@+id/button_left"
android:layout_width="wrap_content" 
android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_alignParentLeft="true"
android:text="@string/left" /> 

<TextView
    android:id="@+id/button_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"     
    android:layout_alignParentRight="true" 
    android:maxEms="10"
    android:text="TextView" />

Answer 3

如果可以忍受約束，那么右鍵僅可以占用最多可用空間的一半，這可以為您提供解決方案：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_weight="1" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A short text" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="A very long text which is limited to one half of the available space" />

    </RelativeLayout>
</LinearLayout>