Google의 설계 가이드라인 Scrolling techniques 을 구현하기 위한 캠페인을 시도하고 있습니다.
안드로이드2도 시작됩니다.코드는 여기.입니다.

애니메이션 설명

스크롤 위치에 따라 4개의 View가 변경됩니다.

이미지의 Parallax

이미지의 배경색 투명도(100% →0%)

툴바의 배경색 투명도(100%→0%)

이미지의 TextView 위치 및 크기

코드 설명

화면 전체가 이렇다.

PhotoHeaderView는 간이다.

PhotoHeaderView 배치

실제로 판면 디자인은 좀 번거로워서 모두 4개의 레이아웃으로 구성되어 있다.

ui_photo_header.xml

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">

    <!-- ① -->
    <com.konifar.scroll_technique.views.AspectRatioImageView
        android:id="@+id/img_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        app:imageRatio="1.33" />

    <!-- ③ -->
    <!-- このレイアウトはタイトルのTextViewの文字が見やすいように
      黒のグラデーションをつけるためのものです。 -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="76dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/bg_black_gradient" />

    <!-- ② -->
    <View
        android:id="@+id/img_header_cover"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignBottom="@id/img_header"
        android:layout_alignLeft="@id/img_header"
        android:layout_alignRight="@id/img_header"
        android:layout_alignTop="@id/img_header" />

    <!-- TextViewのアニメーションで大きさを変えるために
      layout_widthをwrap_contentにする必要があるので
      FrameLayoutでラップしています。 -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:paddingBottom="12dp"
        android:paddingLeft="4dp"
        android:paddingTop="12dp">

        <!-- ④ -->
        <TextView
            android:id="@+id/txt_title"
            style="@style/TextTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textColor="@color/white"
            android:textStyle="normal" />
    </FrameLayout>

</RelativeLayout>

PhotoHeaderView 애니메이션

스크롤 위치 애니메이션에 맞춰야 하지만 PhotoHeaderViewtranslate에서 제작 방법이 실시되고 있다.코드는 이 일대입니다.
PhotoHeaderView.java

public void translate(final Toolbar toolbar, final int colorResId) {
    float top = getTop();
    float transitionHeight = (float) (getImgHeader().getHeight() - toolbar.getHeight());

    // 画像のParallax。スクロールした距離の半分を動かすようにしています。
    ViewHelper.setTranslationY(getImgHeader(), -top * 0.5f);

    float ratio = caltulateRatio(-top, transitionHeight);

    // 画像の背景色透過度をスクロール分変化させています。
    final ColorDrawable colorDrawable = new ColorDrawable(getResources().getColor(colorResId));
    colorDrawable.setAlpha((int) (ratio * 255));
    ViewUtils.getInstance().setBackground(getImgHeaderCover(), colorDrawable);

    // タイトルテキストの位置と大きさを変更します。
    interpolate(toolbar, ratio);

    TextView textView = ViewUtils.getInstance().getToolbarTextView(toolbar);
    if (caltulateRatio(-top, transitionHeight) >= 1f) {
        toolbar.setBackgroundResource(colorResId);
        textView.setTextColor(getResources().getColor(R.color.white));
    } else {
        toolbar.setBackgroundResource(android.R.color.transparent);
         textView.setTextColor(getResources().getColor(android.R.color.transparent));
    }
}

나머지는 onScroll로 이translate 방법을 호출하는 것이다.
MainActivity.java

mListView.setOnScrollListener(new AbsListView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        // Do nothing
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        header.translate(mToolbar, R.color.theme500);
    }
});

할 수 없는 일

대체로 기본적인 동작은 이미 실현되었지만, 때로는 아직 완성하지 못했다.

1. interpolator

가이드라인 애니메이션을 봤더니 처음 스크롤하기 시작했을 때 TextView는 애니메이션 없이 절반 정도 스크롤한 곳에서 위치와 크기 변화를 시작해 Toolbar 제목으로 이동했다.
여기서 조금만 힘쓰면 돼.

2. 이미지 배경색 투명도

어느 정도 스크롤하면 배경색의 투명도가 자동으로 0%로 변하는 것이 좋지만 그럴 수는 없습니다.

3. onScroll 시 매번 계산

온스컬을 할 때마다 ImageView의 위치와 TextView의 크기를 계산하기 때문에 캐시할 수 있는 곳은 캐시입니다.
아마도 편리한 도서관이 있을 것이다.
그리고 더 좋은 실복이 있으면 꼭 알려주세요!