logo标签列表

Android布局边距百分比问题

androidandroid-linearlayout
38

我想按百分比设置边距。我在线性布局中有4个ImageView，并希望设置默认的左、右、顶部、底部边距，使每个屏幕大小保持相同的百分比。

这是否可能？

这是我想要的演示... enter image description here

这是我尝试过但不起作用的内容。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:weightSum="10" >

        <Thumbnail
            android:id="@+id/thumb1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="4" />

        <Thumbnail
            android:id="@+id/thumb2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="4" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:weightSum="10" >

         <Thumbnail
             android:id="@+id/thumb3"
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_weight="4" >
         </Thumbnail>

        <Thumbnail
            android:id="@+id/thumb4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="4" />

    </LinearLayout>

</LinearLayout>

感谢您的帮助

4个回答
28
你可以在LinearLayout中使用无形的View作为间距，并使用layout_weight机制来分配它们相对大小。
例如：

您可以在LinearLayout中使用无形的View作为空白占位符，并使用layout_weight机制来分配它们的相对大小。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1">

    <Thumbnail
        android:id="@+id/thumb1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="4" />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:visibility="invisible"/>

    <Thumbnail
        android:id="@+id/thumb2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="4" />

</LinearLayout>
1
逻辑上如果没有其他方法的话可以这样做，但是不确定内存使用情况，因为我需要很多不可见的视图。 - dracula
3
有一个“空格”视图可以做到这一点。我不认为使用不可见的“View”会有任何性能/内存惩罚，但我不确定 - “View.java”很大，我只是粗略地翻了几分钟。 - Alexander Malakhov
1
@AlexanderMalakhov Space在API 14级中添加，因此它不是很有用。但它的命名使其目的更加明显。 - laalto
2
有一个名为android.support.v7.widget.Space的东西。虽然这可能是一个额外的依赖项。 - Alexander Malakhov
android.support.v7.widget.Space已经过时。请使用android.support.v4.widget.Space。 - Galya
22

2017年8月1日更新：

这个答案中的两种布局方式已经过时，但是在那里提供了使用ConstraintLayout获得相同功能的说明。感谢dpg指出。

如果您计划使用资源与百分比一起使用，这个答案可能会有用。

旧答案：

现在有一种更好的方式，在支持库版本23.0.0中推出了（时机不错，对吗？）。现在您可以使用PercentFrameLayout 或 PercentRelativeLayout。它们都具有以下属性：

  • layout_widthPercent
  • layout_heightPercent
  • layout_marginPercent
  • layout_marginLeftPercent
  • layout_marginTopPercent
  • layout_marginRightPercent
  • layout_marginBottomPercent
  • layout_marginStartPercent
  • layout_marginEndPercent

您还可以查看PercentLayoutHelper.PercentLayoutParams

这只适用于Android 6吗？ - Iraklis Bekiaris
1
百分比布局位于百分比支持库中，这意味着它们不仅适用于Android 6。 - neits
3
现在这种更好的方式已经被弃用了。对于链接上的两个布局： 这个类在API级别26.0.0-beta1中已经被弃用。 考虑使用ConstraintLayout及其关联的布局代替。 - Peter
1
也许你想说的是在“...如何通过CoordinatorLayout获得相同的功能...”中使用ConstraintLayout吗？ - Eugene Brusov
16
你可以使用ConstraintLayout的Guidelines以百分比设置边距。

假设你想要为你的布局定义以下百分比值：

Requested percentage values

那么，只需将以下准则添加到布局中：

Layout Editor

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    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">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:srcCompat="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="@+id/horGuideline1"
        app:layout_constraintStart_toStartOf="@+id/verGuideline1"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline2"
        app:layout_constraintBottom_toTopOf="@+id/horGuideline2" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:srcCompat="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="@+id/horGuideline1"
        app:layout_constraintStart_toStartOf="@+id/verGuideline3"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline4"
        app:layout_constraintBottom_toTopOf="@+id/horGuideline2" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:srcCompat="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="@+id/horGuideline3"
        app:layout_constraintStart_toStartOf="@+id/verGuideline1"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline2"
        app:layout_constraintBottom_toTopOf="@+id/horGuideline4" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:srcCompat="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="@+id/horGuideline3"
        app:layout_constraintStart_toStartOf="@+id/verGuideline3"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline4"
        app:layout_constraintBottom_toTopOf="@+id/horGuideline4" />

    <android.support.constraint.Guideline
        android:id="@+id/verGuideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.05" />

    <android.support.constraint.Guideline
        android:id="@+id/verGuideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.35" />

    <android.support.constraint.Guideline
        android:id="@+id/verGuideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.65" />

    <android.support.constraint.Guideline
        android:id="@+id/verGuideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.95" />

    <android.support.constraint.Guideline
        android:id="@+id/horGuideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.12" />

    <android.support.constraint.Guideline
        android:id="@+id/horGuideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.47" />

    <android.support.constraint.Guideline
        android:id="@+id/horGuideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.53" />

    <android.support.constraint.Guideline
        android:id="@+id/horGuideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.88" />

</android.support.constraint.ConstraintLayout>

因此，你的布局看起来像这样：

结果视图

太棒了！我不知道这件事。此外，android.support.constraint.Guideline已经被替换为androidx.constraintlayout.widget.Guideline。 - Aruman
0
看了你的图片，这里有一个可能的解决方案：使用相对布局并将线性布局放在其中。如果需要使图像视图适当地适应，还可以使用weightSum。
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="5dp"
    android:layout_marginLeft="5dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:orientation="vertical" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="vertical" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</RelativeLayout>
给定精确的边距不是为多个屏幕提供良好解决方案的好方法。这就是为什么我正在寻找一个百分比解决方案的原因。 - dracula
为相对布局设置左右边距将在所有屏幕上设置相同的边距，因为这些值以dp为单位。 - deepdroid
但是对于每个密度，dp值的影响是不同的。 - dracula
这些是密度无关像素，在我的经验中，在布局中使用dp单位在不同屏幕上没有边距方面的问题。 - deepdroid
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接