Выравнивание текста по центру экрана между 2 кнопками, одна из которых может быть не видна

Question

Это трудно объяснить, пожалуйста, потерпите меня.

У меня есть верхняя строка меню в дизайне, который мне был дан (это порт).

Панель менюимеет две кнопки, одну слева от меню, одну справа и текстовый заголовок между двумя кнопками.

Текстовое представление состоит из одной строки, поэтому, если текст длиннее, чем текстовое представление, оно укорачивается с многоточием в конце.Текст должен быть центрирован по ширине экрана между кнопками.Текст является заголовком для текущего контента, и это нормально, что он может быть сокращен.На практике на большинстве устройств отсекается только нечетная буква или две.

Если обе кнопки видны, то это очень просто, однако, в зависимости от того, где я нахожусь в приложении, правая кнопка может не отображаться.видимый.Когда он не виден, я использую View.GONE.Проблема состоит в том, что текст теперь заполняет оставшееся пространство, которое желательно, но центрируется в этом оставшемся пространстве, а не в пределах ширины дисплея, так что короткий фрагмент текста смещается вправо на ширину первой кнопки.

Использование View.INVISIBLE вместо View.GONE не является ответом, поскольку текст затем корректно центрируется, но не использует доступное пространство для минимизации сокращения текста.

Вот эффект I 'm пытается достичь:

Обе видимые кнопки:

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

Скрытая правая кнопка

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

Скрытая правая кнопка с длинным текстом, показывающим elipsis.Это то, что я ищу.

---------------------------------------------------------------
| 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 - сладкий!

Надеюсь, это поможет ..

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.

EDIT: invisible & toRightOfкак ответил в комментарии

Answer 3

ОК, в итоге я написал статический метод для управления макетом. Было бы лучше как пользовательский класс, который расширяет макет, но у меня не хватает времени, и это было самое быстрое решение. Если я вернусь назад, я напишу собственный класс или, возможно, переключусь на использование 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);

    }
}