学习Android CoordinatorLayout(二)
来源:互联网 发布:彩虹控制软件 编辑:程序博客网 时间:2024/05/22 14:56
上一篇文章介绍了几种coordinatorlayout的基础用法,其实就是用的系统自带的那种behavior,而有的时候那种效果是不满足需求的,向京东app头部那种随着页面的上下滑动actionbar的透明度也随之变化,下面就开始实现这种效果。这种效果就需要自定义behavior了,如果对behavior比较陌生可以百度下behavior的资料还是很多的强烈推荐鸿神微信公众号里面的文章关于CoordinatorLayout的内部原理强烈推荐啊!
下面开始咱们的代码首先是xml:
<?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="600px" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <!--<TextView--> <!--android:layout_width="match_parent"--> <!--android:layout_height="500px"--> <!--android:text="这是测试"--> <!--app:layout_scrollFlags="enterAlways" />--> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="600px" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/header" android:layout_width="match_parent" android:layout_height="600px" android:scaleType="centerCrop" android:src="@mipmap/ic_launcher" app:layout_collapseMode="parallax" /> </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:fillViewport="true" android:fitsSystemWindows="true" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:lineSpacingExtra="10dp" android:text="测试\n测试1的状态\n测试2的状态\n测试3的状态\n测试4的状态\n测试5的状态\n测试6的状态\n测试7的状态\n测试8的状态\n测试9的状态\n测试10的状态\n测试11的状态\n测试12的状态\n测试13的状态\n测试14的状态\n测试15的状态\n测试16的状态\n测试12的状态\n测试13的状态\n测试14的状态\n测试15的状态\n测试16的状态\n测试12的状态\n测试13的状态\n测试14的状态\n测试15的状态\n测试16的状态" android:textSize="18sp" /> </LinearLayout> </android.support.v4.widget.NestedScrollView> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:elevation="4px" <!--这是设置一个背景通常是一个PNG的图片,要是用单纯的颜色的话里面的内容也会变浅没法实现像京东一样的那种效果 --> android:background="@mipmap/lll" <!-- 这里用到了自定义的behavior--> app:layout_behavior="www.yunhuxinxi.coordinatorlayout.ToolbarAlphaScrollBehavior" app:layout_collapseMode="none" > <TextView android:layout_width="match_parent" android:layout_height="100px" android:gravity="center" android:text="首页" /> </android.support.v7.widget.Toolbar></android.support.design.widget.CoordinatorLayout>
其实没什么特殊的就是在toolbar里面添加了一个自定义的behavior,下面看看自定义behavior的代码:
public class ToolbarAlphaScrollBehavior extends CoordinatorLayout.Behavior<Toolbar> { public ToolbarAlphaScrollBehavior() { } public ToolbarAlphaScrollBehavior(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean layoutDependsOn(CoordinatorLayout parent, Toolbar child, View dependency) { return dependency instanceof AppBarLayout; } @Override public boolean onInterceptTouchEvent(CoordinatorLayout parent, Toolbar child, MotionEvent ev) { return ev == null || super.onInterceptTouchEvent(parent, child, ev); } @Override public boolean onDependentViewChanged(CoordinatorLayout parent, Toolbar child, View dependency) { if (dependency instanceof AppBarLayout) { //计算滑动的比例根据这个比例来计算透明度 float ratio = (float) getCurrentScrollValue(child, dependency) / getTotalScrollRange(child, dependency); float alpha = 1f - Math.max(0f, Math.min(1f, ratio)); if (child.getChildCount() != 0) child.getChildAt(0).setAlpha(alpha); } return false; }<!--因为coordinatorlayout是一种特殊的fragmentlayout所以在以上xml里面child.gettop永远是0,这样写的目的是为了更加严谨一眼看上去就知道这个区域是那里)!--> private int getCurrentScrollValue(Toolbar child, View dependency) { return dependency.getBottom() - child.getTop(); }<!--滑动的距离!--> private float getTotalScrollRange(Toolbar child, View dependency) { return Math.max(dependency.getHeight(), ((AppBarLayout) dependency).getTotalScrollRange()) - child.getTop(); }}
这就是我们所需要的beavior而在Activity里面代码:
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.ac_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); }
其实beavior里面最重要的就是根据比例来计算透明度,当然了还有一些更复杂的效果,比如支付宝app首页的头部,不光光是透明度的变化,actionbar上面的view的位置也会变化,当然还有更复杂的效果也都是利用这个coordinatorayout来完成的,总体来说这个布局把原来需要一大堆手势判断的才能实现的效果现在只需要简单的几行代码就能实现,进步还是很大的,android 的自带的动画效果和ios比来说那简直是太low了,不过android也在慢慢的改进,希望有一天android的ui效果可以干过ios!!!!!
coordinatorlayout就学到这,虽然还有好多不明白的但是算是入门了,下面开始学习自定义view,做一些市面上的app比较酷炫的view
0 0
- 学习Android CoordinatorLayout(二)
- 学习Android CoordinatorLayout(一)
- MaterialDesign之CoordinatorLayout学习笔记(二)
- <Android 基础(二十)> CoordinatorLayout Behavior
- Android学习之CoordinatorLayout
- Android Design Support Library(二):CoordinatorLayout、AppBarLayout简单用法
- <Android 基础(十九)> CoordinatorLayout
- Android CoordinatorLayout 实战案例学习《一》
- android.support.design库组件(CoordinatorLayout和CoordinatorLayout.Behavior)
- Android CoordinatorLayout
- Android开发之CoordinatorLayout使用详解二(图解)
- Android Design Library(二)使用CoordinatorLayout布局实现联动效果
- Android CoordinatorLayout和Behavior的源码分析(二)
- MaterialDesign之CoordinatorLayout学习笔记(一)
- Android学习笔记(八)--CoordinatorLayout的应用-仿支付宝界面
- android 界面滑动隐藏(CoordinatorLayout+AppBarLayout)
- android CoordinatorLayout使用(综合案例)
- CoordinatorLayout和AppBarLayout(android MD 三)
- 欢迎使用CSDN-markdown编辑器
- Swift - 给UITextView添加自定义链接,以及链接的点击响应
- tensorflow学习笔记二——建立一个简单的神经网络
- http中GET和POST的区别
- 数据库中字段类型对应的C#中的数据类型
- 学习Android CoordinatorLayout(二)
- 获取List中的数据的实现方法
- 多线程的相关知识及代码的实现
- 选择排序(java)
- C#调用C++的DLL搜集整理的所有数据类型转换方式
- nginx配置:(二)Location配置总结
- mysql float精度与范围总结
- ODP.NET Managed web.config 配置
- studio java.lang.OutOfMemoryError: GC overhead limit exceeded