將寬度和高度設置為相對布局中的百分比

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>

PS：是否有任何布局允許對齊左邊，右邊，底部（如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

谷歌推出了名為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