Относительная компоновка против линейной компоновки или сочетание обоих - PullRequest
Новая
       41

Относительная компоновка против линейной компоновки или сочетание обоих

2 голосов
/ 18 июня 2019

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

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

Заранее спасибо.

enter image description here

Ответы [ 6 ]

1 голос
/ 18 июня 2019 
    Please Try This

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

    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.2"
                  android:background="#DFF7FA"
                  android:gravity="center"
                  android:layout_height="match_parent">

        <TextView android:layout_width="match_parent"
                  android:text="Image/Logo"
                  android:textAlignment="center"
                  android:textSize="25sp"
                  android:textColor="@android:color/black"
                  android:layout_height="wrap_content"/>



    </LinearLayout>
    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.6"
                  android:gravity="center"
                  android:background="#B9CEBC"
                  android:layout_height="match_parent">

        <TextView android:layout_width="match_parent"
                  android:text="Title"
                  android:textAlignment="center"
                  android:textSize="25sp"
                  android:textColor="@android:color/black"
                  android:layout_height="wrap_content"/>

    </LinearLayout>

    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.3"
                  android:gravity="center"
                  android:background="#CECBCB"
                  android:layout_height="match_parent">

        <TextView android:layout_width="match_parent"
                  android:text="Block of Text"
                  android:textAlignment="center"
                  android:textSize="25sp"
                  android:textColor="@android:color/black"
                  android:layout_height="wrap_content"/>

    </LinearLayout>

    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.2"
                  android:weightSum="2"
                  android:orientation="horizontal"
                  android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:background="#E0F5FE"
                      android:layout_height="match_parent">

            <TextView android:layout_width="match_parent"
                      android:text="ImageButton1"
                      android:textAlignment="center"
                      android:textSize="25sp"
                      android:textColor="@android:color/black"
                      android:layout_height="wrap_content"/>

        </LinearLayout>
        <LinearLayout android:layout_width="match_parent"
                      android:layout_weight="1"
                      android:background="#B2E4FC"
                      android:gravity="center"
                      android:layout_height="match_parent">

            <TextView android:layout_width="match_parent"
                      android:text="ImageButton2"
                      android:textAlignment="center"
                      android:textSize="25sp"
                      android:textColor="@android:color/black"
                      android:layout_height="wrap_content"/>

        </LinearLayout>


    </LinearLayout>

    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.2"
                  android:weightSum="2"
                  android:orientation="horizontal"
                  android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:background="#B2E4FC"
                      android:layout_height="match_parent">

            <TextView android:layout_width="match_parent"
                      android:text="ImageButton3"
                      android:textAlignment="center"
                      android:textSize="25sp"
                      android:textColor="@android:color/black"
                      android:layout_height="wrap_content"/>

        </LinearLayout>

        <LinearLayout android:layout_width="match_parent"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:background="#E0F5FE"
                      android:layout_height="match_parent">

            <TextView android:layout_width="match_parent"
                      android:text="ImageButton4"
                      android:textAlignment="center"
                      android:textSize="25sp"
                      android:textColor="@android:color/black"
                      android:layout_height="wrap_content"/>

        </LinearLayout>
    </LinearLayout>

    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.4"
                  android:gravity="center"
                  android:background="#7FD7FF"
                  android:layout_height="match_parent">

        <TextView android:layout_width="match_parent"
                  android:text="ImageButton5"
                  android:textAlignment="center"
                  android:textSize="25sp"
                  android:textColor="@android:color/black"
                  android:layout_height="wrap_content"/>

    </LinearLayout>
</LinearLayout>



  [1]: https://i.stack.imgur.com/MmiUc.png
1 голос
/ 18 июня 2019

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

Для прикрепленного выше изображения, вот что вам нужно, чтобы начать использовать Linear Layout 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

    <ImageView
        android:id="@+id/logo_image"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ocean"/>

    <TextView
        android:id="@+id/title"
        android:text="Title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:fontFamily="sans-serif-light"
        android:textColor="@android:color/black"
        android:background="#ccddff"
        android:gravity="center"
        android:padding="20dp"/>

    <TextView
        android:id="@+id/block_of_text"
        android:text="Sed aliquam ultrices mauris. Sed cursus turpis vitae tortor. Phasellus consectetuer vestibulum elit. Quisque malesuada placerat nisl."
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:fontFamily="sans-serif-light"
        android:textColor="@android:color/black"
        android:background="#B09E99"
        android:gravity="left"
        android:padding="8dp"/>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:weightSum = "2">
       <ImageButton
            android:id="@+id/image_button1"
            android:layout_width="0dp"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:scaleType="centerCrop"
            android:src="@drawable/ibtn1"/>
       <ImageButton
            android:id="@+id/image_button2"
            android:layout_width="0dp"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:scaleType="centerCrop"
            android:src="@drawable/ibtn2"/>
    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:weightSum = "2">
       <ImageButton
            android:id="@+id/image_button3"
            android:layout_width="0dp"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:scaleType="centerCrop"
            android:src="@drawable/ibtn3"/>
       <ImageButton
            android:id="@+id/image_button4"
            android:layout_width="0dp"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:scaleType="centerCrop"
            android:src="@drawable/ibtn4"/>
    </LinearLayout>

    <ImageButton
        android:id="@+id/image_button5"
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_weight="1"
        android:scaleType="centerCrop"
        android:src="@drawable/ibtn5"/>

 </LinearLayout>
1 голос
/ 18 июня 2019

вы можете использовать макет ограничения для этого проекта, это также выравнивает иерархию

1 голос
/ 18 июня 2019

Моментальный макет против линейного макета

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

ЛИНЕЙНЫЙ ПЛАН

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

ОТНОСИТЕЛЬНЫЙ ПЛАН

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

Надеюсь, это даст лучшую картину

1 голос
/ 18 июня 2019

Я сделал похожий дизайн некоторое время назад. Я использовал линейный макет (по вертикали) для создания разных строк и использовал линейный макет (по горизонтали), когда в строке требовалось более одного столбца, например кнопка «Изображение» 1 и кнопка «Изображение 2» в вашем случае. Позаботьтесь об иерархии в разных представлениях, так как она становится довольно запутанной, если все сделано неправильно.

0 голосов
/ 18 июня 2019

вы должны попробовать это 

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
       >

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
      >

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
        >

        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            >

        </LinearLayout>
    </LinearLayout>

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

    </LinearLayout>
</LinearLayout>

используйте ваши кнопки / текст, какие вы хотите внутри макетов, с вашими собственными цветами, что вы хотите.

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

...