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。

相关文章

C++使用栈实现括号匹配的代码详解

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中，括号匹配是一个常见问题，尤其是在
阅读更多...
Java中String字符串使用避坑指南

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下：1. 字符串的不可变性：每次修改都创建新对象2. 使用 == 比较字符串，陷阱满
阅读更多...
Python使用国内镜像加速pip安装的方法讲解

Python使用国内镜像加速pip安装的方法讲解

《Python使用国内镜像加速pip安装的方法讲解》在Python开发中,pip是一个非常重要的工具,用于安装和管理Python的第三方库,然而,在国内使用pip安装依赖时,往往会因为网络问题而导致速... 目录一、pip 工具简介1. 什么是 pip？2. 什么是 -i 参数？二、国内镜像源的选择三、如何
阅读更多...
使用C++实现链表元素的反转

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定
阅读更多...
Linux使用nload监控网络流量的方法

Linux使用nload监控网络流量的方法

《Linux使用nload监控网络流量的方法》Linux中的nload命令是一个用于实时监控网络流量的工具,它提供了传入和传出流量的可视化表示,帮助用户一目了然地了解网络活动,本文给大家介绍了Linu... 目录简介安装示例用法基础用法指定网络接口限制显示特定流量类型指定刷新率设置流量速率的显示单位监控多个
阅读更多...
JavaScript中的reduce方法执行过程、使用场景及进阶用法

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》：本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...
python使用fastapi实现多语言国际化的操作指南

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本
阅读更多...
C++ Primer 多维数组的使用

C++ Primer 多维数组的使用

《C++Primer多维数组的使用》本文主要介绍了多维数组在C++语言中的定义、初始化、下标引用以及使用范围for语句处理多维数组的方法,具有一定的参考价值,感兴趣的可以了解一下... 目录多维数组多维数组的初始化多维数组的下标引用使用范围for语句处理多维数组指针和多维数组多维数组严格来说,C++语言没
阅读更多...
在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

《在SpringBoot中使用@Autowired和@Bean注解的示例详解》本文通过一个示例演示了如何在SpringBoot中使用@Autowired和@Bean注解进行依赖注入和Bean... 目录在 Spring Boot 中使用 @Autowired 和 @Bean 注解示例背景1. 定义 Stud
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2