CollapsingToolbarLayout结合ToolBar使用

2024-01-10 23:32
文章标签 使用 结合 toolbar collapsingtoolbarlayout

本文主要是介绍CollapsingToolbarLayout结合ToolBar使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图

这里写图片描述

代码

<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.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="160dp"android:background="#00ff99"><android.support.design.widget.CollapsingToolbarLayoutandroid: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"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#ADADAD"><TextViewandroid: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"/><TextViewandroid: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"/><ImageViewandroid: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"/><TextViewandroid: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.Toolbarandroid: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"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid: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"/><ImageViewandroid: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.RecyclerViewandroid: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;@Overridepublic final void onOffsetChanged(AppBarLayout appBarLayout, int i) {System.out.println("===========i: "+i);//0--208if (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;@Overrideprotected 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() {@Overridepublic 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.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.design.widget.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:layout_height="160dp"app:contentScrim="#FA7199"app:layout_scrollFlags="scroll|exitUntilCollapsed"app:statusBarScrim="?attr/colorPrimary"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#ADADAD"><TextViewandroid: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"/><TextViewandroid: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"/><ImageViewandroid: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.Toolbarandroid: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"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid: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"/><ImageViewandroid: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.TabLayoutandroid:id="@+id/tab_title"android:layout_width="match_parent"android:layout_height="wrap_content"/></android.support.design.widget.AppBarLayout><android.support.v4.widget.NestedScrollViewandroid:id="@+id/nesview"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><com.example.personcenter.WrapContentHeightViewPagerandroid: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);}@Overrideprotected 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.TabLayoutandroid: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.TabLayoutandroid: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"/>

代码下载位置

点此下载源码

这篇关于CollapsingToolbarLayout结合ToolBar使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/592433。

相关文章

python使用库爬取m3u8文件的示例

python使用库爬取m3u8文件的示例

《python使用库爬取m3u8文件的示例》本文主要介绍了python使用库爬取m3u8文件的示例,可以使用requests、m3u8、ffmpeg等库,实现获取、解析、下载视频片段并合并等步骤,具有... 目录一、准备工作二、获取m3u8文件内容三、解析m3u8文件四、下载视频片段五、合并视频片段六、错误
阅读更多...
gitlab安装及邮箱配置和常用使用方式

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》：本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的
阅读更多...
SpringBoot3应用中集成和使用Spring Retry的实践记录

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项
阅读更多...
nginx启动命令和默认配置文件的使用

nginx启动命令和默认配置文件的使用

《nginx启动命令和默认配置文件的使用》：本文主要介绍nginx启动命令和默认配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录常见命令nginx.conf配置文件location匹配规则图片服务器总结常见命令# 默认配置文件启动./nginx
阅读更多...
在Windows上使用qemu安装ubuntu24.04服务器的详细指南

在Windows上使用qemu安装ubuntu24.04服务器的详细指南

《在Windows上使用qemu安装ubuntu24.04服务器的详细指南》本文介绍了在Windows上使用QEMU安装Ubuntu24.04的全流程：安装QEMU、准备ISO镜像、创建虚拟磁盘、配置... 目录1. 安装QEMU环境2. 准备Ubuntu 24.04镜像3. 启动QEMU安装Ubuntu4
阅读更多...
使用Python和OpenCV库实现实时颜色识别系统

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》：本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色（红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解
阅读更多...
Windows下C++使用SQLitede的操作过程

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能（如数据库连接、事务管理）、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite：C++轻松操作SQ
阅读更多...
Python常用命令提示符使用方法详解

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,：本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安
阅读更多...
Python并行处理实战之如何使用ProcessPoolExecutor加速计算

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.
阅读更多...
Python中help()和dir()函数的使用

Python中help()和dir()函数的使用

《Python中help()和dir()函数的使用》我们经常需要查看某个对象（如模块、类、函数等）的属性和方法,Python提供了两个内置函数help()和dir(),它们可以帮助我们快速了解代... 目录1. 引言2. help() 函数2.1 作用2.2 使用方法2.3 示例(1) 查看内置函数的帮助(
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2