android - 在父布局中显示图像的一部分

Question

我想设计一个布局，其中图像的一部分应该在布局中可见。

我正在使用约束布局。我想设计提供的图像。我有绿色圆形图像。

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.appcompat.widget.AppCompatImageView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/round_green"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
  />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

从您发布的图片来看，您似乎有一个超大圆圈，其中心位置位于封闭布局的顶部或附近。这是完成此布局的一种方法。

通过在 ImageView 中指定以下内容来创建超大圆圈:

android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="1.5" 

在布局的中心创建一个Space 小部件。将 ImageView 的底部限制在 Space 的顶部。 (请参阅下面的布局。)现在可以通过更改 Space 小部件的垂直偏差来上下移动圆圈。放置可以在 XML 中静态进行，也可以在代码中动态进行。

这是在 Space 小部件上更改偏差后的结果:

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/round_green"
        app:layout_constraintBottom_toTopOf="@+id/space"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="1.5" />

    <Space
        android:id="@+id/space"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.40" />
</androidx.constraintlayout.widget.ConstraintLayout>

round_green.xml

<shape 
    android:shape="oval">
    <gradient
        android:angle="45"
        android:centerColor="#79FFD6"
        android:endColor="#79FFD6"
        android:startColor="#A5F74D" />
</shape>

虽然这会为您提供所需的布局，但当您更改为不同的设备或横向显示时可能会出现问题。根据您的实际要求，您可能希望将评论中提供的选项视为更强大的解决方案。