如何像在 Google IO App 中一样使工具栏从屏幕中间滚动

Question

如何设计 Appbar 从屏幕中间滚动并固定在顶部的布局？

我的问题与 Google I/O 2015 应用程序中的设计完全相同（活动详情屏幕）。我使工具栏出现在与顶部的偏移处，并在顶部有一个 ImageView。还有一个包含所需内容的 ScrollView。现在，只有 ScrollView 中的内容被滚动，而不是 ImageView 或 Toolbar。我还需要在 Parallax 的顶部滚动 ImageView。

有人可以帮我设计布局吗？

activity_detail.xml

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


   <ImageView
       android:id="@+id/imageView"
       android:layout_width="match_parent"
       android:layout_height="196dp"
       android:layout_alignParentTop="true"
       android:src="@mipmap/ic_launcher" />

   <android.support.design.widget.AppBarLayout
       android:id="@+id/appbar"
       android:layout_width="match_parent"
       android:layout_height="150dp"
       android:layout_below="@id/imageView"
       android:background="@color/blue"
       android:fitsSystemWindows="true"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:contentInsetLeft="72dp"
           app:contentInsetStart="72dp"
           app:layout_collapseMode="pin"
           app:layout_scrollFlags="scroll|enterAlways"
           app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_marginLeft="72dp"
           android:text="Project Tango = Mobile 3D tracking and perception"
           android:textColor="#FFFFFF"
           android:textSize="20sp"
           android:textStyle="bold" />

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_marginLeft="72dp"
           android:layout_marginRight="16dp"
           android:text="29 May 10:00-11:00 am in Room 2 (L2)"
           android:textColor="#FFFFFF"
           android:textSize="14sp" />

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

   <ScrollView
      android:layout_below="@id/appbar"
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      <TextView
         android:text="@string/longText"
         android:layout_width="match_parent"
         android:layout_height="wrap_content" />

   </ScrollView>

</RelativeLayout>

My Code Screenshot

Google IO app - screenshot

Answer 1

我解决了！将 Parent ScrollView 替换为 StickyScrollViewItems 并将 AppBarLayout 设置为sticky。

activity_detail.xml

<com.emilsjolander.components.StickyScrollViewItems.StickyScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="196dp"
            android:layout_alignParentTop="true"
            android:src="@mipmap/ic_launcher" />

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_below="@id/imageView"
            android:background="@color/blue"
            android:fitsSystemWindows="true"
            android:tag="sticky"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetLeft="72dp"
                app:contentInsetStart="72dp"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="72dp"
                android:text="Project Tango = Mobile 3D tracking and perception"
                android:textColor="#FFFFFF"
                android:textSize="20sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="72dp"
                android:layout_marginRight="16dp"
                android:text="29 May 10:00-11:00 am in Room 2 (L2)"
                android:textColor="#FFFFFF"
                android:textSize="14sp" />

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


        <TextView
            android:layout_below="@id/appbar"
            android:text="@string/longText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />


    </RelativeLayout>

</com.emilsjolander.components.StickyScrollViewItems.StickyScrollView>

DetailActivity.java

public class DetailActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private StickyScrollView scrollView;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_detail);

         toolbar = (Toolbar) findViewById(R.id.toolbar);
         setSupportActionBar(toolbar);
         getSupportActionBar().setDisplayHomeAsUpEnabled(true);
         getSupportActionBar().setDisplayShowTitleEnabled(false);

         imageView = (ImageView) findViewById(R.id.imageView);
         scrollView = (StickyScrollView) findViewById(R.id.scrollView);


         scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
            @Override
            public void onScrollChanged() {
                int scrollY = scrollView.getScrollY();
                imageView.setTranslationY(scrollY/2);
            }
         });
    }
}