CollapsingToolbarLayout结合ToolBar使用

最新推荐文章于 2024-04-10 05:32:16 发布
最新推荐文章于 2024-04-10 05:32:16 发布
阅读量2.7k 收藏 2
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/small_lee/article/details/52089623
版权

效果图

这里写图片描述

代码

<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="#00ff99">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#FA7199"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="?attr/colorPrimary"
            >
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ADADAD"
                >
                <TextView
                    android:id="@+id/tv_Center_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="立即播放"
                    android:textSize="20sp"
                    android:textColor="@android:color/white"
                    android:layout_centerInParent="true"
                    />
                <TextView
                    android:id="@+id/tv_left"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentBottom="true"
                    android:text="关注"
                    android:textSize="16sp"
                    android:textColor="@android:color/white"
                    />
                <ImageView
                    android:id="@+id/iv_right_bottom"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:src="@mipmap/ic_launcher"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentBottom="true"
                    />
                <TextView
                    android:id="@+id/tvnum"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:textSize="16sp"
                    android:text="0"
                    android:visibility="gone"
                    android:layout_alignParentBottom="true"
                    />
            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                android:gravity="center"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                >
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    >
                    <TextView
                        android:id="@+id/tv_play"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="#ffffff"
                        android:text="立即播放"
                        android:textSize="20sp"
                        android:layout_centerInParent="true"
                        />
                    <ImageView
                        android:id="@+id/iv_top_right"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:src="@mipmap/ic_launcher"
                     android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:visibility="gone"
                        />
                </RelativeLayout>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

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

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

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {

    public enum State {
        EXPANDED,
        COLLAPSED,
        IDLE
    }

    private State mCurrentState = State.IDLE;

    @Override
    public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        System.out.println("===========i: "+i);//0--208
        if (i == 0) {
            if (mCurrentState != State.EXPANDED) {
                onStateChanged(appBarLayout, State.EXPANDED);
            }
            mCurrentState = State.EXPANDED;
        } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
            if (mCurrentState != State.COLLAPSED) {
                onStateChanged(appBarLayout, State.COLLAPSED);
            }
            mCurrentState = State.COLLAPSED;
        } else {
            if (mCurrentState != State.IDLE) {
                onStateChanged(appBarLayout, State.IDLE);
            }
            mCurrentState = State.IDLE;
        }
    }

    public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
}
public class MainActivity extends AppCompatActivity {
    private List<String> datas;
    private RecyclerView recyclerView;
    private AppBarLayout appBarLayout;
    private TextView mTvPlay;
    private TextView mTvLeft;
    private TextView mTvName;
    private ImageView mIvIcon;
    private TextView mNumber;
    private ImageView mIvTop;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recview);
        appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
        mTvPlay = (TextView) findViewById(R.id.tv_play);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        mTvLeft = (TextView) findViewById(R.id.tv_left);
        mTvName = (TextView) findViewById(R.id.tv_Center_title);
        mIvIcon = (ImageView) findViewById(R.id.iv_right_bottom);
        mIvTop = (ImageView) findViewById(R.id.iv_top_right);
        mNumber = (TextView) findViewById(R.id.tvnum);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        initData();
        CustomAdapter adapter = new CustomAdapter(this,datas);
        RecyclerView.LayoutManager manager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(manager);
        recyclerView.setAdapter(adapter);
        appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                int totalScrollRange = appBarLayout.getTotalScrollRange();
                if(state == State.EXPANDED){
                    mTvPlay.setText("");
                    mTvLeft.setVisibility(View.VISIBLE);
                    mIvIcon.setVisibility(View.VISIBLE);
                    mIvTop.setVisibility(View.GONE);
                }else if(state == State.COLLAPSED){
                    mTvPlay.setText("立即播放");
                    mTvLeft.setVisibility(View.GONE);
                    mIvIcon.setVisibility(View.GONE);
                    mIvTop.setVisibility(View.VISIBLE);
                }else{
                    mTvPlay.setText("");
                    mIvTop.setVisibility(View.GONE);
                }
            }
        });
    }

    public void initData() {
        datas = new ArrayList<>();
        for (int i = 'A'; i < 'Z'; i++) {
            datas.add(""+(char)i);
        }
    }

}

效果图二

这里写图片描述

我们先看布局文件，

<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="160dp"
            app:contentScrim="#FA7199"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="?attr/colorPrimary"
            >
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ADADAD"
                >
                <TextView
                    android:id="@+id/tv_Center_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="立即播放"
                    android:textSize="20sp"
                    android:textColor="@android:color/white"
                    android:layout_centerInParent="true"
                    />
                <TextView
                    android:id="@+id/tv_left"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentBottom="true"
                    android:text="关注"
                    android:textSize="16sp"
                    android:textColor="@android:color/white"
                    />
                <ImageView
                    android:id="@+id/iv_right_bottom"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:src="@mipmap/ic_launcher"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentBottom="true"
                    />
            </RelativeLayout>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                android:gravity="center"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                >
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    >
                    <TextView
                        android:id="@+id/tv_play"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="#ffffff"
                        android:text="立即播放"
                        android:textSize="20sp"
                        android:layout_centerInParent="true"
                        />
                    <ImageView
                        android:id="@+id/iv_top_right"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:src="@mipmap/ic_launcher"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:visibility="gone"
                        />
                </RelativeLayout>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nesview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
            <com.example.personcenter.WrapContentHeightViewPager
                android:id="@+id/vp_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </com.example.personcenter.WrapContentHeightViewPager>

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

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

我们的内容区域采用了NestedScrollView加ViewPager的实现方式，为什么要采用NestedScrollView而不是ScrollView呢？因为ToolBar要滑动，要满足一个条件，就是CoordinatorLayout布局下包裹一个可以滑动的布局，比如 RecyclerView，NestedScrollView(经过测试，ListView，ScrollView不支持)具有滑动效果的组件。所以这里我们采用NestedScrollView，然后我们使用了自定义的ViewPager，为什么不用原来的呢？因为此处viewpager的高度不能自适应，设置为wrap_content或者match_parent都无法显示出内容，所以这里我们采用自定义的ViewPager

public class WrapContentHeightViewPager extends ViewPager {
    public WrapContentHeightViewPager(Context context) {
        super(context);
    }

    public WrapContentHeightViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int height = 0;
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            int h = child.getMeasuredHeight();
            if (h > height) height = h;
        }
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

}

还有一个地方要注意，当我们在fragment中编写布局文件的时候，如果使用普通的ListView，会出现数据显示不全的问题，原因可能就是因为我们外面嵌套了一个自定义的ViewPager，此时的解决办法是使用如下自定义的ListView,

public class MyListVIew extends ListView {
    public MyListVIew(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}

最后一部分，我们对Tab的样式做一下修改，以满足实际应用中更多的需求，
这里写图片描述

这里更改了文字选中和未选中的颜色，以及下划线的颜色，很简单，可以直接在布局文件里修改

 <android.support.design.widget.TabLayout
            android:id="@+id/tab_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#0000ff"
            app:tabSelectedTextColor="#00FF00"
            app:tabTextColor="#FF0000"
            />

还有一点需要说明：如果你需要使用setCustomView这个方法更改tablayout的样式，那么你设置的代码要放在tablayout与ViewPager关联之后，如果你不需要使用此方法，请把添加tab的代码放在与ViewPager关联之前，否则系统会设置两次tab。

这里写图片描述

   <android.support.design.widget.TabLayout
            android:id="@+id/tab_title"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:padding="5dp"
            app:tabIndicatorColor="@android:color/holo_orange_dark"
            app:tabSelectedTextColor="@android:color/holo_orange_dark"
            app:tabTextColor="@android:color/holo_green_light"

            />

代码下载位置

点此下载源码

lxn_李小牛
关注
CollapsingToolbarLayout+toolbar
04-13
在给定的博客链接中（虽然链接已无法直接访问），作者可能详细介绍了如何使用`CollapsingToolbarLayout`和`Toolbar`来创建一个可折叠的头部，并可能涵盖了以下内容： 1. 设置`CollapsingToolbarLayout`的基本结构，...
CollapsingToolbarLayout用法详解（简洁易懂）
秦时明月
10-13 5万+
Collapsing翻译过来就是折叠的意思。 CollapsingToolbarLayout：顾名思义就是可折叠的toolbar布局。先看一下使用它的效果： 可以看到有这样几个效果：1、背景图片渐渐消失变为主题颜色 2、FloatingActionButton在滑到顶部的时候消失了 3、左上角的箭头保持不动 4、title在滑到顶部的时候自动调整位置和大小CollapsingToolbar
Android支持库CollapsingToolbarLayout
Black_Cat_33的博客
08-20 3465
介绍 CollapsingToolbarLayout 用于美化 Toolbar 的运行效果， 它是由Design Support 库 提 供 的。CollapsingToolbarLayout 被设计用于 AppBarLayout 的子布局，AppBarLayout 是一个垂直的 LinearLayout，只是为了实现交互动画效果它增加了一些滚动特性。AppBarLayout 只有作为 CoordinatorLayout 的直接子布局才可以正常的工作，如果 CoordinatorLayout 包含了一个不
Android CollapsingToolbarLayout控件
假装你是大灰狼的专栏
09-04 1万+
1. CollapsingToolbarLayout CollapsingToolbarLayout是5.0版本出现的控件，可以实现Toolbar的折叠效果。 CollapsingToolbarLayout的属性 app:contentScrim，指定布局内部未展开时的背景颜色 app:collapsedTitleTextAppearance，指定未展开时的标题文字字体 app:colla...
实现折叠工具栏CollapsingToolbarLayout(折叠工具栏布局)
倾听者
04-07 7649
一、相关知识点介绍AppBarLayout简介:该控件是Design包下的一个控件,AppBarLayout就是用来装AppBar的容器，是LinearLayout的子类。而AppBar就包含我们通常所知道的ActionBar，Toolbar。AppBarLayout要点：功能：让子View（AppBar）可以选择他们自己的滚动行为。注意：需要依赖CoordinatorLayout作为父容器，同时...
Material Design之CollapsingToolbarLayout使用
热门推荐
【博客地址迁移到】：https://zhengxiaoyong.com
07-16 5万+
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。 使
CollapsingToolbarLayout折叠toolbar的使用说明
08-29
此外，`CollapsingToolbarLayout`还支持与`TabLayout`结合，创建出带有折叠标题和底部标签页的复杂布局。 总之，`CollapsingToolbarLayout`是Android开发中实现高级头部滚动效果的重要工具。通过理解其工作原理和...
CollapsingToolbarLayout的使用
10-13
总结来说，`CollapsingToolbarLayout`结合`CoordinatorLayout`和`AppBarLayout`，为Android应用提供了高度定制的头部交互体验，使得应用的设计更加符合Material Design的规范，同时也提升了用户体验。通过理解和掌握...
AppbarLayout与CollapsingToolbarLayout的使用，2024年最新今日头条软件测试面试题
最新发布
m0_61331237的博客
04-10 1257
面试是一个不断学习、不断自我提升的过程，有机会还是出去面面，至少能想到查漏补缺效果，而且有些知识点，可能你自以为知道，但让你说，并不一定能说得很好。有些东西有压力才有动力，而学到的知识点，都是钱（因为技术人员大部分情况是根据你的能力来定级、来发薪水的），技多不压身。附上我的面试各大专题整理： 面试指南，满满的都是干货，希望对大家有帮助！一个人可以走的很快，但一群人才能走的更远。
Android基础知识 - AppbarLayout CollapsingToolbarLayout
QG
07-19 1309
AppbarLayout
Android Material Design之CollapsingToolbarLayout(可折叠式标题栏）
云上道人的博客
03-30 1077
目录 1.概述 1.1 定义 1.2 原理 2.案例 2.1 展示效果 2.2 创建布局 2.3 属性解析 2.4 业务处理 2.5 优化：充分利用系统状态栏空间 难道不修改会报错？由于没有5.0以前的系统模拟器，过段时间回来测试一下。 1.概述 1.1 定义 CollapsingToolbarLayout(可折叠式标题栏）是一个作用于...
Android界面设计：Material Design之可折叠式标题栏
jemo的博客
06-05 690
虽说现在的标题栏是使用Toolbar来编写的，不过它看上去和传统的ActionBar没什么两样，只不过可以响应RecyclerView的滚动事件来进行隐藏和显示。还可以根据自己的喜好随意定制标题栏的样式这里实现一个可折叠式标题栏的效果，要借助CollapsingToolbarLayout这个工具。
自定义CollapsingToolbaLayout完成可收缩的带头像的Toolbar
a178712122的博客
03-15 1159
前言 CollapsingToolbarLayout是谷歌官方提供的Material的组件之一，实现了可折叠的Toolbar，效果还不错，具体怎么使用已经有了很多不错的文章，请善用搜索功能，这里就不在赘述了。而我们今天要实现的是往ToolBar`中添加一个头像， 完成的效果如下图 文章会比较长，感兴趣的可以前往项目地址 一、CollapsingToolbarLayout分析 正所谓前人栽树，后人乘凉。要想少走点弯路，多copy看看别人的代码不妨是个好方法。谷歌的CollapsingToolbaLayou
Android开发笔记（一百三十六）可折叠工具栏布局CollapsingToolbarLayout
aqi00的博客
02-24 7929
可折叠工具栏布局CollapsingToolbarLayout上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动，那反过来，能不能把Toolbar往下拉动呢？这里要明确一点，Toolbar本身是页面顶部的工具栏，其上没有本页面的其它控件了，如果Toolbar被拉下来了，那Toolbar上面的空白该显示什么？所以Toolbar的上部
【Android -- Material Design】CollapsingToolbarLayout 的基本使用
Kevin Learn Android
03-02 895
本篇将介绍 CollapsingToolbarLayout 的一些功能和属性，使用其实现可折叠的 toolbar 效果。
安卓可伸缩的ToolBar——CollapsingToolbarLayout
南风子的博客
09-29 4989
1.CollapsingToolbarLayout介绍: CollapsingToolbarLayout介绍: collapsingToolbarLayout一般不会单独出现在布局文件中，而是作为另一个控件CoordinatorLayout的子元素出现。 小知识：在coordinatorLayout做父布局的情况下，给滑动控件设置一个app:layout_behavior="@string/app...
android新特性：使用CollapsingToolbarLayout实现折叠效果及问题解决
黄孝果的博客
02-09 9842
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags就可以实现折叠效果！ 效果展示：引入相对使用的库 compile 'com.android.support:appcompat-v7:23.3.0' compile 'com.android.support:design:2
Material Design之CollapsingToolbarLayout 和 TabLayout使用
lixiaote的专栏
06-16 1295
最近做项目需要做一个类似微博个人主页的界面，有个向上滑动隐藏头像部分view,然后下面的Tab 滑动到顶部。所以研究了下Android 两个新的布局控件CollapsingToolbarLayout和TabLayout的使用。先上图：                                     AppBarLayout 是继承LinerLayout实现的一个ViewG
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值