在相对布局中将宽度和高度设置为百分比

Question

我想要这个：一个被 2 个箭头覆盖的 ViewPager

我通过这段代码得到了我想要的东西。但是，我收到了这些 lint 警告：

• 这个布局没用（对于虚拟布局）
• 嵌套权重不利于性能。

我想知道是否有更好的方法来获得我想要的这个 UI。

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

<android.support.v4.view.ViewPager
    android:id="@+id/dialog_instruction_pager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>

<!-- this LinearLayout  overlays the ViewPager -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <!-- This is just the container for the left and right arrows , it is allocated with only 20% of screen height-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".2"
        android:orientation="horizontal" >

        <!-- I want to align this to the left and set width only 5% of the parent -->
        <ImageButton
            android:id="@+id/instruction_dialog_left_arrow"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".05"
            android:background="?android:attr/selectableItemBackground"
            android:scaleType="fitCenter"
            android:src="@drawable/arrow_left_grey" />

        <!-- This is the dummy layout, standing in the middle of 2 arrows so they can be align to the left and right of the parent -->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".8" >
        </LinearLayout>

        <!-- I want to align this to the right and set width only 5% of the parent-->
        <ImageButton
            android:id="@+id/instruction_dialog_right_arrow"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".05"
            android:background="?android:attr/selectableItemBackground"
            android:scaleType="fitCenter"
            android:src="@drawable/arrow_right_grey" />
    </LinearLayout>
</LinearLayout>

P.S：是否有任何布局允许将子级左、右、下对齐（如 RelativeLayout）并允许将宽度、高度设置为百分比（如 LinearLayout 中的“权重”属性）？

谢谢！

Answer 1

试试这个

为避免此布局无用（对于虚拟布局），您应该android:background="@android:color/transparent" 并在该线性布局中添加虚拟视图，因为布局不应为空。。 p>

为避免嵌套权重不利于性能，添加一个子线性布局。 并在代码中阅读我的 cmets

并为imageview添加了父布局以使图像垂直居中

试试这个代码

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

    <android.support.v4.view.ViewPager
        android:id="@+id/dialog_instruction_pager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></android.support.v4.view.ViewPager>

    <!-- this LinearLayout  overlays the ViewPager -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <!-- This is just the container for the left and right arrows , it is allocated with only 20% of screen height-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight=".2"
            android:orientation="horizontal">
            <!--child layout to avoid nested weight with `waighSum` property-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:weightSum="100">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="5"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">
                    <!-- I want to align this to the left and set width only 5% of the parent -->
                    <ImageButton
                        android:id="@+id/instruction_dialog_left_arrow"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="?android:attr/selectableItemBackground"
                        android:scaleType="fitCenter"
                        android:src="@drawable/icon_clock" />
                </LinearLayout>
                <!-- This is the dummy layout, standing in the middle of 2 arrows so they can be align to the left and right of the parent -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="90"
                    android:background="@android:color/transparent">// this line also makes layout usefull
                    <!-- dummy view becouse layout should not be empty -->
                    <View
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="5"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">
                    <!-- I want to align this to the right and set width only 5% of the parent-->
                    <ImageButton
                        android:id="@+id/instruction_dialog_right_arrow"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="?android:attr/selectableItemBackground"
                        android:scaleType="fitCenter"
                        android:src="@drawable/icon_clock" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

希望对你有用

Answer 2

Google 推出了名为 android.support.percent

的新 API

1)PercentRelativeLayout

2)PercentFrameLayout

添加编译依赖如

compile 'com.android.support:percent:23.1.1'

您可以以百分比指定维度，从而获得RelativeLayout 和百分比的好处

 <android.support.percent.PercentRelativeLayout
         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"/>
     <TextView
         app:layout_widthPercent="40%"
         app:layout_heightPercent="40%"
         app:layout_marginTopPercent="15%"
         app:layout_marginLeftPercent="15%"/>
 </android.support.percent.PercentRelativeLayout/>

Answer 3

Try the below code and see whether it works, 
This code will get the layout what you have attached

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

  <android.support.v4.view.ViewPager
    android:id="@+id/dialog_instruction_pager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/theme_blue" >
</android.support.v4.view.ViewPager>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerInParent="true"
    android:background="@drawable/ic_launcher" />

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerInParent="true"
    android:background="@drawable/ic_launcher" />

 </RelativeLayout>

Answer 4

尝试使用RelativeLayout，然后将左图设置为alignParentLeft，将右图设置为alignParentRight