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

1

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

<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>

Изображение 174551

Теги:
textview
android-layout
android-linearlayout

8 ответов

1

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

Просто добавьте android:gravity="center" в свой LinearLayout

Удалите android:layout_gravity="top" и android:layout_marginTop="10dp" из текстовых представлений

Попробуйте код ниже, в коде ниже я добавляю View and change 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>

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

Изображение 174551

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

0

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


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

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


Хорошо, давайте проникнем в код - с помощью constraintLayout вы можете просто использовать цепочку между двумя представлениями:

<?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>

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

Изображение 174551


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

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

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

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


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

  • 0
    Это выглядит хорошо, но я не хочу использовать тег «Кнопка». Пожалуйста, дайте мне знать, если вы создали это с помощью "TextView".
  • 0
    Вы можете создать его с любым видом, который вы хотите, это был просто пример. Не стесняйтесь изменить это
Показать ещё 2 комментария
0

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

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

<?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

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

<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

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

<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>

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

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

Изображение 174551

0

Попробуйте заменить ваш рост в 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

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

android:gravity="top|center_horizontal"
0

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

<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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню