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

Question

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

我正在使用Constraint Layout。我想设计提供的图像。我可以使用绿色圆形图像。

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

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