CoordinatorLayout的使用

Google在 android.support.design 包中新增的 CoordinatorLayout 布局, 可以简单理解为一个升级版本的 FrameLayout .具体用法如下：

首先我们来看一下运行效果

我们讲的是使用，内部结构是什么，以及滑动冲突就不在次详细说明。

---

具体的代码操作;

---

首先我们在Android Studio的gradle中导入需要的包

    compile 'de.hdodenhof:circleimageview:1.3.0'
    compile 'com.android.support:cardview-v7:24.2.1'
    compile 'com.android.support:design:24.2.1'

---

MainActivity的代码：

package com.xyliwp.news.view.activity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

import com.xyliwp.news.R;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

import static com.xyliwp.news.util.Content.setWindowStatusBarColor;

/**
 * Created by wenpengli on 2017/3/15.
 */
public class NewActivity extends Activity{

    private static final String TAG = "NewActivity -- ";
    private String resurt = "";
    // 控制ToolBar的变量
    private static final float PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR = 0.9f;
    private static final float PERCENTAGE_TO_HIDE_TITLE_DETAILS = 0.3f;
    private static final int ALPHA_ANIMATIONS_DURATION = 200;

    private boolean mIsTheTitleVisible = false;
    private boolean mIsTheTitleContainerVisible = true;
    private LinearLayout lin;
    private ImageView mIvPlaceholder; // 大图片
    private LinearLayout mLlTitleContainer; // Title的LinearLayout
    private FrameLayout mFlTitleContainer; // Title的FrameLayout
    private AppBarLayout mAblAppBar; // 整个可以滑动的AppBar
    private TextView mTvToolbarTitle; // 标题栏Title
    private Toolbar mTbToolbar; // 工具栏

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_new);
 //该行代码可以省略，母的是为了改变通知栏的颜色      setWindowStatusBarColor(this,R.color.radiobuttonzhong);
        init();
    }
    private void init(){
        Intent intent1 = this.getIntent();
        resurt = intent1.getStringExtra("url");
        mIvPlaceholder = (ImageView)findViewById(R.id.main_iv_placeholder);
        mLlTitleContainer = (LinearLayout) findViewById(R.id.main_ll_title_container);
        lin = (LinearLayout) findViewById(R.id.linearlayout_new_xin);
        mFlTitleContainer = (FrameLayout )findViewById(R.id.main_fl_title);
        mAblAppBar = (AppBarLayout)findViewById(R.id.main_abl_bar);
        mTvToolbarTitle = (TextView )findViewById(R.id.main_tv_toolbar_title);
        mTbToolbar = (Toolbar )findViewById(R.id.main_tb_toolbar);

        mTbToolbar.setTitle("");
        // AppBar的监听
        mAblAppBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                int maxScroll = appBarLayout.getTotalScrollRange();
                float percentage = (float) Math.abs(verticalOffset) / (float) maxScroll;
                handleAlphaOnTitle(percentage);
                handleToolbarTitleVisibility(percentage);
            }
        });

        initParallaxValues(); // 自动滑动效果
    }
    // 设置自动滑动的动画效果
    private void initParallaxValues() {
        CollapsingToolbarLayout.LayoutParams petDetailsLp =
                (CollapsingToolbarLayout.LayoutParams) lin.getLayoutParams();

        CollapsingToolbarLayout.LayoutParams petBackgroundLp =
                (CollapsingToolbarLayout.LayoutParams) mFlTitleContainer.getLayoutParams();

        petDetailsLp.setParallaxMultiplier(0.9f);
        petBackgroundLp.setParallaxMultiplier(0.3f);

        lin.setLayoutParams(petDetailsLp);
        mFlTitleContainer.setLayoutParams(petBackgroundLp);
    }

    // 处理ToolBar的显示
    private void handleToolbarTitleVisibility(float percentage) {
        if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {
            if (!mIsTheTitleVisible) {
                startAlphaAnimation(mTvToolbarTitle, ALPHA_ANIMATIONS_DURATION, View.VISIBLE);
                mIsTheTitleVisible = true;
            }
        } else {
            if (mIsTheTitleVisible) {
                startAlphaAnimation(mTvToolbarTitle, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE);
                mIsTheTitleVisible = false;
            }
        }
    }

    // 控制Title的显示
    private void handleAlphaOnTitle(float percentage) {
        if (percentage >= PERCENTAGE_TO_HIDE_TITLE_DETAILS) {
            if (mIsTheTitleContainerVisible) {
                startAlphaAnimation(mLlTitleContainer, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE);
                mIsTheTitleContainerVisible = false;
            }
        } else {
            if (!mIsTheTitleContainerVisible) {
                startAlphaAnimation(mLlTitleContainer, ALPHA_ANIMATIONS_DURATION, View.VISIBLE);
                mIsTheTitleContainerVisible = true;
            }
        }
    }

    // 设置渐变的动画
    public static void startAlphaAnimation(View v, long duration, int visibility) {
        AlphaAnimation alphaAnimation = (visibility == View.VISIBLE)
                ? new AlphaAnimation(0f, 1f)
                : new AlphaAnimation(1f, 0f);

        alphaAnimation.setDuration(duration);
        alphaAnimation.setFillAfter(true);
        v.startAnimation(alphaAnimation);
    }
}

---

AvatarImageBehavior类为图片控件位置动画效果具体代码如下：

package com.xyliwp.news.view.activity;

import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.view.View;

import com.xyliwp.news.R;

import de.hdodenhof.circleimageview.CircleImageView;

/**
 * 图片控件位置动画
 *
 */
@SuppressWarnings("unused")
public class AvatarImageBehavior extends CoordinatorLayout.Behavior<CircleImageView> {

    private final static float MIN_AVATAR_PERCENTAGE_SIZE = 0.3f;
    private final static int EXTRA_FINAL_AVATAR_PADDING = 80;

    private int mStartYPosition; // 起始的Y轴位置
    private int mFinalYPosition; // 结束的Y轴位置
    private int mStartHeight; // 开始的图片高度
    private int mFinalHeight; // 结束的图片高度
    private int mStartXPosition; // 起始的X轴高度
    private int mFinalXPosition; // 结束的X轴高度
    private float mStartToolbarPosition; // Toolbar的起始位置

    private final Context mContext;
    private float mAvatarMaxSize;

    public AvatarImageBehavior(Context context, AttributeSet attrs) {
        mContext = context;
        init();
    }

    private void init() {
        bindDimensions();
    }

    private void bindDimensions() {
        mAvatarMaxSize = mContext.getResources().getDimension(R.dimen.image_width);
    }


    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) {
        // 依赖Toolbar控件
        return dependency instanceof Toolbar;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {

        // 初始化属性
        shouldInitProperties(child, dependency);

        // 最大滑动距离: 起始位置-状态栏高度
        final int maxScrollDistance = (int) (mStartToolbarPosition - getStatusBarHeight());

        // 滑动的百分比
        float expandedPercentageFactor = dependency.getY() / maxScrollDistance;

        // Y轴距离
        float distanceYToSubtract = ((mStartYPosition - mFinalYPosition)
                * (1f - expandedPercentageFactor)) + (child.getHeight() / 2);

        // X轴距离
        float distanceXToSubtract = ((mStartXPosition - mFinalXPosition)
                * (1f - expandedPercentageFactor)) + (child.getWidth() / 2);

        // 高度减小
        float heightToSubtract = ((mStartHeight - mFinalHeight) * (1f - expandedPercentageFactor));

        // 图片位置
        child.setY(mStartYPosition - distanceYToSubtract);
        child.setX(mStartXPosition - distanceXToSubtract);

        // 图片大小
        CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
        lp.width = (int) (mStartHeight - heightToSubtract);
        lp.height = (int) (mStartHeight - heightToSubtract);
        child.setLayoutParams(lp);

        return true;
    }

    /**
     * 初始化动画值
     *
     * @param child      图片控件
     * @param dependency ToolBar
     */
    private void shouldInitProperties(CircleImageView child, View dependency) {

        // 图片控件中心
        if (mStartYPosition == 0)
            mStartYPosition = (int) (child.getY() + (child.getHeight() / 2));

        // Toolbar中心
        if (mFinalYPosition == 0)
            mFinalYPosition = (dependency.getHeight() / 2);

        // 图片高度
        if (mStartHeight == 0)
            mStartHeight = child.getHeight();

        // Toolbar缩略图高度
        if (mFinalHeight == 0)
            mFinalHeight = mContext.getResources().getDimensionPixelOffset(R.dimen.image_final_width);

        // 图片控件水平中心
        if (mStartXPosition == 0)
            mStartXPosition = (int) (child.getX() + (child.getWidth() / 2));

        // 边缘+缩略图宽度的一半
        if (mFinalXPosition == 0)
            mFinalXPosition = mContext.getResources().getDimensionPixelOffset(R.dimen.abc_action_bar_content_inset_material) + (mFinalHeight / 2);

        // Toolbar的起始位置
        if (mStartToolbarPosition == 0)
            mStartToolbarPosition = dependency.getY() + (dependency.getHeight() / 2);
    }

    // 获取状态栏高度
    public int getStatusBarHeight() {
        int result = 0;
        int resourceId = mContext.getResources().getIdentifier("status_bar_height", "dimen", "android");

        if (resourceId > 0) {
            result = mContext.getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }
}

---

XML文件的类容：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="false">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/main_abl_bar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="450dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <LinearLayout
                android:id="@+id/linearlayout_new_xin"
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:orientation="vertical">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="@color/radiobuttonzhong"
                    android:orientation="horizontal">
                    <LinearLayout
                        android:id="@+id/linearLayout_new_back"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:orientation="vertical"
                        android:gravity="center">
                        <ImageView
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:layout_gravity="center"
                            android:background="@mipmap/back" />
                    </LinearLayout>
                    <TextView
                        android:id="@+id/textview_new_sousuo"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="49dp"
                        android:gravity="center"
                        android:text="明星简介"
                        android:textStyle="bold"
                        android:textColor="@color/baise"
                        android:textSize="22sp" />
                    <TextView
                        android:layout_width="49dp"
                        android:layout_height="49dp"
                        android:gravity="center"/>
                </LinearLayout>

                <ImageView
                    android:id="@+id/main_iv_placeholder"
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/yangmi"
                    app:layout_collapseMode="parallax" />
            </LinearLayout>

            <FrameLayout
                android:id="@+id/main_fl_title"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_gravity="bottom|center_horizontal"
                android:background="@color/radiobuttonzhong"
                app:layout_collapseMode="parallax">

                <LinearLayout
                    android:id="@+id/main_ll_title_container"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:orientation="vertical">
                    <TextView
                        android:layout_marginTop="20dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:gravity="bottom|center"
                        android:text="@string/person_name"
                        android:textColor="@android:color/white"
                        android:textSize="30sp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="4dp"
                        android:text="@string/person_title"
                        android:textColor="@android:color/white" />
                </LinearLayout>
            </FrameLayout>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        app:behavior_overlapTop="30dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            app:cardElevation="8dp"
            app:contentPadding="16dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lineSpacingExtra="8dp"
                android:text="@string/person_intro" />

        </android.support.v7.widget.CardView>
    </android.support.v4.widget.NestedScrollView>
    <android.support.v7.widget.Toolbar
        android:id="@+id/main_tb_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/radiobuttonzhong"
        app:layout_anchor="@id/main_fl_title">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            <Space
                android:layout_width="@dimen/image_final_width"
                android:layout_height="@dimen/image_final_width" />

            <TextView
                android:id="@+id/main_tv_toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="8dp"
                android:gravity="center_vertical"
                android:text="@string/person_name"
                android:textColor="@android:color/white"
                android:textSize="20sp"
                android:visibility="invisible"/>

        </LinearLayout>

    </android.support.v7.widget.Toolbar>

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="@dimen/image_width"
        android:layout_height="@dimen/image_width"
        android:layout_gravity="center"
        android:src="@mipmap/yangmi"
        app:border_color="@android:color/white"
        app:border_width="2dp"
        app:layout_behavior=".view.activity.AvatarImageBehavior" />

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

---

strings.xml文件如下：

<resources>
    <string name="person_name">杨幂</string>
    <string name="person_title">女神</string>
    <string name="person_intro">
        杨幂，1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。
        2005年，杨幂进入北京电影学院表演系本科班就读。2006年，杨幂因出演金庸武侠剧《神雕侠侣》而崭露头角。
        2008年，杨幂凭借历史剧《王昭君》获得了第24届中国电视金鹰奖观众喜爱的电视剧女演员奖提名[1]  。
        2009年，杨幂在“80后新生代娱乐大明星”评选活动中与其她三位女演员共同被评为“四小花旦”[2]  。
        2011年，杨幂凭借穿越剧《宫锁心玉》赢得广泛关注[3]  ，并获得了第17届上海电视节白玉兰奖观众票选最具人气女演员奖[4]  。
        2012年，杨幂工作室成立，而她则凭借都市剧《北京爱情故事》相继获得第9届金鹰电视艺术节最具人气女演员奖[5]
        、第26届中国电视金鹰奖观众喜爱的电视剧女演员奖提名[6]  。
        2015年，杨幂主演的《小时代》系列电影取得了近18亿人民币的票房成绩[7]  。
        2016年，其主演的职场剧《亲爱的翻译官》取得全国年度电视剧收视冠军[8]  。
        2017年，她主演的仙侠剧《三生三世十里桃花》获得颇高关注。</string>
</resources>

---

dimens.xml文件如下：

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

    <dimen name="fab_margin">16dp</dimen>

    <dimen name="image_final_width">32dp</dimen>
    <dimen name="spacing_normal">16dp</dimen>
    <dimen name="image_width">120dp</dimen>
    <dimen name="title_margin">20dp</dimen>
</resources>

---

我们在代码中使用的图片为：

---

里面的颜色代码 我就不贴出来了。