Question

我在ScrollView ConstraintLayout内使用constraint-layout:1.0.0-beta3时出现问题

我的ScrollView内容未完全显示。

这是我的布局：

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="#212121">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Constraint Layout"
            android:textSize="45sp"/>

    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/header"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="BUTTON"
                android:layout_marginTop="800dp"/>


        </LinearLayout>

    </ScrollView>

</android.support.constraint.ConstraintLayout>

这是结果

正如您所见，按钮不可见，我到达了ScrollView的底部。

它似乎适用于LinearLayout，布局低于

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#212121">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Linear Layout"
            android:textSize="45sp"/>

    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="BUTTON"
                android:layout_marginTop="800dp"/>


        </LinearLayout>

    </ScrollView>

</LinearLayout>

结果是

使用LinearLayout可以访问ScrollView的结尾。

ConstraintLayout是否有错误或者我做错了什么？

Answer 1

我的方式是：

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/header"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#212121"
        android:text="Constraint Layout"
        android:textSize="45sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ScrollView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:fillViewport="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/header">

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

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="BUTTON"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent" />

        </android.support.constraint.ConstraintLayout>

    </ScrollView>

</android.support.constraint.ConstraintLayout>

给出了：

要记住的一些事项：

您不需要标题的linearlayout，您可以直接使用textview。
不要使用match_parent，它似乎可行，但未定义。使用0dp代替正确的约束来拉伸视图。
显然，不要使用800dp的保证金。它可能在您的特定屏幕上看起来不错，但不会在不同设备上提供您想要的内容。
默认情况下，scrollview将包装其内容 - fillViewport属性在此处使其占用指示的空间
你可以在有意义的时候使用嵌套的ConstraintLayout。在未来，我们也可能利用它来进行一些性能改进

Answer 2

我将<TabNavigation tabBarHeight={48} tabBarStyle={this._getTabBarStyle(this.props)} sceneStyle={this._getSceneStyle(this.props)} id='main' navigatorUID='main' initialTab='catalog' onRegisterNavigatorContext={() => { console.log(this) }} > <TabItem id='catalog' renderIcon={isSelected => { if (isSelected) { return <TabButton type='selectedCatalog' /> } else { return <TabButton type='catalog' /> } }} > <StackNavigation initialRoute={Router.getRoute('catalog')} /> </TabItem> <TabItem id='notification' renderIcon={isSelected => { if (isSelected) { return <TabButton type='selectedNotifications' /> } else { return ( <View> <TabButton type='notifications' /> </View> ) } }} > <StackNavigation initialRoute={Router.getRoute('notification')} /> </TabItem> <TabItem id='redeem' renderIcon={isSelected => { if (isSelected) { return <TabButton type='selectedRedeem' /> } else { return <TabButton type='redeem' /> } }} > <StackNavigation initialRoute={Router.getRoute('redeem')} /> </TabItem> </TabNavigation>的高度更改为ScrollView并添加了一个底部约束。这似乎使它正常工作。

match_parent

注意：在垂直滚动视图中，<ScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toBottomOf="@+id/header" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent">的高度通常不会以任何布局结束。

使用ConstraintLayout时，ScrollView的底部被剪裁

2 个答案: