您的位置:首页 > 其它

千呼万唤始出来的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.


遇见 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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: