【问题标题】:Relative Layout Vs Linear Layout or a mix of Both相对布局与线性布局或两者的混合
【发布时间】:2019-10-31 15:53:10
【问题描述】:

我一直在尝试根据我在纸上设计的东西来设计布局,但没有设法让它以我想要的方式对齐,同时能够适应所有屏幕我用一个简单的结构去没有成功我能够在以太布局中对齐所有东西我尝试了相对和线性的混合然后尝试融合两者。

我将提供图片来展示我想要的布局风格。

提前致谢。

【问题讨论】:

  • 更好地使用ConstraintLayout
  • 没有“报复性布局”之类的东西,我认为您的意思是“相对性布局”。进行编辑。
  • 这看起来可以单独使用多个LinearLayouts 完成。但是如果你想要一个根View,你可以使用一个TableLayout和多个TableRows。图像的部分可以是TableRowweightSum 为 2,其中包含 2 个 ImageViews,每个layout_weight 为 1。

标签: android user-interface layout user-experience


【解决方案1】:

我之前做过类似的设计。我使用线性布局(垂直)来制作不同的行,并在您的情况下像图像按钮 1 和图像按钮 2 这样的行中需要多个列时使用线性布局(水平)。注意不同视图中的层次结构,因为如果做错了会很混乱。

【讨论】:

    【解决方案2】:

    相对布局与线性布局

    我他们应该不反对这个,因为他们都是不同的,服务不同的目的

    线性布局

    你应该使用线性布局,你必须在视图中进行大量的布局更改,例如添加删除或动态,因为它不会重建整个布局,只是更改参数

    相对布局

    您应该使用您想要实现一些对齐的位置,并且不希望小部件再次呈现,因为相对布局的子级的任何更改都会重新排列/重新绘制整个小部件

    希望这能给一些更好的画面

    【讨论】:

      【解决方案3】:

      您可以在此设计中使用约束布局,它也可以扁平化层次结构

      【讨论】:

        【解决方案4】:

        线性布局相对布局都可以用来实现上述目的,但线性布局完成工作的速度更快。

        对于附上的上图,这是您开始使用线性布局

        所需的内容
        <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>
        

        【讨论】:

          【解决方案5】:
              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
          

          【讨论】:

            【解决方案6】:

            你应该试试这个

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

            在布局中使用任何你想要的按钮/文本和你自己想要的颜色。

            希望这篇文章对你有所帮助。

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2012-07-06
              • 2023-03-09
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2019-12-12
              • 2017-10-01
              相关资源
              最近更新 更多