折叠工具栏布局和约束布局 [英] Collapsing Toolbar Layout and Constraint Layout

问题描述

我正努力在Constraint旁边创建折叠的图片标题，在该图片中我的设计看起来像这样

I am struggling to create collapsing image header alongside Constraint where my design looks like this

当前，个人资料图片是ConstraintLayout的一部分，因为它需要准则约束，不幸的是，它与AppBarLayout

Currently the profile pic is a part of the ConstraintLayout because it needs Guideline constraints and unfortunately it is overlapped by the AppBarLayout

任何想法如何实现? 找不到关于我的布局组合的任何来源.....

Any ideas how to achieve that? Can't find any source regarding my combination of layouts.....

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/playerViewBg"
        android:fitsSystemWindows="false">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/bgIV"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/header_bg" />

        </android.support.design.widget.CollapsingToolbarLayout>

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

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

        <ImageView
            android:id="@+id/playerIV"
            android:layout_width="177dp"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginTop="62dp"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@drawable/profilePic"
            app:layout_constraintEnd_toStartOf="@+id/guideline2"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintStart_toStartOf="@+id/guideline"
            app:layout_constraintTop_toTopOf="parent" />

        <!-- Other content -->

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

          <android.support.constraint.Guideline
            android:id="@+id/guideline2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.73" />

    </android.support.constraint.ConstraintLayout>

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

推荐答案

以下是我的工作布局摘要:

Following is the snippet of my working layout:

对于滚动视图android:fillViewport="true"，请确保您没有设置任何子视图高度以匹配constrianlayout内部的parent(0 dp).问我是否有任何疑问.

Please make sure that you haven't make any childview height to match parent(0 dp) inside constrianlayout also for scroll view android:fillViewport="true". Ask me if any doubt Occur.

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:fitsSystemWindows="false">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/ivImagec"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/_90sdp"
                android:contentDescription="@string/no_des"
                android:scaleType="centerCrop"
                app:srcCompat="@drawable/outdoorgames" />


        </android.support.design.widget.CollapsingToolbarLayout>

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/_90sdp"
        android:fillViewport="true">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/cvLayout"
            android:animateLayoutChanges="true">
                 ....
        </android.support.constraint.ConstraintLayout>

这篇关于折叠工具栏布局和约束布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！