Как выровнять два текста по горизонтали с фоном, используя любой макет в Android? - PullRequest
1 голос
/ 25 апреля 2019

Я использую два текстовых представления с фоном, и я хочу выровнять оба текстовых представления рядом с некоторым запасом между ними.Я пробовал этот код, но он не работает с небольшими устройствами.

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_marginBottom="10dp"
                android:orientation="horizontal"
                android:weightSum="2">


                <TextView
                    android:id="@+id/btn_back"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:layout_weight="1"
                    android:background="@drawable/bg_rounded_green_1"
                    android:gravity="center"
                    android:layout_gravity="top"
                    android:paddingTop="3dip"
                    android:paddingBottom="3dip"
                    android:text="Save &amp; Close"
                    android:textColor="@android:color/white"
                    android:textSize="13sp"
                    android:minLines="2"/>


                <TextView
                    android:id="@+id/btn_next"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top"
                    android:layout_marginTop="10dip"
                    android:layout_weight="1"
                    android:background="@drawable/bg_rounded_green_1"
                    android:gravity="center"
                    android:minLines="2"
                    android:paddingTop="3dip"
                    android:paddingBottom="3dip"
                    android:text="@string/label_next_shipping_method"
                    android:textColor="@android:color/white"
                    android:textSize="13sp" />

            </LinearLayout>


        </LinearLayout>

image

Ответы [ 8 ]

1 голос
/ 25 апреля 2019

Я проверил ваш код, он вполне в порядке, но для получения нужного макета требуются некоторые изменения.

Просто добавьте android:gravity="center" к вашему LinearLayout

Удалить android:layout_gravity="top" и android:layout_marginTop="10dp" из 'textviews`

Попробуйте код ниже, в коде ниже я добавляю View и изменяю android:layout_weight, чтобы сделать макет более отзывчивым.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_marginBottom="10dp"
    android:orientation="horizontal"
    android:gravity="center_vertical">

    <View
        android:layout_weight=".03"
        android:layout_width="0dp"
        android:layout_height="0dp"/>
    <TextView
        android:id="@+id/btn_back"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".45"
        android:background="@drawable/bg_rounded_green_1"
        android:gravity="center"
        android:paddingTop="3dip"
        android:paddingBottom="3dip"
        android:text="Save &amp; Close"
        android:textColor="@android:color/white"
        android:textSize="13sp"
        android:minLines="2"/>
    <View
        android:layout_weight=".04"
        android:layout_width="0dp"
        android:layout_height="0dp"/>

    <TextView
        android:id="@+id/btn_next"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".45"
        android:background="@drawable/bg_rounded_green_1"
        android:gravity="center"
        android:minLines="2"
        android:paddingTop="3dp"
        android:paddingBottom="3dp"
        android:text="Next - Select Shipping \nMethod"
        android:textColor="@android:color/white"
        android:textSize="13sp" />
    <View
        android:layout_weight=".03"
        android:layout_width="0dp"
        android:layout_height="0dp"/>
</LinearLayout>

Выводкак на картинке ниже:

enter image description here

Надеюсь, это сработает для вас.

0 голосов
/ 25 апреля 2019

Я думаю, что другие ответы хороши, и некоторые могут решить вашу проблему (@ Ответ Android Geek, например, действительно хорошо сделан) , но никто из них не упомянул constraintLayout , поэтому я хочу предложить другое решение.


Прежде чем мы начнем, позвольте мне объяснить, почему я хочу добавить решение constraintLayout, а не просто использовать LinearLayout, как упоминалось:

Когда вы используете LinearLayout с вложенными представлениями внутри них и, кроме того, с помощью атрибутов android:layout_weight и android:weightSum, вы можете обнаружить, что ваша производительность макетов пострадала (хотя в этом случае только с двумя представлениями это не повлияет на ваш макет). Это может произойти, потому что для отображения всех ваших вложенных представлений требуется больше вычислений.


Хорошо, давайте углубимся в код - используя constraintLayout, вы можете просто использовать chain между двумя представлениями:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
 android:layout_height="match_parent">


<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:text="Save"
    app:layout_constraintBottom_toBottomOf="@+id/button2"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button2" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:text="Next"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

И получите желаемый результат:

enter image description here


Теперь, если вы уже прошли все вышеперечисленное в ответе, вам может быть интересно - возможно, я останусь с LinearLayout, ну, вы можете, и это будет ваше решение, но вот некоторые преимущества ConstraintLayout:

  • Ваш макет будет реагировать на все размеры экрана, поэтому нет необходимости создавать макет для каждого размера экрана.

  • Создание макета намного быстрее с ConstraintLayout, это может сэкономить много времени.

  • Почти во всех случаях производительность вашего макета будет лучше по сравнению с тем же макетом, сделанным с LinearLayout


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

0 голосов
/ 25 апреля 2019

Попробуйте это:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="horizontal"
        android:gravity="center">

        <TextView
            android:id="@+id/btn_back"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="@drawable/bg_rounded_green_1"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="Save &amp; Close"
            android:textColor="@android:color/white"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/btn_next"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="@drawable/bg_rounded_green_1"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="@string/label_next_shipping_method"
            android:textColor="@android:color/white"
            android:textSize="13sp" />

    </LinearLayout>
0 голосов
/ 25 апреля 2019

Пожалуйста, проверьте ниже код.Это решит вашу проблему.Если у вас возникнут какие-либо проблемы, пожалуйста, сообщите мне об этом в разделе комментариев.

Используйте свои собственные чертежи и оценки.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:gravity="center"
            android:paddingTop="3dp"
            android:paddingBottom="3dp"
            android:text="Total Optional Service:"
            android:textColor="@android:color/darker_gray"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/tv_optional_service_amount"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:gravity="center"
            android:paddingTop="3dp"
            android:paddingBottom="3dp"
            android:text="$18.00"
            android:textColor="@android:color/black"
            android:textSize="13sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/btn_back"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:background="@color/colorBlack"
            android:gravity="center"
            android:minLines="2"
            android:paddingTop="3dp"
            android:paddingBottom="3dp"
            android:text="Save &amp; Close"
            android:textColor="@android:color/white"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/btn_next"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_marginStart="5dp"
            android:layout_weight="1"
            android:background="@color/colorBlack"
            android:gravity="center"
            android:minLines="2"
            android:paddingTop="3dp"
            android:paddingBottom="3dp"
            android:text="Next - Select Shipping Method"
            android:textColor="@android:color/white"
            android:textSize="13sp" />
    </LinearLayout>
</LinearLayout>

Пожалуйста, утвердите ответ, если он будет работать для вас.Спасибо!

0 голосов
/ 25 апреля 2019

измените свой код, как показано ниже, и ваша проблема решена!

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal"
        android:weightSum="2"
        android:layout_gravity="center_vertical"
        android:gravity="center_vertical"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:background="#CCCCCC">

        <TextView
            android:id="@+id/btn_back"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/rectangle_drawable"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            android:paddingTop="3dip"
            android:paddingBottom="3dip"
            android:text="Save &amp; Close"
            android:textColor="@android:color/white"
            android:textSize="13sp"
            android:minLines="2"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"/>

        <TextView
            android:id="@+id/btn_next"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/rectangle_drawable"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            android:minLines="2"
            android:paddingTop="3dip"
            android:paddingBottom="3dip"
            android:text="Next - Select Shipping Method Method Method"
            android:textColor="@android:color/white"
            android:textSize="13sp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"/>

    </LinearLayout>

Я установил свой собственный фон, поэтому вы просто установите свой собственный.

Это результат:

the result image

0 голосов
/ 25 апреля 2019

Я проверил ваш код и переписал его для вас, попробуйте следующий код, который может помочь вам решить вашу проблему

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:gravity="center"
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:weightSum="2">

    <TextView
        android:id="@+id/btn_back"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/bg_rounded_green_1"
        android:gravity="center"
        android:minLines="2"
        android:padding="3dp"
        android:text="Save &amp; Close"
        android:textColor="@android:color/white"
        android:textSize="13sp" />

    <TextView
        android:id="@+id/btn_next"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="3dp"
        android:background="@drawable/bg_rounded_green_1"
        android:gravity="center"
        android:minLines="2"
        android:text="@string/label_next_shipping_method"
        android:textColor="@android:color/white"
        android:textSize="13sp" />

</LinearLayout>
0 голосов
/ 25 апреля 2019

Попробуйте заменить рост в textview с wrap_content на match_parent, чтобы они имели одинаковый размер. Вы можете установить высоту LinearLayout на wrap_content тоже

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" ... />
    <TextView
        android:id="@+id/btn_back"
        android:layout_width="0dp"
        android:layout_height="match_parent" ... />
    <TextView
        android:id="@+id/btn_next"
        android:layout_width="0dp"
        android:layout_height="match_parent" ... />
</LinearLayout>
0 голосов
/ 25 апреля 2019

Попробуйте добавить это к вашему LinearLayout:

android:gravity="top|center_horizontal"
...