CoordinatorLayout使用自定义Behavior实现UC浏览器顶栏效果
16lz
2021-01-23
Android中MaterialDesign使用 (五)CoordinatorLayout之自定义Behavior
Android中MaterialDesign使用 (一)TabLayout+Fragment实现顶部选项卡
Android中MaterialDesign使用 (二)Navigation+Drawerlayout+Toolbar实现简单侧滑菜单
Android中MaterialDesign使用 (三)SnackBar的使用
Android中MaterialDesign使用 (四)CoordinatorLayout初识:AppBarLayout的基本属性
这里主要实现的是用一个简单的自定义Behavior实现一个像UC浏览器顶栏那样的效果
直接上效果图
同样使用Tablayout,首先需要在项目中加入Design包
dependencies { compile 'com.android.support:design:24.1.1' }主布局代码:main.xml
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main2" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="zhengliang.com.animatorpath.Main2Activity"> <android.support.design.widget.AppBarLayout 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="wrap_content" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <ImageView android:layout_width="match_parent" android:layout_height="300dp" android:scaleType="centerCrop" android:src="@mipmap/main_bg" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.9"/> <FrameLayout android:id="@+id/framelayout" android:layout_width="match_parent" android:layout_height="120dp" android:layout_gravity="bottom" android:background="@color/primary" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.3"> <LinearLayout android:id="@+id/linearlayout_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="bottom|center" android:text="LOVE" android:textColor="@android:color/white" android:textSize="24sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="4dp" android:text="I love you clover" android:textColor="@android:color/white" /> </LinearLayout> </FrameLayout> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="none" app:behavior_overlapTop="20dp" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" app:cardElevation="8dp" app:contentPadding="16dp" app:cardCornerRadius="5dp" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:lineSpacingExtra="8dp" android:text="@string/lorem" android:textSize="18sp" android:id="@+id/textView" /> </android.support.v7.widget.CardView> </android.support.v4.widget.NestedScrollView> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?actionBarSize" android:background="@color/primaryDark" app:layout_anchor="@id/framelayout" app:theme="@style/ThemeOverlay.AppCompat.Dark" > </android.support.v7.widget.Toolbar> <TextView android:id="@+id/tv_title" android:textColor="#fff" android:textSize="18sp" android:gravity="center" android:text="UC头条" android:background="@color/primaryDark" android:layout_width="match_parent" android:layout_height="56dp" app:layout_behavior=".DrawerBehavior" /></android.support.design.widget.CoordinatorLayout>Behavior是Android新出的Design库里新增的布局概念。Behavior只有是CoordinatorLayout的直接子View才有意义。可以为任何View添加一个Behavior。Behavior是一系列回调。让你有机会以非侵入的为View添加动态的依赖布局，和处理父布局(CoordinatorLayout)滑动手势的机会。不过官方只有少数几个Behavior的例子。对于理解Behavior实在不易。开发过程中也是很多坑，下面总结一下CoordinatorLayout与Behavior。
定义继承基类:
public class DrawerBehavior extends CoordinatorLayout.Behavior<T> { public DrawerBehavior(Context context, AttributeSet attrs) { super(context, attrs); }}继承CoordinatorLayout.Behavior<T>这里是一个泛型,泛型传递的是你需加入效果的View,比如我这里是给TextView加效果泛型就指定位TextView
实现:两个必须的方法
@Override public boolean layoutDependsOn(CoordinatorLayout parent, TextView child, View dependency) { return dependency instanceof Toolbar; }@Override public boolean onDependentViewChanged(CoordinatorLayout parent, TextView child, View dependency) { return true; }上面的两个方法根据名字就看出 layoutDependsOn()是View依赖于的控件是什么,我这里是依赖于Toolbar所以写法就如上,其它的根据需要而变;第二方法是当依赖的View发生变化时调用,自定义Behavior的主要逻辑就在这个方法中处理!
下面贴上该效果的代码:
/** * Created by zhengliang on 2016/10/10 0010. */public class DrawerBehavior extends CoordinatorLayout.Behavior<TextView> { private int mStartY; public DrawerBehavior(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean layoutDependsOn(CoordinatorLayout parent, TextView child, View dependency) { return dependency instanceof Toolbar; } @Override public boolean onDependentViewChanged(CoordinatorLayout parent, TextView child, View dependency) { //记录开始的Y坐标 也就是toolbar起始Y坐标 if (mStartY==0){ mStartY = (int) dependency.getY(); } //计算toolbar从开始移动到最后的百分比 float percent = dependency.getY()/mStartY; //改变child的坐标(从消失，到可见) child.setY(child.getHeight()*(1-percent) - child.getHeight()); child.startAnimation(new AlphaAnimation(1,(1-percent))); return true; }}代码注释很全就不解释了,寝室马上熄灯了,抓紧时间,哈哈!
自定义的Behavior写好以后,需要在使用这个Behavior的View加上:app:layout_behavior属性
诺:
... app:layout_behavior=".DrawerBehavior" ...后面跟的值就是你自定义参数的类名:如果像我这样不行请加上完整的包名..
时间刚好…
印象丶亮仔
更多相关文章
- 系出名门Android(2) - 布局(Layout)和菜单(Menu)
- android 布局实例解析 柱状图效果
- Android模拟、实现、触发系统按键事件的方法
- android 2.2+ 完全退出程序的方法
- Android UI详解之动态布局
- android MediaPlayer出现RuntimeException: failure code: -38崩
- android 设置壁纸几种方法
- Android学习札记17：ImageView中的setImageBitmap()方法
- Anfdroid网络编程方法