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

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中的“weight”属性）？

谢谢！

Answer 1

试试这个

要避免这种布局没用（对于虚拟布局）你应该android:background="@android:color/transparent"并在该线性布局中添加虚拟视图，因为布局不应为空。

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

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