RelativeLayout高度填充剩余空间

时间:2010-09-09 11:31:02

标签: android android-relativelayout

我的xml文件中有以下布局:

<RelativeLayout android:layout_width="fill_parent"
                android:layout_height="fill_parent">

    <FrameLayout android:id="@+id/logoLayout"  
                 android:layout_width="fill_parent"
             android:layout_height="wrap_content">
          -- some images
    </FrameLayout>


    <RelativeLayout android:layout_width="fill_parent" 
                    android:layout_height="wrap_content" 
                    android:gravity="center" 
                    android:orientation="vertical"
                    android:layout_below="@+id/logoLayout">

               Button 1
               Button 2
               Button 3
               Button 4

    </RelativeLayout>

    <RelativeLayout android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dip"
            android:layout_alignParentBottom="true">

                 Button 5
    </RelativeLayout>

<RelativeLayout>

也许我没有以最好的方式做到这一点。我想要的是:让包含4个按钮的布局使用顶部和底部布局之间的整个空间,我希望按钮在布局中平行排列。

像这样:http://img16.imageshack.us/i/androidq.png/

我添加了整个布局代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background">


    <!--The header of the page-->
        <FrameLayout android:id="@+id/logoLayout" 
                     android:layout_width="fill_parent"
                     android:layout_height="wrap_content">        

             <ImageView android:id="@+id/logoBackground" 
                        android:src="@drawable/logo_background_small"
                        android:layout_width="fill_parent" 
                        android:layout_height="wrap_content"/>

             <ImageView android:id="@+id/logoImage" 
                        android:src="@drawable/logo_small"
                        android:layout_width="wrap_content" 
                        android:layout_height="wrap_content" 
                        android:layout_gravity="left"
                        android:gravity="center"
                        android:padding="3dip"/>  

             <TextView android:layout_width="fill_parent" 
                       android:layout_height="wrap_content" 
                       android:text="@string/tracks"
                       android:layout_gravity="center"
                       android:gravity="right"
                       android:textSize="22dip"
                       android:textColor="#ffffff"
                       android:padding="3dip">
             </TextView>              

        </FrameLayout>


        <RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
                         android:layout_width="fill_parent" 
                         android:layout_height="wrap_content" 
                         android:gravity="center" 
                         android:orientation="vertical"
                         android:layout_below="@+id/logoLayout"> 

                            <Button android:id="@+id/btn1"
                                    android:layout_height="wrap_content" 
                                    android:layout_width="250dip" 
                                    android:drawableLeft="@drawable/img_small_btn_look_around"
                                    android:background="@drawable/main_long_menu_button"
                                    android:text="@string/btn1" 
                                    android:textSize="18dip"
                                    android:textColor="#ffffff"
                                    android:layout_marginTop="20dip"
                                    android:onClick="btnMyTracksOnClick">
                            </Button> 

                            <Button android:id="@+id/btn2"
                                    android:layout_height="wrap_content" 
                                    android:layout_width="250dip" 
                                    android:drawableLeft="@drawable/img_small_btn_look_around"
                                    android:background="@drawable/main_long_menu_button"
                                    android:text="@string/btn2" 
                                    android:textSize="18dip"
                                    android:textColor="#ffffff"
                                    android:layout_marginTop="20dip"
                                    android:layout_below="@+id/btn1">
                            </Button>

                            <Button android:id="@+id/btn3"
                                    android:layout_height="wrap_content" 
                                    android:layout_width="250dip" 
                                    android:drawableLeft="@drawable/img_small_btn_look_around"
                                    android:background="@drawable/main_long_menu_button"
                                    android:text="@string/btn3" 
                                    android:textSize="18dip"
                                    android:textColor="#ffffff"
                                    android:layout_marginTop="20dip"
                                    android:layout_below="@+id/btn2">
                            </Button>

                            <Button android:id="@+id/btn4"
                                    android:layout_height="wrap_content" 
                                    android:layout_width="250dip" 
                                    android:drawableLeft="@drawable/img_small_btn_look_around"
                                    android:background="@drawable/main_long_menu_button"
                                    android:text="@string/btn4" 
                                    android:textSize="18dip"
                                    android:textColor="#ffffff"
                                    android:layout_marginTop="20dip"
                                    android:layout_below="@+id/bt3">
                            </Button>
        </RelativeLayout>

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:orientation="horizontal"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="5dip"
                        android:layout_alignParentBottom="true">

                        <Button android:layout_width="90dip" 
                                android:layout_height="wrap_content"
                                android:textSize="20dip"
                                android:textColor="#ffffff"
                                android:layout_alignParentLeft="true"
                                android:background="@drawable/sett_menu_button"
                                android:text="@string/back" 
                                android:layout_marginLeft="3dip"/> 

         </RelativeLayout>

    </RelativeLayout>

2 个答案:

答案 0 :(得分:43)

相对布局方法

我遇到了类似的情况,但我使用RelativeLayout代替LinearLayout工作了。

我基本上有2个标签(textViews)。顶部应填充剩余空间,底部标签是文本句子,应包裹其内容但仍固定在容器底部。这两个视图都在RelativeLayout容器

基本上是这样的:

------- parent container top ------------
|
|
|
[label1 (auto expand)]
|
|
|
[label2 (fixed height)]
------- parent container bottom ------------

技术

  1. 对于标签1,我将布局参数设置为MATCH_PARENT的宽度和高度,以便自动展开。
  2. 为标签1添加规则,使其为ABOVE标签2(这是重要部分)
  3. 然后是标签2:

    1. 使用MATCH_PARENT代表宽度,WRAP_CONTENT代表高度
    2. 然后将标签2的规则添加到ALIGN_PARENT_BOTTOM
    3. 此布局说明告诉Android系统:

      标签2应该包裹到其内容并固定到父容器的底部,同时标签1应该在坐在标签2上方时填充剩余空间。

      要记住的重要一点是设置为ALIGN_PARENT_SOMETHING的视图,例如ALIGN_PARENT_TOPALIGN_PARENT_BOTTOM是“优先级视图”。应该相对于此“优先级视图”设置应填充剩余空间的所有其他视图。

      基本示例

      以下是使用程序化方法的演示:

      package com.zhang.relodemo;
      
      import android.graphics.Color;
      import android.support.v7.app.AppCompatActivity;
      import android.os.Bundle;
      import android.view.Gravity;
      import android.view.View;
      import android.view.ViewGroup;
      import android.widget.RelativeLayout;
      import android.widget.TextView;
      
      public class MainActivity extends AppCompatActivity {
      
          // ---------------------------------------------------
          // Member Variables
          // ---------------------------------------------------
      
          RelativeLayout container;
      
          TextView label1;
          TextView label2;
      
          // ---------------------------------------------------
          // Property Methods
          // ---------------------------------------------------
      
          public RelativeLayout getContainer() {
              return container;
          }
      
          public void setContainer(RelativeLayout container) {
              this.container = container;
          }
      
          public TextView getLabel1() {
              return label1;
          }
      
          public void setLabel1(TextView label1) {
              this.label1 = label1;
          }
      
          public TextView getLabel2() {
              return label2;
          }
      
          public void setLabel2(TextView label2) {
              this.label2 = label2;
          }
      
          // ---------------------------------------------------
          // Methods
          // ---------------------------------------------------
      
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
      
              initViews();
              initLayouts();
              addViews();
          }
      
          void initViews() {
              container = new RelativeLayout(this);
      
              label1 = new TextView(this);
              label1.setText("The quick brown fox jumped over the lazy dog.");
              label1.setBackgroundColor(Color.LTGRAY);
              label1.setGravity(Gravity.CENTER);
              label1.setTextSize(20);
      
              label2 = new TextView(this);
              label2.setText("Label 2 is a short label compared to label1.It has two lines but take up a fraction of the space.");
              label2.setBackgroundColor(Color.GRAY);
              label2.setTextSize(20);
              label2.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
          }
      
          void initLayouts() {
              container.setId(View.generateViewId());
      
              label1.setId(View.generateViewId());
              label2.setId(View.generateViewId());
      
      
              // ---------------------------------------------------
              // Parent Container Constraints
              // ---------------------------------------------------
      
              RelativeLayout.LayoutParams containerLayoutParams = new RelativeLayout.LayoutParams(
                      ViewGroup.LayoutParams.MATCH_PARENT,
                      ViewGroup.LayoutParams.MATCH_PARENT
              );
      
              container.setLayoutParams(containerLayoutParams);
      
      
      
              // ---------------------------------------------------
              // Label Constraints
              // ---------------------------------------------------
      
              RelativeLayout.LayoutParams label1LayoutParams = new RelativeLayout.LayoutParams(
                      ViewGroup.LayoutParams.MATCH_PARENT,
                      ViewGroup.LayoutParams.MATCH_PARENT
              );
      
              // --------------------------------------
              // THIS IS THE IMPORTANT STEP HERE
              //
              // It tells label1 to be above label2
              // while expanding vertically.
              // --------------------------------------
              label1LayoutParams.addRule(RelativeLayout.ABOVE, label2.getId());
      
              label1.setLayoutParams(label1LayoutParams);
      
      
      
      
              RelativeLayout.LayoutParams label2LayoutParams = new RelativeLayout.LayoutParams(
                      ViewGroup.LayoutParams.MATCH_PARENT,
                      ViewGroup.LayoutParams.WRAP_CONTENT
              );
      
              // ------------------------------------------
              // this pins label2 to the parent
              // container's bottom, preventing label1
              // from forcing label2 off bottom of screen
              // ------------------------------------------
              label2LayoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
      
              label2.setLayoutParams(label2LayoutParams);
          }
      
          void addViews() {
              getContainer().addView(getLabel1());
              getContainer().addView(getLabel2());
      
              this.setContentView(getContainer());
          }
      }
      

      或其XML等价物:

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/container">
          <TextView
              android:id="@+id/label1"
              android:text="The quick brown fox jumped over the lazy dog."
              android:background="#ccc"
              android:gravity="center"
              android:textSize="20sp"
              android:textAlignment="center"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_above="@id/label2" />
      
          <TextView
              android:id="@+id/label2"
              android:text="Label 2 is a short label compared to label1.It has two lines but take up a fraction of the space."
              android:background="@android:color/darker_gray"
              android:textSize="20sp"
              android:textAlignment="center"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_alignParentBottom="true"/>
      </RelativeLayout>
      

      应该给你以下结果:

      demo screenshot

答案 1 :(得分:5)

尝试更改

<RelativeLayout android:layout_width="fill_parent" 
                android:layout_height="wrap_content" 
                android:gravity="center" 
                android:orientation="vertical"
                android:layout_below="@+id/logoLayout">

           Button 1
           Button 2
           Button 3
           Button 4

</RelativeLayout>

为:

<LinearLayout android:layout_width="fill_parent" 
                android:layout_height="wrap_content" 
                android:gravity="center" 
                android:orientation="vertical"
                android:layout_below="@+id/logoLayout">

           <!-- example button -->
           <Button android:layout_width="fill_parent" 
                android:layout_height="wrap_content" android:layout_weight="1"></Button>
</LinearLayout>

layout_weight应该将其均匀分隔

希望它有效