千呼万唤始出来的CoordinatorLayout
2017-03-04 15:27
288 查看
CoordinatorLayout,千呼万唤始出来。
亲可记得我之前转载的INTRODUCTION TO COORDINATOR
LAYOUT ON ANDROID,今天将它翻译一遍,以飨读者。
在这一年的I/O开发者大会上,Google引入了一个新的Android设计支持库来帮助开发者们在他们的APP中使用material
design,这里面包含了一些为API7及以上设计的很重要的material design building blocks。如果你不小心错过了他,可以点击这里http://android-developers.blogspot.com/2015/05/android-design-support-library.html.
相比较其他layout而言新的超有力的FrameLayout(CoordinatorLayout)十分有趣。从他的名字中你也可以猜出来这个超级layout有能力协调所有独立的子views。
你要做的只是将所有view写在CoordinatorLayout中,是时候写一波代码了,这个Demo十分简单,它包含一个用于触发Snackbar的Floating
Action Button。
首先,在gradle中添加支持库:
现在为我们的Activity写一个简单的布局文件:
然后是MainActivity:
完成后:
很酷~
但是,如果你想实现不同效果的Floating Action Button怎么办?
支持库里的Floating Action Button实现没有菜单选项(原文menu
options),
所以我们可以试试Base的开发者开发的开源Floating
Action Button库:
CoordinatorLayout这次没有生效,这是因为我们的View没有默认的CoordinatorLayout.Behavior实现。
解决方案?我们也等着别人来解决它···
或者,我们可以为自己项目中的View写定制化的Behavior实现。
这才是这套框架真正的力量,你没有必要访问这个View的类来设置你的behavior,你还可以改变任何View的默认behavior。
首先我们需要实现Behavior类:
为了使这个类能解析XML我们需要为其添加带有Context和AttributeSet参数的构造方法。
下一步是重写layoutDependsOn(),如果我们想监听它的变化就应该返回true。
在这个例子中我们想监听Snackbar对象的变化。
现在让我们实现具体的行为。
每当CoordinatorLayout里面的View变化时onDependentViewChanged方法就会被调用。在这个方法里面我们能读到Snackbar的状态,当Snackbar出现时我们让Floating
Action Button上移,为了做到这一点我们需要将Floating Action Button的Y坐标上升(上升高度为Snackbar的高度),Snackbar上升高度为其本身的高度,即在Y轴上的偏移量减去其自身高度。(参考View坐标系,Y轴垂直向下为正),根据文档,当对象改变其在屏幕上的位置时,我们应该返回true。
PS:
//此方法用于获取View在水平方向的偏移量,以像素为单位
public float android.view.View.getTranslationX()
//此方法用于获取View在垂直方向的偏移量,以像素为单位
public float android.view.View.getTranslationY()
//此方法用于设置View在水平方向的偏移量,以像素为单位。会引发View重绘
//偏移量为正数时,表示View从左向右平移。反之则从右向左平移
public void android.view.View.setTranslationX(float translationX)
//此方法用于设置View在水平方向的偏移量,以像素为单位。会引发View重绘
//偏移量为正数时,表示View从上向下平移。反之则从下向上平移
public void android.view.View.setTranslationY(float translationY)
最后一步是在CoordinatorLayout引入Floating
Action Button,我们在xml中做如下修改:
ok,大功告成。
如果你想为自己的View定义默认的behavior,只需要在你的Behavior中加上DefaultBehavior声明。
源代码(github):
https://github.com/ggajews/coordinatorlayoutwithfabdemo
Happy
coding!
https://lab.getbase.com/introduction-to-coordinator-layout-on-android/
翻译不易,转载请注明出处哈。
权兴权意
代码可以更优雅~
http://blog.csdn.net/hxqneuq2012/article/details/56481639
亲可记得我之前转载的INTRODUCTION TO COORDINATOR
LAYOUT ON ANDROID,今天将它翻译一遍,以飨读者。
在这一年的I/O开发者大会上,Google引入了一个新的Android设计支持库来帮助开发者们在他们的APP中使用material
design,这里面包含了一些为API7及以上设计的很重要的material design building blocks。如果你不小心错过了他,可以点击这里http://android-developers.blogspot.com/2015/05/android-design-support-library.html.
遇见 COORDINATORLAYOUT(ANDROID)
相比较其他layout而言新的超有力的FrameLayout(CoordinatorLayout)十分有趣。从他的名字中你也可以猜出来这个超级layout有能力协调所有独立的子views。你要做的只是将所有view写在CoordinatorLayout中,是时候写一波代码了,这个Demo十分简单,它包含一个用于触发Snackbar的Floating
Action Button。
首先,在gradle中添加支持库:
compile 'com.android.support:design:22.2.0'
现在为我们的Activity写一个简单的布局文件:
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="16dp" android:src="@drawable/ic_done" /> </android.support.design.widget.CoordinatorLayout>
然后是MainActivity:
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Hello Snackbar", Snackbar.LENGTH_LONG).show(); } }); } }
完成后:
很酷~
但是,如果你想实现不同效果的Floating Action Button怎么办?
支持库里的Floating Action Button实现没有菜单选项(原文menu
options),
所以我们可以试试Base的开发者开发的开源Floating
Action Button库:
compile 'com.getbase:floatingactionbutton:1.9.1'
<?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"> <com.getbase.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="16dp" app:fab_icon="@drawable/ic_done" /> </android.support.design.widget.CoordinatorLayout>
CoordinatorLayout这次没有生效,这是因为我们的View没有默认的CoordinatorLayout.Behavior实现。
解决方案?我们也等着别人来解决它···
或者,我们可以为自己项目中的View写定制化的Behavior实现。
VIEWS 学会如何 BEHAVE
这才是这套框架真正的力量,你没有必要访问这个View的类来设置你的behavior,你还可以改变任何View的默认behavior。首先我们需要实现Behavior类:
public class FloatingActionButtonBehavior extends CoordinatorLayout.Behavior<FloatingActionButton>
为了使这个类能解析XML我们需要为其添加带有Context和AttributeSet参数的构造方法。
public FloatingActionButtonBehavior(Context context, AttributeSet attrs) {}
下一步是重写layoutDependsOn(),如果我们想监听它的变化就应该返回true。
在这个例子中我们想监听Snackbar对象的变化。
现在让我们实现具体的行为。
每当CoordinatorLayout里面的View变化时onDependentViewChanged方法就会被调用。在这个方法里面我们能读到Snackbar的状态,当Snackbar出现时我们让Floating
Action Button上移,为了做到这一点我们需要将Floating Action Button的Y坐标上升(上升高度为Snackbar的高度),Snackbar上升高度为其本身的高度,即在Y轴上的偏移量减去其自身高度。(参考View坐标系,Y轴垂直向下为正),根据文档,当对象改变其在屏幕上的位置时,我们应该返回true。
PS:
//此方法用于获取View在水平方向的偏移量,以像素为单位
public float android.view.View.getTranslationX()
//此方法用于获取View在垂直方向的偏移量,以像素为单位
public float android.view.View.getTranslationY()
//此方法用于设置View在水平方向的偏移量,以像素为单位。会引发View重绘
//偏移量为正数时,表示View从左向右平移。反之则从右向左平移
public void android.view.View.setTranslationX(float translationX)
//此方法用于设置View在水平方向的偏移量,以像素为单位。会引发View重绘
//偏移量为正数时,表示View从上向下平移。反之则从下向上平移
public void android.view.View.setTranslationY(float translationY)
@Override public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) { float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight()); child.setTranslationY(translationY); return true; }
最后一步是在CoordinatorLayout引入Floating
Action Button,我们在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"> <com.getbase.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="16dp" app:layout_behavior="com.getbase.coordinatorlayoutdemo.FloatingActionButtonBehavior" app:fab_icon="@drawable/ic_done" /> </android.support.design.widget.CoordinatorLayout>
ok,大功告成。
如果你想为自己的View定义默认的behavior,只需要在你的Behavior中加上DefaultBehavior声明。
源代码(github):
https://github.com/ggajews/coordinatorlayoutwithfabdemo
Happy
coding!
https://lab.getbase.com/introduction-to-coordinator-layout-on-android/
翻译不易,转载请注明出处哈。
权兴权意
代码可以更优雅~
http://blog.csdn.net/hxqneuq2012/article/details/56481639
相关文章推荐
- 千呼万唤始出来!你期待的Cybex中文名来了!
- Android使用CoordinatorLayout和BottomSheetBehavior实现滑动效果(底部抽屉)
- Android8.0对于CoordinatorLayout、RecyclerView 精准fling的优化
- 【Android-UI】关于CoordinatorLayout的使用
- 千呼万唤始出来,微软Power BI简体中文版官网终于上线了,中文文档也全了。。
- android CoordinatorLayout使用总结(*****)
- Android控件CoordinatorLayout和TabLayout
- 使用CoordinatorLayout打造一个炫酷的详情页
- Android中【下拉刷新/上拉加载】WebView网页控件,Snackbar+CoordinatorLayoutt提示框(指定位置显示的提示框)
- 千呼万唤始出来 Google GDrive将于4月初正式推出
- 千呼万唤始出来——InfoQ中文站
- CoordinatorLayout布局中要注意的问题
- 一文彻底搞懂 Design 设计的 CoordinatorLayout 和 AppbarLayout 联动,让 Design 设计更简单~
- Android学习之CoordinatorLayout轻松实现360软件详情页
- CoordinatorLayout,协调者布局
- CloudTest 事务监控:千呼万唤始出来
- RecyclerView与CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout 解决上滑到toolbar卡顿
- CoordinatorLayout
- CoordinatorLayout中设置layout_behavior的布局无法垂直居中问题解决
- 关于CoordinatorLayout与Behavior的一点分析