web-dev-qa-db-ja.com

ConstraintLayoutを垂直にスクロールするにはどうすればよいですか？

メインアクティビティの内容は次のようになります。

メイン画面は次のようになります（これはすべてConstraintLayout内）：

  • 画像タイトル
  • 日付
  • 画像自体
  • 画像の説明

画像の説明は表示するには長すぎる可能性があります。これを修正するには、ScrollView内に配置します。これで問題なく動作します。ただし、ConstraintLayout全体をScrollViewしたいのですが、これは適切に機能していません。スクロールできず、一部のTextViewが表示されません。

Android開発;助けていただければ幸いです！

関連コード：

<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:id="@+id/desciptionScroll"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.picture.nasa.nasadailyimage.NasaDailyImage"
    tools:showIn="@layout/activity_nasa_daily_image">

 <TextView
    Android:id="@+id/imageTitle"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_marginLeft="8dp"
    Android:layout_marginStart="8dp"
    Android:text="@string/test_image_title"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

 <TextView
    Android:id="@+id/imageDate"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_marginLeft="8dp"
    Android:layout_marginStart="8dp"
    Android:text="@string/test_image_date"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageTitle" />

 <ImageView
    Android:id="@+id/imageDisplay"
    Android:layout_width="368dp"
    Android:layout_height="408dp"
    Android:layout_marginLeft="8dp"
    Android:layout_marginStart="8dp"
    Android:layout_marginTop="3dp"
    Android:src="@mipmap/test_image"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageDate" />

<TextView 
    Android:id="@+id/imageDescription"
    Android:layout_width="368dp"
    Android:layout_height="0dp"
    Android:layout_marginLeft="8dp" 
    Android:layout_marginStart="8dp" 
    Android:layout_marginTop="4dp" 
    Android:text="@string/test_image_description" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/imageDisplay" />

</Android.support.constraint.ConstraintLayout>
androidandroid-scrollviewandroid-constraintlayout
7
user7879812

画面内の要素をスクロール可能にするために、CoordinatorLayout内でNestedScrollViewを使用できると思います。通常、そこに表示するすべての要素を含むLinearLayoutを配置します。

例えば：

<Android.support.design.widget.CoordinatorLayout
    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"
    tools:context="com.xengar.Android.puzzlewildanimals.ui.HelpActivity">

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />

    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.widget.NestedScrollView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <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:id="@+id/desciptionScroll"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            tools:context="com.picture.nasa.nasadailyimage.NasaDailyImage"
            tools:showIn="@layout/activity_nasa_daily_image">


            <TextView
                Android:id="@+id/imageTitle"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginLeft="8dp"
                Android:layout_marginStart="8dp"
                Android:text="@string/test_image_title"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                Android:id="@+id/imageDate"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginLeft="8dp"
                Android:layout_marginStart="8dp"
                Android:text="@string/test_image_date"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageTitle" />

            <ImageView
                Android:id="@+id/imageDisplay"
                Android:layout_width="368dp"
                Android:layout_height="408dp"
                Android:layout_marginLeft="8dp"
                Android:layout_marginStart="8dp"
                Android:layout_marginTop="3dp"
                Android:src="@mipmap/test_image"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageDate" />

            <TextView
                Android:id="@+id/imageDescription"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginLeft="8dp"
                Android:layout_marginStart="8dp"
                Android:layout_marginTop="4dp"
                Android:text="@string/test_image_description"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageDisplay" />




        </Android.support.constraint.ConstraintLayout>
    </Android.support.v4.widget.NestedScrollView>

</Android.support.design.widget.CoordinatorLayout>

それでもうまくいかない場合は、ConstraintLayoutをLinearLayoutに置き換えることができます。それがお役に立てば幸いです。

11
Angel Garcia

ビューにスクロールを追加するには、ScrollViewを追加します。コードでそれをルートとして追加します（ScrolLViewがルートではなく、さらにコンテンツがある場合は、ConstraintLayoutの周りにScrollViewを追加します）。名前空間（xmlnsを含む行）を新しいルートに移動します。 ScrollViewの幅と高さをmatch_parent（またはあなたが持っているもの）に追加し、ConstraintLayoutの高さをwrap_contentに設定します。

ただし、デザインモードでは正しくスクロールできません。 （ 参照 ）。しかし、それはまだデバイス上で想定されているように動作します。

注：

SCrollViewでレイアウトがスクロールしない場合は、ConstraintLayoutのheightをwrap_contentに設定してください。

1
Zoe

説明したように、制約レイアウトをそのScrollView親を超えて「拡張」できる限り、NestedScrollViewを使用する必要はありません この関連SO answer =

0
kip2