最近在研究material design ,瞭解到 CoordinatorLayout 這個佈局，所以研究和學習下，寫了個demo.加上拓展仿照了一個標題欄下方圖片的回彈效果，但不是使用CoordinatorLayout 實現的，下面看圖：

第一個效果是使用了CoordinatorLayout的佈局

• 什麼是CoordinatorLayout的佈局

• 如何加入CoordinatorLayout的佈局
  compile ‘com.android.support:design:22.2.1

• 佈局檔案

activity_coordinator1_layout.xml

<?xml version="1.0"
 
 encoding="utf-8"?>
<LinearLayout 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:fitsSystemWindows="true"
 
>

    <android.support.design.widget.CoordinatorLayout
            android:id="@+id/coordinator_root"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <!-- toolbar 標題欄和圖片的收縮隱藏顯示-->
        <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
 

                android:layout_height="256dp"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                    android:id="@+id/collapsing_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:contentScrim="?attr/colorPrimary"
                    app:expandedTitleMarginEnd="64dp"
                    app:expandedTitleMarginStart="48dp"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                        android:id="@+id/ivImage"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="centerCrop"
                        app:layout_collapseMode="parallax"
                        app:layout_collapseParallaxMultiplier="0.7"/>

                <android.support.v7.widget.Toolbar
                        android:id="@+id/toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        app:layout_collapseMode="pin"
                        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <!-- 內嵌的scrollView  app:layout_behavior 這裡是關鍵地方 -->
        <android.support.v4.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/white"
                    android:paddingBottom="@dimen/activity_vertical_margin"
                    android:paddingLeft="@dimen/activity_horizontal_margin"
                    android:paddingRight="@dimen/activity_horizontal_margin"
                    android:paddingTop="@dimen/activity_vertical_margin"
                    android:text="@string/lipsum"/>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

activity內容

public abstract class BaseActivity extends AppCompatActivity{
    protected abstract void initView();

    protected int getLayoutResId() {
        return R.layout.activity_main;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(getLayoutResId());
//        StatusBarCompat.compat(this,getResources().getColor(R.color.primary_dark));

        SystemBarTintManager tintManager = new SystemBarTintManager(this);
        tintManager.setStatusBarTintEnabled(true);
        tintManager.setNavigationBarTintEnabled(true);
        tintManager.setTintColor(getResources().getColor(R.color.primary_dark));
        initView();
    }
}

/**
 * lh on 2016/4/8.
 */
public class Coordinator1Activity extends BaseActivity{
    @Override
    protected int getLayoutResId() {
        return R.layout.activity_coordinator1_layout;
    }

    @SuppressWarnings("NewApi")
    @Override
    protected void initView() {
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                onBackPressed();
            }
        });

        ImageView imageView = (ImageView)findViewById(R.id.ivImage);
        imageView.setBackground(getResources().getDrawable(R.drawable.example_header));

        CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle("lh 測試標題");
    }
}

注意：在寫這裡的時候 collapsingToolbar.setTitle(“lh 測試標題”); 這句話，我一開始的時候，並沒有加上，導致和我的狀態列和 toolbar 重疊衝突了，至於在佈局檔案中，再包一層LinearLayout 是為了加上沉浸式狀態列的效果。

• 還有一個通過scrollView 來實現相同的效果，是一個開源的框架，我也仿照寫過demo。

第二個效果是使用了PullZoom的佈局,對於狀態了，我在原始碼的基礎上稍做了修改。因為在用Iphone 上QQ 音樂的時候，發現檢視歌手的頁面，狀態列下方圖片可以防縮，而且標題欄還跟著改變，下面的佈局和圖片的滾動互不影響，決定仿照一個。

• 佈局檔案

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              android:fitsSystemWindows="true">

    <com.myapplication2.app.newsdemo.view.pulltozoomview.PullToZoomScrollViewEx
            android:id="@+id/scroll_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    <RelativeLayout
            android:id="@+id/aplha_head"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/transparent">

        <TextView
                android:id="@+id/coordinator_head_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:background="@drawable/common_top_back_icon"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:textSize="18sp"
                android:textColor="@color/alpha_white"/>
    </RelativeLayout>
</RelativeLayout>

• activity

public class Coordinator2Activity extends BaseActivity{
    PullToZoomScrollViewEx scrollView;
    @Override
    protected int getLayoutResId() {
        return R.layout.activity_coordinator2_layout;
    }

    @SuppressWarnings("NewApi")
    @Override
    protected void initView() {

        loadViewForCode();

        scrollView = (PullToZoomScrollViewEx) findViewById(R.id.scroll_view);
        DisplayMetrics localDisplayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(localDisplayMetrics);
        int mScreenWidth = localDisplayMetrics.widthPixels;
        LinearLayout.LayoutParams localObject = new LinearLayout.LayoutParams(mScreenWidth, (int) (9.0F * (mScreenWidth / 16.0F)));
        scrollView.setHeaderLayoutParams(localObject);

        findViewById(R.id.coordinator_head_back).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
    }

    private void loadViewForCode() {
        scrollView = (PullToZoomScrollViewEx) findViewById(R.id.scroll_view);
        View zoomView = LayoutInflater.from(this).inflate(R.layout.profile_zoom_view, null, false);
        View contentView = LayoutInflater.from(this).inflate(R.layout.profile_content_view, null, false);

        scrollView.setZoomView(zoomView);
        scrollView.setScrollContentView(contentView);
        //這裡是我自己加的一個方法，將頭部view 和高度傳過去，
        scrollView.setAplhaHead(findViewById(R.id.aplha_head),50);
    }
}

注意：如果要頭部在圖片隱藏的時候顯示，需要修改對應的java 類，這裡我使用的是PullToZoomScrollViewEx

增加如下的方法：

public void setAplhaHead(View head, int headHeightIndp) {
        alphaHeadView = head;
        mAlphaHeadHeightIndp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, headHeightIndp, getResources().getDisplayMetrics());
    }


----------------------

public PullToZoomScrollViewEx(Context context, AttributeSet attrs) {
        super(context, attrs);
        mScalingRunnable = new ScalingRunnable();
        ((InternalScrollView) mRootView).setOnScrollViewChangedListener(new OnScrollViewChangedListener() {
            @Override
            public void onInternalScrollChanged(int left, int top, int oldLeft, int oldTop) {
                if (isPullToZoomEnabled() && isParallax()) {
                    int scrollY = mRootView.getScrollY();
                    Log.d(TAG, "onScrollChanged --> getScrollY() = " + scrollY);
                    float f = mHeaderHeight - mHeaderContainer.getBottom() + scrollY;
                    Log.d(TAG, "onScrollChanged --> f = " + f);

                    //這裡增加對top view 的顏色的改變
                    if (scrollY <= mHeaderHeight - mAlphaHeadHeightIndp) {
                        alphaHeadView.setBackgroundColor(getResources().getColor(R.color.transparent));
                    } else {
                        alphaHeadView.setBackgroundColor(getResources().getColor(R.color.primary));
                    }

                    if ((f > 0.0F) && (f < mHeaderHeight)) {
                        int i = (int) (0.65D * f);
                        mHeaderContainer.scrollTo(0, -i);
                    } else if (mHeaderContainer.getScrollY() != 0) {
                        mHeaderContainer.scrollTo(0, 0);
                    }
                }
            }
        });
    }