Android使用Material Design自带CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar组件实现标题栏滑动渐变色
16lz
2021-01-24
效果图如下:
1.首先要在app.gradle文件中添加
implementation 'com.android.support:design:26.1.0'
2.布局文件如下:
<?xml version="1.0" encoding="utf-8"?><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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="150dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <com.youth.banner.Banner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="150dp" /> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="50dp" app:contentInsetStart="0dp" app:layout_collapseMode="pin"> <LinearLayout android:id="@+id/ll_top" android:layout_width="match_parent" android:layout_height="50dp" android:gravity="center_vertical" android:orientation="horizontal" > <LinearLayout android:id="@+id/ll_search" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" android:layout_marginLeft="@dimen/text_layout_10_dp" android:background="@drawable/sousuo_yuanjiao" android:gravity="center_vertical" android:paddingBottom="3dp" android:paddingLeft="@dimen/text_layout_15_dp" android:paddingRight="@dimen/text_layout_10_dp" android:layout_centerVertical="true" android:paddingTop="3dp"> <TextView android:layout_width="wrap_content" android:layout_height="24dp" android:layout_alignBottom="@+id/imageView1" android:layout_toEndOf="@+id/imageView1" android:layout_toRightOf="@+id/imageView1" android:layout_weight="2" android:drawableLeft="@drawable/ic_search_black" android:drawablePadding="@dimen/text_layout_10_dp" android:gravity="center_vertical" android:text="请输入食品、药品、食谱名称" android:textColor="@color/tv333" android:textSize="@dimen/text_size_13_sp" /> </LinearLayout> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > <ImageView android:id="@+id/iv_message" android:layout_width="wrap_content" android:layout_height="match_parent" android:scaleType="centerInside" android:layout_centerVertical="true" android:layout_alignParentRight="true" android:paddingRight="@dimen/text_layout_10_dp" android:src="@drawable/ic_message" /> </RelativeLayout> </LinearLayout> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:id="@+id/scrollView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:scrollbars="none"> <!-自己的内容--> </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>
3.具体实现代码:
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { int toolbarHeight = appBarLayout.getTotalScrollRange(); int dy = Math.abs(verticalOffset); if (dy <= toolbarHeight) { float scale = (float) dy / toolbarHeight; float alpha = scale * 255; ll_top.setBackgroundColor(Color.argb((int) alpha, 54, 161, 70)); } } });
更多相关文章
- 学习深入理解android第一章
- Android应用程序键盘(Keyboard)消息处理机制分析(6)
- Android遍历所有文件夹和子目录搜索文件
- android 文件下载到SD卡中
- java android 删除文件和文件夹的函数
- 安装Android(安卓)SDK
- Android设计开发要必用的Color.xml文件整理
- Android中java.lang.ClassNotFoundException: ***.**** in loade
- Android中取消系统标题栏的几种方式