CoordinatorLayout,CollapsingToolbarLayout,AppBarLayout简单使用

通过学习http://www.jianshu.com/p/56c96fc7340f这篇文章和自己的学习,记录下自己的理解.

布局文件

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.jack.coordinatorlayouttest.ScrollingActivity">

<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="@color/color1984D1"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:title="哈哈">
<!--app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways"-->
<!--app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"-->
<include
layout="@layout/shenghuo_head1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:layout_marginBottom="25dp"
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:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin">

<include
android:id="@+id/toolbar1"
layout="@layout/toolbar_head1"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<include
android:id="@+id/toolbar2"
layout="@layout/toolbar_head2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"/>

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

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

<include layout="@layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="end|bottom|right" />
</android.support.design.widget.CoordinatorLayout>

//个人总结:

//CollapsingToolbarLayout相关属性解释

// CollapsingToolbarLayout设置title时,会覆盖掉Toolbar的设置title

// –>title:当titleEnable设置为true的时候，在toolbar展开的时候，显示大标题，toolbar收缩时，显示为toolbar上面的小标题。

// Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

// toolbar.setTitle(“HD TEST”);

// toolbar.setNavigationIcon(R.drawable.back);

// setSupportActionBar(toolbar);

// 这一块无效

// CollapsingToolbarLayout的属性关系

// –>scrimAnimationDuration：该属性控制toolbar收缩时，颜色变化的动画持续时间。

// 即颜色变为contentScrim所指定的颜色进行的动画所需要的时间

// –>expandedTitleGravity：指定toolbar展开时，title所在的位置。

// 类似的还有expandedTitleMargin、collapsedTitleGravity这些属性。

// app:expandedTitleMarginEnd=”20dp”和app:expandedTitleMarginStart=”10dp”

// 表示start距离左边间距,end即是右边,Gravity即是相对隐藏那一块内容的位置,比如

// center就是下拉后那一块的中心.

// –>collapsedTitleTextAppearance：指定toolbar收缩时，标题字体的样式，

// 类似的还有expandedTitleTextAppearance。

// app:contentScrim=设置背景色;

// –>contentScrim：当Toolbar收缩到一定程度时的所展现的主体颜色。即Toolbar的颜色。

// app:layout_scrollFlags:

// scroll 代表可以滑出屏幕

// –>* scroll:所有想要滑动的控件都要设置这个标志位。如果不设置这个标志位，那么View会固定不动。

// exitUntilCollapsed 可固定在屏幕顶部

// –>* exitUntilCollapsed:向上滑动时收缩当前View。但view可以被固定在顶部

// enterAlwaysCollapsed 显示的时候一下子出来的内容,设置的话只出现titlebar,不会出现隐藏的那一块内容

// 图片或者布局,不设置都会显示出来;

// –>enterAlwaysCollapsed:设置了minHeight，同时设置了该标志位的话，view会以最小高度进度屏幕，

// 当滑动控件滑动到顶部的时候才会拓展为完整的高度。

// enterAlways 代表toolbar也会滑出屏幕,然后下滑的时候展示.

// –>* enterAlways:设置了该标志位后，若View已经滑出屏幕，

// 此时手指向下滑，View会立刻出现，这是另一种使用场景。

FloatingActionButton

和一般按钮差不多,只不过可以app:layout_anchor=”@id/app_bar”这个和绑定的控件共同在一个CoordinatorLayout中, app:layout_anchorGravity=”end|bottom|right” 这个用来设置位置,相对上面那个id绑定的控件.

//

//基础布局格式

//最外层是CoordinatorLayout,宽高都是填充屏幕.可设置android:fitsSystemWindows=”true”

// 这主要是关于状态栏的设置,是否可填充到状态栏.

//然后先添加相应的AppBarLayout.宽是填充屏幕.高是包裹内容.id为android:id=”@+id/app_bar”;

//在AppBarLayout中嵌入CollapsingToolbarLayout.这一块代表滑动处理的那一块(标题栏和隐藏的内容(布局,图片等));

// CollapsingToolbarLayout宽高都是填充父布局,然后参照上面属性解释.

//在CollapsingToolbarLayout中,一般先嵌入隐藏的内容(布局,图片等),除了一般属性外

//还要设置 app:layout_collapseMode=,为了隐藏设置为”parallax”即是这块内容可一块滚动;还有一个值是”pin”代表悬浮顶部

//”parallax”一般配合app:layout_collapseParallaxMultiplier=”0.7”一般值在0-1之间.视差滚动效果因子.

//再嵌入 Toolbar,Toolbar的宽度填充父布局高度为android:layout_height=”?attr/actionBarSize”;(看大家都写的这个)

//id为android:id=”@+id/toolbar”;(这个好像固定的)可设置app:contentInsetLeft=”0dp”和app:contentInsetStart=”0dp”

//设置标题间距;app:layout_collapseMode=”pin”这个为了停留在顶部必须设置为”pin”;

//这情况是默认的toolbar标题,如果什么都不写就默认了.

//一般我们可以自定义标题的切换,可以放入两个布局,来回切换显示,可以设置透明度等.

//在代码中通过设置AppBarLayout.addOnOffsetChangedListener()设置监听,根据滑动的距离和

//可以活动的最大距离进行切换.如

// mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

//@Override

//public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

// if (isFirst){

// scrollDistance = appBarLayout.getTotalScrollRange();

// isFirst = false;

// }

// Log.i(“hh”, “verticalOffset=” + verticalOffset + “appBarLayout.getTotalScrollRange()=” + appBarLayout.getTotalScrollRange());

//// if (verticalOffset == 0){

//// //张开

//// mToolbar1.setVisibility(View.VISIBLE);

//// mToolbar2.setVisibility(View.GONE);

//// setToolbar1Alpha(255);

//// } else if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {

//// //收缩

//// mToolbar1.setVisibility(View.GONE);

//// mToolbar2.setVisibility(View.VISIBLE);

//// setToolbar2Alpha(255);

//// } else {

// int alpha = 100 - Math.abs(verticalOffset);

// if (alpha >= 0){

// if (View.VISIBLE != mToolbar1.getVisibility()){

// mToolbar1.setVisibility(View.VISIBLE);

// }

// if (View.GONE != mToolbar2.getVisibility()){

// mToolbar2.setVisibility(View.GONE);

// }

// setToolbar1Alpha(alpha * 255 / 100);

// }else {

// if (View.GONE != mToolbar1.getVisibility()){

// mToolbar1.setVisibility(View.GONE);

// }

// if (View.VISIBLE != mToolbar2.getVisibility()){

// mToolbar2.setVisibility(View.VISIBLE);

// }

// setToolbar2Alpha(Math.abs(alpha) * 255 / (scrollDistance - 100));

// }

//// int alpha = 255 - Math.abs(verticalOffset) - 150;

//// if(alpha <= 0){

//// //收缩toolbar

//// mToolbar1.setVisibility(View.GONE);

//// mToolbar2.setVisibility(View.VISIBLE);

//// setToolbar2Alpha(Math.abs(verticalOffset));

//// }else{

//// //张开toolbar

//// mToolbar1.setVisibility(View.VISIBLE);

//// mToolbar2.setVisibility(View.GONE);

//// setToolbar1Alpha(alpha);

//// }

//// }

// }

// });

// }

//

////设置展开时各控件的透明度

//public void setToolbar1Alpha(int alpha){

// mZhangdan.getDrawable().setAlpha(alpha);

// mZhangdan_txt.setTextColor(Color.argb(alpha,255,255,255));

// mTongxunlu.getDrawable().setAlpha(alpha);

// mJiahao.getDrawable().setAlpha(alpha);

// }

//

////设置闭合时各控件的透明度

//public void setToolbar2Alpha(int alpha){

// mZhangdan2.getDrawable().setAlpha(alpha);

// mShaoyishao.getDrawable().setAlpha(alpha);

// mSearch.getDrawable().setAlpha(alpha);

// mZhaoxiang.getDrawable().setAlpha(alpha);

// }