Question

我必须在顶部和上面的文字上进行布局。图像高度必须是根布局高度的40％。文字高度可变。因此，整个事情必须放在ScrollView中。

这是我的代码：

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorTutorialGrey"
>


<ScrollView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:fillViewport="true"
    >

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

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

        <ImageView
            android:id="@+id/tutorial_image"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/guideline"
            tools:src="@drawable/splash_bg"
            />

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="32dp"
            app:layout_constraintTop_toBottomOf="@id/guideline"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            >

            <TextView
                android:id="@+id/tutorial_title"
                style="@style/Tutorial.Title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                tools:text="Alle Neuerungen der App auf einen Blick"
                />

            <TextView
                android:id="@+id/tutorial_description"
                style="@style/Tutorial.Description"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                tools:text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet."
                />

        </LinearLayout>

    </android.support.constraint.ConstraintLayout>

</ScrollView>
</android.support.constraint.ConstraintLayout>

布局就像想要的那样，但是只要我放入指南，ScrollView就不再滚动了。

我犯了什么错误，如何实现所需的布局和行为？

Answer 1

指南和图片视图必须与父作品具有相同的ConstraintLayout。将指南移动到图像视图的正上方，您应该进行设置。

在旁注中，您可能不需要最外面的ConstraintLayout。您也可以摆脱嵌套的LinearLayout以获得更平坦的布局。

您设定的指南基于百分比。不幸的是，这个百分比似乎只是视图总可滚动高度的一小部分，而不仅仅是你在屏幕上看到的内容。

您希望图像占据滚动视图可见部分的40％。我建议您将XML中的指南设置为固定大小（例如app:layout_constraintGuide_begin="100dp"），并在代码中更改指南位置，执行以下操作：

protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.scrollable);
    final ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.layout);

    layout.post(new Runnable() {
        @Override
        public void run() {
            final ScrollView scrollView = (ScrollView) layout.findViewById(R.id.scrollView);
            final Guideline guideline = (Guideline) findViewById(R.id.guideline);
            final ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) guideline.getLayoutParams();
            lp.guideBegin = (int) ((scrollView.getHeight()) * 0.4);
            guideline.setLayoutParams(lp);
        }
    });
}

我建议使用ConstraintSet#setGuidelineBegin，但我无法让它工作。你可能会有更好的运气。

ScrollView不使用ConstraintLayout和指南滚动

1 个答案: