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。

相关文章

中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
git使用的说明总结

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库：创建新文件夹，进入文件夹目录，执行指令 git init ，用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的
阅读更多...
【北交大信息所AI-Max2】使用方法

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡，拥有登录权限的账号密码，一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 （如果是1集群把75改成66） 交互式开发 执行器选Terminal 密码随便设一个（需记住） 工作空间：私有数据、全部文件 加速器选GeForce_RTX_2080_Ti
阅读更多...
【Linux 从基础到进阶】Ansible自动化运维工具使用

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具，采用无代理架构（agentless），基于 SSH 连接进行管理，具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用，旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2