CoordinatorLayout CollaspingToolBar

继续整理design support包的控件

Java代码

package com.example.administrator.recycleviewdemo;

import android.os.Bundle;
import android.os.PersistableBundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

/**
* Created by Administrator on 2015/10/19.
* CoordinatorLayout的用法
* 1.定义一个类继承自AppCompatActivity
* 2.定义Coordinator布局文件
* 3.测试效果：定义fab的点击事件显示snackbar
*/
public class CoordinatorActivity extends AppCompatActivity {
FloatingActionButton fab_btn;
CoordinatorLayout frameLayout;
Toolbar toolbar;
CollapsingToolbarLayout collapsingToolbarLayout;

@Override
public void onCreate(Bundle savedInstanceState, PersistableBundle persistentState) {
super.onCreate(savedInstanceState, persistentState);
setContentView(R.layout.coordinator_layout);
//设置actionbar
initViews();
collapsingToolbarLayout.setTitle("测试collapsingToolbarLayout，设置title");
setSupportActionBar(toolbar);
if (getSupportActionBar() == null) {
return;
}
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
fab_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(frameLayout, "snackbar相当于toast", Snackbar.LENGTH_LONG).setAction("点击按钮消失(提示信息)", new View.OnClickListener() {
@Override
public void onClick(View v) {
}
}).show();
}
});
}

private void initViews() {
fab_btn = (FloatingActionButton) this.findViewById(R.id.fab_btn);
frameLayout = (CoordinatorLayout) findViewById(R.id.root);
toolbar = (Toolbar) findViewById(R.id.toolbar);
collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collaspingtoolbarlayout);
}
}

xml代码：

<?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:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="测试文字" />

<android.support.design.widget.AppBarLayout
android:layout_width="fill_parent"
android:layout_height="300dp"
app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collaspingtoolbarlayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginStart="80dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="@mipmap/win7" />

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#77db93"
android:minHeight="10dp" />

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />s

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

</LinearLayout>
</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:src="@mipmap/ic_launcher"
app:fabSize="normal" />

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

备注：

设置移动手势，toolbar可以随之缩放

在toolbar外包裹一层控件：<android.support.design.widget.CollapsingToolbarLayout/>

属性：

app：layout_collapseMode="pin" 上划后文字显示在toolbar中

在Java代码中获得collapsingtoolbarlayout对象，通过setTitle()设置标题

通过在<android.support.design.widget.AppBarLayout>中设置

app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"

修改为白色的字体颜色

app:expandedTitleMarginStart="80dp"：从开始移动的位置文字就变小

给imageview添加滑动的标签：

app:layout_collapseMode="parallax" 效果非常优雅

为滑动设置系数

app:layout_collapseParallaxMultiplier="0.2" 0~1之间

//-----------上面设置在imageview中

//--------下面设置在collaspingtoolbarlayout中

app:contentScrim="背景色"滑动到指定的大小的时候 ，显示这个背景色，不显示图片