將兩個按鈕之間的屏幕中心對齊文本，其中一個可能不可見

Question

這很難解釋，請耐心等待。

我有一個頂級菜單欄，在設計中已經給我（這是一個端口）。

菜單欄有兩個按鈕，一個在菜單的左側，一個在右側，兩個按鈕之間有文本標題。

文本視圖是單行，所以如果文本比視圖更長，它會在最後使用省略號縮短。文本應居中在按鈕之間的顯示寬度內。文本是當前內容的標題，可以縮短。實際上，在大多數設備上，只有一兩個奇數字被切掉。

如果兩個按鈕都可見，那麼它非常簡單，但取決於我在應用程序中的位置，右側按鈕可能不可見。當它不可見時，我使用View.GONE。現在的問題是，文本現在填充了所需的剩餘空間，但居中在剩餘空間中，而不是在顯示寬度內，因此短片段的文本右移了第一個按鈕的寬度。

使用View.INVISIBLE而不是View.GONE並不是答案，因爲文本會正確居中，但不會使用可用空間來最小化文本的縮短。

這裏是我想要達到的效果：

兩個按鈕可見：

--------------------------------------------------------------- 
| Left button | Title text centred in display | Right button | 
--------------------------------------------------------------- 

右按鈕隱藏

--------------------------------------------------------------- 
| Left button | Title text centred in display    | 
--------------------------------------------------------------- 

右按鈕隱藏着長文本顯示省略號。這是我正在尋找的。

--------------------------------------------------------------- 
| Left button | A really long piece of title text centred ...| 
--------------------------------------------------------------- 

下面是我在隱藏右鍵時注意到文本不居中。

--------------------------------------------------------------- 
| Left button |  Title text centred in this space  | 
--------------------------------------------------------------- 

這是我目前使用的佈局。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:background="@drawable/activitytitlegradient"  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal"  
    android:gravity="center_vertical"> 

    <ImageView android:id="@+id/mainMenuLeftButton" 
       android:background="#00ffffff" 
       android:layout_gravity="center_vertical"   
      android:src="@drawable/rr_boat_bow" 
      android:scaleType="fitStart"   
      android:layout_weight="1" 
      android:layout_height="34dip" 
      android:layout_width="wrap_content"/> 

    <TextView android:id="@+id/mainMenuTitle" 
        android:layout_weight="10" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content"   
      android:paddingLeft="2dp" 
      android:background="#00ffffff"   
      android:text="Reference" 
      android:singleLine="true" 
      android:textSize="19sp" 
      android:textStyle="bold" 
      android:textColor="#ffffff"  
      android:gravity="center_horizontal|center_vertical" /> 


    <Button android:id="@+id/mainMenuRightButton" 
      android:background="@drawable/buttonborder" 
      android:text="Edit"  
      android:textSize="13sp" 
      android:textColor="#ffffff" 
      android:textStyle="bold" 
      android:layout_margin="3dip" 
      android:padding="3dip" 
      android:layout_weight="1"     
      android:layout_height="35dip" 
      android:layout_width="wrap_content" 
      android:visibility="gone"/> 


</LinearLayout> 

第一個按鈕是作爲一個ImageView實現的，以啓用我在其他地方做的其他一些（不相關的）效果。該文本是硬編碼只是爲了幫助鋪設。我的代碼根據需要更改文本。

我可以用自定義視圖來做到這一點，但我確定必須有一種方法可以用標準框架來做到這一點。

謝謝你的任何線索......

Answer 1

我一直夢想着這個問題 - 是真的！我已經在半夜醒來想着如何解決這個問題。我在下面發佈的代碼非常糟糕，每次看它都會冒犯我的眼睛。編寫一個自定義小部件只是爲了集中一些文本的想法感覺就像拿着獵槍到我鼻子上的一個疙瘩。所以，我再次陷入困境，我對這個解決方案變得多麼容易感到尷尬。

訣竅是使用相對佈局，對齊右側的第二個按鈕並將文本居中定位到父級。關鍵的標籤是：

android:layout_centerInParent="true" 

下面是從佈局XML相關的片段（我已經刪除了不相關的標記，以節省空間）：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/mainMenuLayout" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" > 

    <ImageView 
     android:id="@+id/mainMenuLeftButton" 
     android:layout_width="wrap_content" 
     android:layout_height="34dip" 
     android:scaleType="fitStart" 
     android:src="@drawable/rr_boat_bow" /> 

    <Button 
     android:id="@+id/mainMenuRightButton" 
     android:layout_width="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_centerVertical="true" 
     android:text="Edit" 
     android:visibility="gone" /> 

<TextView 
     android:id="@+id/mainMenuTitle" 
     android:layout_toRightOf="@+id/mainMenuLeftButton" 
     android:layout_toLeftOf="@+id/mainMenuRightButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:gravity="center_vertical" 
     android:layout_centerInParent="true" 
     android:singleLine="true"/> 

</RelativeLayout> 

我會睡不好覺今晚。沒有繁瑣的代碼，沒有自定義的類。只有XML的UI - 甜美！

希望它有幫助..

Answer 2

使用的RelativeLayout代替的LinearLayout

<RelativeLayout 
    android:background="@drawable/activitytitlegradient"  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"  
    android:gravity="center_vertical"> 
    <ImageView android:id="@+id/mainMenuLeftButton" 
     android:background="#00ffffff" 
     android:layout_gravity="center_vertical"   
     android:src="@drawable/rr_boat_bow" 
     android:scaleType="fitStart"   
     android:layout_alignParentLeft="true" 
     android:layout_height="34dip" 
     android:layout_width="wrap_content"/> 
    <TextView android:id="@+id/mainMenuTitle" 
     android:layout_width="wrap_content" // or fiexed like 400dp 
     android:layout_height="wrap_content"   
     android:paddingLeft="2dp" 
     android:background="#00ffffff"   
     android:text="Reference" 
     android:singleLine="true" 
     android:textSize="19sp" 
     android:textStyle="bold" 
     android:textColor="#ffffff"  
     android:layout_toRightOf="@id/mainMenuLeftButton" 
     android:gravity="center_horizontal|center_vertical" /> 
    <Button android:id="@+id/mainMenuRightButton" 
     android:background="@drawable/buttonborder" 
     android:text="Edit"  
     android:textSize="13sp" 
     android:textColor="#ffffff" 
     android:textStyle="bold" 
     android:layout_margin="3dip" 
     android:padding="3dip" 
     android:alignParentRight="true" 
     android:layout_height="35dip" 
     android:layout_width="wrap_content" 
     android:visibility="invisible"/> 
</RelativeLayout> 

看看是否有用，或者你可以添加一些規則，如Android：layout_xxxxx，它與RelativeLayout的更flexable。

編輯：隱形& toRightOf如說在評論

Answer 3

OK，我最後寫一個靜態方法來操縱佈局。作爲擴展布局的自定義類將會更好，但是我推遲了時間，這是最快的解決方案。如果我抓了一段時間，我會寫一個自定義類或可能切換到使用ActionBar。

無論如何，如果它可以幫助其他人，這裏是我如何解決它：

public static void hideMainMenuRightButton(Context _context, RelativeLayout mainMenu) { 

    // remove the right button from the view 
    mainMenu.findViewById(R.id.mainMenuRightButton).setVisibility(View.GONE); 

    // get the width of the title text 
    final Paint p = new Paint(); 
    final TextView tvTitle = (TextView) mainMenu.findViewById(R.id.mainMenuTitle); 
    // scale the width in pixels according to density 
    final float densityMultiplier = _context.getResources().getDisplayMetrics().density; 
    final float scaledPx = tvTitle.getTextSize() * densityMultiplier; 
    p.setTextSize(scaledPx); 
    // measure the width 
    int textWidth = (int) p.measureText(tvTitle.getText().toString()); 

    // get the width of the textview (screen width minus left button width) 
    final int displayWidth = ((WindowManager) _context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay().getWidth(); 
    int leftButtonWidth = ((ImageView) mainMenu.findViewById(R.id.mainMenuLeftButton)).getMeasuredWidth(); 
    int textViewWidth = displayWidth - leftButtonWidth; 

    if (textWidth==0 || leftButtonWidth==0){return;} 

    // set the left padding of the textview to centre its text in the display width 
    tvTitle.setGravity(Gravity.CENTER_VERTICAL); 
    if (textWidth < textViewWidth) { 
     tvTitle.setPadding((textViewWidth - textWidth)/2, 0, 0, 0); 
    } else { // not enough room for the text to centre 
     tvTitle.setPadding(0,0,0,0); 

    } 
}