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);
// }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值