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

Question

我希望得到这个：一个被两个箭头覆盖的ViewPager

我通过以下代码得到了我想要的结果。但是，我收到了这些lint警告:

• 此布局无用（用于虚拟布局）
• nested weights对性能有影响。

我想知道是否有更好的方法来获得我想要的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>

附言：是否有一种布局可以使子元素左对齐、右对齐、底部对齐（类似RelativeLayout），并且还允许将宽度、高度设置为百分比（类似LinearLayout中的"weight"属性）？

谢谢！

- Huy Than

Answer 1

谷歌推出了一个新的API，称为android.support.percent

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

- Pranav

Answer 2

尝试这个

为避免无用的布局，您应该使用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>

希望这对你有用。

- M S Gadag

---

谢谢您的回答，它确实消除了 Lint 的所有警告。但是，我觉得这个 XML 文件有很多嵌套布局。这会降低性能吗？ - Huy Than

不，它不会影响性能...只有当您在一个布局XML文件中添加具有10个连续嵌套布局和超过80个视图的视图时才会受到影响。 - M S Gadag

谢谢您的解释，我从您那里学到了一些有趣的东西。 - Huy Than

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>

- Lochana Ragupathy

---

感谢您的回答，您建议的代码似乎没有设置ImageView的宽度和高度，而只是“wrap_content”。我想以百分比独立于图像尺寸来设置图像的宽度和高度。 - Huy Than

但是为什么你想要以百分比设置宽度和高度呢？wrapcontent会默认采用图像大小。根据缩放比例将图像放置在所有相应的可绘制对象中。这是Android建议的标准。 - Lochana Ragupathy

请阅读上述有关各种屏幕的UI的文档：http://developer.android.com/guide/practices/screens_support.html。如果您使用标准图标，则可以从此处下载：http://developer.android.com/design/style/iconography.html。如果您自己创建，请遵循上面链接中提到的缩放比例。在应用程序中，您有不同的文件夹，如drawable-hdpi、xxhdpi，以适应不同的屏幕和密度。在Android中，您无法指定百分比，而是需要提供dp，即每英寸密度。 - Lochana Ragupathy

我在互联网上搜索了你所建议的内容。你是指这个吗？将要用作图标的图片进行缩放，然后创建4个版本，即mdpi、hdpi、xhdip和xxhdpi。使用Android Asset Studio创建这些版本，然后将它们放入项目中相应的drawable文件夹中，Android会自动选择它们吗？ - Huy Than

哦，我明白了，其他答案可以回答我的问题。你不是直接回答我的问题，而是询问我为什么需要这个，从中我学到了正确的做法。你的答案对我来说是最好的答案。再次感谢你。 @其他帮助者：我也非常感激你们的宝贵帮助，但我只能选择一个作为最佳答案。谢谢大家。 - Huy Than

Answer 4

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

- jomartigcal

---

谢谢，但设置图像的宽度和高度并没有帮助。 - Huy Than