2015-02-01 5 views
9

Я делаю все возможное, чтобы центрировать текст по вертикали, но я не могу этого сделать. Проблема заключается в том, что у меня есть строки кнопок с высотой = fill_parent и весом = 1, а также строки становятся меньше мой текст начинает касаться дна зрения, как показано здесь:Текст центра вертикально независимо от высоты представления?

enter image description here

Я попытался удалить отступы , маржа, изменение высоты и т. д. Но ничего не получается.

Как выровнять его по вертикали, даже когда размер текста близок к высоте представления?

Вот код для представления, содержащего номер 5:

<Button 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:text="5" 
     android:layout_weight="1" 
     tools:ignore="HardcodedText" 
     android:clickable="false" 
     android:textSize="90dp" 
     android:textColor="?attr/color1" 
     android:gravity="center" 
     android:paddingLeft="@dimen/normal_margin" 
     android:paddingRight="@dimen/normal_margin" 
     android:padding="0dp" /> 
+0

какой 'ViewGroup' вы используете? Я думаю, что ваше решение - это 'Gravity.CENTER' для' match_parent' детей – Elltz

+0

У вас есть причина использовать 'android: textSize =" 90dp "' ?? попробуйте утвержденную директиву и посмотрите «android: textSize =« 90sp »' – Elltz

+0

hi @ Eltz, приложение предназначено для людей с низким зрением и уже использует максимальный размер текста. Поэтому, если я использую SP, я могу рискнуть выбрать большой размер текста и нарушить пользовательский интерфейс. Все кнопки находятся в TableRow, я попытался изменить высоту на match_parent на кнопке, и у меня все еще есть та же проблема. Тем не менее, я не думаю, что это имеет какое-то отношение к высоте. – lisovaccaro

ответ

2

В соответствии с моим советом, если у вас есть два варианта сделать такой макет и получить из проблемы, которую вы имеете.

1. Использование GridView

Использование GridView вы будете иметь равное место во всех четырех направлениях (слева, справа, сверху, снизу). Вам не нужно беспокоиться о равном расстоянии для элемента сетки.

<GridView 
    android:id="@+id/album_list" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:layout_weight="1" 
    android:cacheColorHint="#00000000" 
    android:gravity="center" 
    android:numColumns="auto_fit" 
    android:stretchMode="spacingWidthUniform" 
    android:drawSelectorOnTop="true"/> 

Просто попробуйте код, с которым вы будете иметь одинаковое распределение в сетке.

2. Использование TableLayout и TableRow

Пожалуйста, проверьте ниже код, чтобы использовать TableLayout и TableRow с атрибутом иметь все вид одинаково расположены. Даже если вы уменьшите высоту и ширину TableLayout, она будет оставаться одинаково устроенной в этом представлении.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent" 
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> 

<TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" android:layout_height="fill_parent" 
    android:layout_margin="5dp"> 
<TableRow android:weightSum="3" 
    android:layout_weight="1" android:gravity="center"> 
    <Button android:gravity="center" 
     android:textSize="13sp" android:textColor="#000000" 
     android:text="1" android:layout_weight="1"/> 
    <Button android:gravity="center" 
     android:textSize="13sp" android:textColor="#000000" 
     android:text="1" android:layout_weight="1"/> 
    <Button android:gravity="center" 
     android:textSize="13sp" android:textColor="#000000" 
     android:text="1" android:layout_weight="1"/> 
</TableRow> 

    <TableRow android:weightSum="3" android:layout_weight="1" android:gravity="center"> 
     <Button android:gravity="center" 
      android:textSize="13sp" android:textColor="#000000" 
      android:text="1" android:layout_weight="1"/> 
     <Button android:gravity="center" 
      android:textSize="13sp" android:textColor="#000000" 
      android:text="1" android:layout_weight="1"/> 
     <Button android:gravity="center" 
      android:textSize="13sp" android:textColor="#000000" 
      android:text="1" android:layout_weight="1"/> 
    </TableRow> 

    <TableRow android:weightSum="3" android:layout_weight="1" android:gravity="center"> 
     <Button android:gravity="center" 
      android:textSize="13sp" android:textColor="#000000" 
      android:text="1" android:layout_weight="1"/> 
     <Button android:gravity="center" 
      android:textSize="13sp" android:textColor="#000000" 
      android:text="1" android:layout_weight="1"/> 
     <Button android:gravity="center" 
      android:textSize="13sp" android:textColor="#000000" 
      android:text="1" android:layout_weight="1"/> 
    </TableRow> 
</TableLayout> 

Пожалуйста, найти выход из этого TableLayout. enter image description here

Сообщите мне, если проблема устранена. Если нет, я буду рад помочь вам снова.

Наслаждайтесь Coding ... :)

1

дизайн это с помощью представления сетки у вас будет немного больше функциональных возможностей. иначе возьмите один Linear Layout внутри, который установит еще три горизонтальные ориентации горизонтальной ориентации и вес sum = 3, поместите каждую кнопку на детскую раскладку и дайте макету вес = 1 для каждой кнопки.

+0

Установите макет гравитации как центр на кнопку – khubaib

+0

Я предполагаю, что это не будет необходимо, так как мы устанавливаем вес .. –

1

Это не означает, что текст «5» не центрирован. Текст «5» отображается чуть ниже центра, потому что кнопке не хватает места для размещения текстового содержимого. Несмотря на то, что он снабжен достаточной высотой, текст «5» будет казаться немного выше центра. Это связано с тем, что есть символы («y», «g» и т. Д.) С большим спусками, чем «5» (максимально возможное восхождение и спуск учитываются при компоновке текста, даже жесткие ваши тексты не содержат более высокого глифа или глифа с ненулевым спуск). См. Также this.

Если для кнопок в строке предусмотрено больше высоты, они аккуратно центрируют их тексты.

2

Если эта кнопка находится в линейном режиме с вертикальной ориентацией. Поскольку вы определяете вес, вы хотите, чтобы высота была «0dp» вместо «fill_parent». Чтобы сделать центр текста вертикальным. Вы пытались андроид: gravity: "center_vertical"?

1

Я бы предложил использовать TextView вместо Button, потому что у этого есть менее хитрые поля и дает вам больше контроля над размещением вашего текста. (В общем, я только редко используют кнопки, но, как правило, делают другие взгляды TextView, ImageView ... кликабельны вместо этого)

<TextView 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:text="5" 
    android:layout_weight="1" 
    tools:ignore="HardcodedText" 
    android:clickable="false" 
    android:textSize="90dp" 
    android:textColor="?attr/color1" 
    android:gravity="center" 
    android:paddingLeft="@dimen/normal_margin" 
    android:paddingRight="@dimen/normal_margin" 
    android:padding="0dp" /> 

В случае, если вам нужно какое-то указание того, был ли или нет TextView нажатой, может добавить селектор в качестве фона. Для этого посмотрите here.

Наконец, если вы хотите, чтобы ваш текст соответствовал любым возможным размерам взглядов, взгляните на AutoFitTextView.

1

Вы не можете использовать верхний интервал для центрирования, потому что он принадлежит шрифту. Я имею в виду, что каждый шрифт имеет метрику подъема и спуска. См. Рис. Ниже.

enter image description here

так, когда текст андроид центров он вычислил его общая высота (в том числе верхнего интервала нижнего над). А центры оказались прямыми. Вы можете получить FontMetrics, чтобы увидеть значения acsent и descent. .позвонив по номеру Paint.FontMetrics fm = textView.getPaint().getFontMetrics();, мы получаем:

fm = {[email protected]} 
ascent = -25.976562 
bottom = 7.5878906 
descent = 6.8359375 
leading = 0.0 
top = -29.572266 

Интересует? Итак, как удалить верхний и нижний интервал и использовать это пространство для центрирования шрифта? Я вижу два решения:

  • создать пользовательский компонентный и макет текста, исключая эти пробелы. Если вам нужен только текст в одной строке, это будет легко. См. Код TextView.

  • Мы знаем расстояние, поэтому мы можем переместить текст соответствующим образом. Установите перевод на a Содержимое кнопки. Для того, чтобы удалить верхний интервал вы можете сделать:
    button.setTranslationY(fm.top - fm.ascent); Если вы хотите текст центрируется без интервала, сделайте следующее: button.setTranslationY((fm.top - fm.ascent) + (fm.bottom - fm.descent));

1

Я думаю, что самый простой способ добиться этого с помощью AutoFitTextView

Вы можете получите эту библиотеку по этой ссылке: https://github.com/grantland/android-autofittextview

Он будет динамически изменять размер текста с текущей высотой и шириной.

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

Удачи.

2

Попробуйте

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:layout_alignParentBottom="true" 
    android:layout_below="@+id/dialer_title" 

    android:orientation="vertical" 
    > 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="0.2" > 

     <ImageButton 
      android:id="@+id/btn1" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_1" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_1_no_vm" /> 

     <ImageButton 
      android:id="@+id/btn2" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_2" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_2" /> 

     <ImageButton 
      android:id="@+id/btn3" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_3" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_3" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="0.2" > 

     <ImageButton 
      android:id="@+id/btn4" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_4" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_4" /> 

     <ImageButton 
      android:id="@+id/btn5" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_5" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_5" /> 

     <ImageButton 
      android:id="@+id/btn6" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_6" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_6" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="0.2" > 

     <ImageButton 
      android:id="@+id/btn7" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_7" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_7" /> 

     <ImageButton 
      android:id="@+id/btn8" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_8" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_8" /> 

     <ImageButton 
      android:id="@+id/btn9" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_9" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_9" /> 
    </LinearLayout> 

    <LinearLayout 
     style="@style/DialPadRow" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="0.2" > 

     <ImageButton 
      android:id="@+id/btnStar" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_astr" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_star" /> 

     <ImageButton 
      android:id="@+id/btn0" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_0" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_0" /> 

     <ImageButton 
      android:id="@+id/btnHash" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_hash" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="false" 
      android:src="@drawable/dial_num_hash" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="0.2" > 

     <ImageButton 
      android:id="@+id/btnContacts" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/string_menu_contacts" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="true" 
      android:src="@drawable/selector_dial_contact_b" /> 

     <ImageButton 
      android:id="@+id/btnCall" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/string_menu_call" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="true" 
      android:src="@drawable/dial_num_call" /> 

     <ImageButton 
      android:id="@+id/btnDelete" 
      style="@style/DialPadButton" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="0.33" 
      android:contentDescription="@string/desc_backspace" 
      android:scaleType="centerCrop" 
      android:soundEffectsEnabled="true" 
      android:src="@drawable/dial_num_delete" /> 
    </LinearLayout> 
</LinearLayout> 

Это создаст дилер с одинаковым размером кнопки телефона. Для стиля = "@ style/DialPadButton" создайте стиль с именем DialPadButton и настройте кнопки по своему желанию. В моем случае я добавил элемент name = "android: layout_margin" со значением 5dp.

1

Попробуйте использовать отрицательный верхний отступ, например:

<Button 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:text="5" 
    android:layout_weight="1" 
    tools:ignore="HardcodedText" 
    android:clickable="false" 
    android:textSize="90dp" 
    android:textColor="?attr/color1" 
    android:gravity="center" 
    android:paddingLeft="@dimen/normal_margin" 
    android:paddingRight="@dimen/normal_margin" 
    android:paddingTop="-2dp" /> 

Вы можете играть с этим, и получить необходимое значение для верхней прокладки. Разумеется, вы можете использовать разные значения для разных плотностей экрана, используя @dimen.

Смежные вопросы