如何在布局中以完全相同的位置和大小比例放置两个视图？答案

【问题标题】：How to place two views inside a layout in the exact same position and size ratio?如何在布局中以完全相同的位置和大小比例放置两个视图？
【发布时间】：2018-05-23 13:07:26
【问题描述】：

我想把这两个部分放在一个布局中，形成一个加载栏。

和

橙色指示器需要在木板里面，但我找不到以正确方式连接它们的方法......

最终结果应如下所示
.

XML 文件：

<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/wood_board"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <com.menwithandroid.myhookah.gui.LoadingProgressBar
       android:id="@+id/loading_indicator"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>

如何正确连接这些部分？谢谢。

【问题讨论】：

你可以使用RelativeLayout轻松实现这一点，给视图提供相同的关系，但问题是你想做什么？我的意思是你想在图像视图上显示加载器吗？
指示器应该在插座内（在木板上），所以我需要应用边距或其他值来确定它的位置。但我不能使用 dp 或 px 因为它会在其他屏幕尺寸上被搞砸......
拥有相同比例的图像..意味着橙色部分在这种方式周围具有必要的透明空间，只需将它们放在同一个父视图中

标签： android android-layout android-view android-gui

【解决方案1】：

使用约束布局非常简单...您可以将项目放置在相同的确切位置，并使用 android:elevation 确保一个组件覆盖另一个组件。

<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/wood_board"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:src="@drawable/loading"
    android:elevation="2dp"/>

<ImageView
    android:id="@+id/loading_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:src="@drawable/bar"
    app:layout_constraintBottom_toBottomOf="@+id/wood_board"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/wood_board" />

您的解决方案将如下所示：here

【讨论】：

【解决方案2】：

它只是imageview里面的imageview。下面可能对你有用。This is the sample code或者你可以直接拖到xml文件的设计部分。

【讨论】：

【解决方案3】：

用RelativeLayout 试试看：

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center">

           <ImageView
            android:id="@+id/wood_board"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <com.menwithandroid.myhookah.gui.LoadingProgressBar
           android:id="@+id/loading_indicator"
            android:gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content" />


 </RelativeLayout>

然后相应地设置ImageView的大小，这将适合LoadingProgressBar

【讨论】：

【解决方案4】：

谢谢大家...

我使用android.support.constraint.Guideline 和app:layout_constraintGuide_percent 以百分比确定指示器在木板内的位置（用于不同屏幕尺寸的兼容性）。

最终看起来像 this

【讨论】：