哪些限制条件将图像缩放在一起?

时间:2019-02-07 21:56:52

标签: android xml

我想一起放置和缩放图像以适合视图。无论比例如何,它们都应具有相同的长宽比和彼此相对的位置。有一个大图像,此处为椭圆形,应缩放以适合其容器。其余图像应以相同的比例缩放并放置在图像周围。我不想对任何dp进行硬编码,以便图像可以缩放到任何大小的容器。注意,球碰到了椭圆形:

enter image description here

我在这里使用约束来实现此行为,如下所示:

    <android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="0dp"
    android:layout_marginBottom="10dp"
    android:layout_weight="40"
    android:background="#ff8040"
    >

    <!-- horizontal guidelines -->
    <android.support.constraint.Guideline
        android:id="@+id/ovalTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.0000" />

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

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

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

    <!-- vertical guidelines -->
    <android.support.constraint.Guideline
        android:id="@+id/ovalLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.0000" />

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

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

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

    <ImageView
        android:id="@+id/oval"
        android:layout_height="0dp"
        android:layout_width="0dp"
        app:layout_constraintTop_toTopOf="@id/ovalTop"
        app:layout_constraintBottom_toBottomOf="@id/ovalBottom"
        app:layout_constraintStart_toStartOf="@id/ovalLeft"
        app:layout_constraintEnd_toEndOf="@id/ovalRight"
        android:src="@drawable/oval" />

    <ImageView
        android:id="@+id/circle"
        android:layout_height="0dp"
        android:layout_width="0dp"
        app:layout_constraintTop_toTopOf="@id/circleTop"
        app:layout_constraintBottom_toBottomOf="@id/circleBottom"
        app:layout_constraintStart_toStartOf="@id/circleLeft"
        app:layout_constraintEnd_toEndOf="@id/circleRight"
        android:src="@drawable/circle" />

</android.support.constraint.ConstraintLayout>

但是,当ConstraintLayout的长宽比本身发生变化时,它将相对于椭圆移动圆:

enter image description here

布局管理器在保持长宽比的同时限制了椭圆,但是较小的圆不需要调整大小。我希望圆使用椭圆形调整大小并保持其附着状态。

如果大图像始终受到宽度限制或高度限制,那么一切都会起作用,但是我无法控制。

1 个答案:

答案 0 :(得分:0)

使所有图像与最大图像(如拼图碎片)成比例的一种方法是创建一个布局,将其硬编码为与大图像相同的长宽比。准则可以放置在此布局上,准则中附加的所有小图像都将与大图像一起缩放。

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="0dp"
    android:layout_marginBottom="10dp"
    android:layout_weight="40">

    <!-- 922x1715 matches the ratio of the large image.
    all guidelines are placed relative to that image -->
    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="922:1715"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <!-- horizontal guidelines -->

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

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

        <!-- etc. -->