将屏幕中央的文本对齐在2个按钮之间,其中一个按钮可能不可见

时间:2012-01-29 07:31:45

标签: android android-layout

这很难解释,请耐心等待。

我的设计中有一个顶级菜单栏(已经给了我一个端口)。

菜单栏有两个按钮,一个位于菜单左侧,一个位于右侧,两个按钮之间有一个文本标题。

文本视图是单行的,因此如果文本比视图长,则会缩短末尾的省略号。文本应位于按钮之间的显示宽度内。该文本是当前内容的标题,可以缩短它。实际上,在大多数设备上,只有奇数字母或两个字母被切断。

如果两个按钮都可见,那么它非常简单,但根据我在应用程序中的位置,右侧按钮可能不可见。当它不可见时,我使用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,以启用我在其他地方执行的其他一些(非相关)效果。文本是硬编码的,只是为了帮助布局。我的代码根据需要更改了文本。

我可以使用自定义视图执行此操作,但我确信必须有一种方法可以使用标准框架执行此操作。

感谢您提供任何线索......

3 个答案:

答案 0 :(得分:1)

使用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。

编辑:隐形&amp; toRightOf在评论中回复

答案 1 :(得分: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 - 甜蜜!

希望有所帮助......

答案 2 :(得分:0)

好的,我最后编写了一个静态方法来操作布局。作为一个扩展布局的自定义类会更好,但是我推迟了时间,这是最快的解决方案。如果我抓回一些时间,我会写一个自定义类,或者可能切换到使用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);

    }
}