CoordinatorLayout是Design包下的新控件,可以简单理解成协调子View的,平常使用中,基本上会把CoordinatorLayout、AppbarLayout、CollapsingToolbarLayout 以及Toolbar等一起使用,总之CoordinatorLayout十分强大,今天我们来讲解两个非常重要的属性,利用这些属性,可以很轻松实现《Android开发之实现滑动RecyclerView,浮动按钮的显示和隐藏(一)》效果!
-----------------------------------分割线-----------------------------------------------
第一个重要的属性:appbar_scrolling_view_behavior
app:layout_behavior="@string/appbar_scrolling_view_behavior"
从字面上理解就是AppBar可以随着View的滑动而滑动,来看下效果:
ps:是不是和《Android开发之实现滑动RecyclerView,浮动按钮的显示和隐藏(一)》一样,下一章《Android开发之实现滑动RecyclerView,浮动按钮的显示和隐藏(二)》我们会继续使用CoordinatorLayout来补充完这一效果,涉及到自定义behavior,本章节暂不深究!
布局代码:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
java代码都是一些涉及到普通RecyclerView的使用,这里就不贴出来了!
从上面可以看出,最外层布局是CoordinatorLayout,然后给RecyclerView布局添加属性layout_behavior,再给ToolBar添加layout_scrollFlags,配合RecyclerView的滑动即可实现图片中的效果。
这里需要注意layout_scrollFlags属性:
1.scroll: 所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。
2.enterAlways: 设置这个flag时,向下的滚动都会导致该view变为可见,启用快速“返回模式”。
3.enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
4.exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。
-----------------------------------分割线-----------------------------------------------
第二个重要的属性:bottom_sheet_behavior"
app:layout_behavior="@string/bottom_sheet_behavior"
直接看效果图:
注意:此效果不是dialog效果,dialog会把floatingActionButton盖住。
下面给出完整代码:
布局代码:
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="@+id/btnBehavior"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BottomSheetBehavior"
android:textAllCaps="false" />
</LinearLayout>
<FrameLayout
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="@string/bottom_sheet_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="HelloWorld"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="HelloBottomSheetBehavior"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="HelloWorld"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="HelloBottomSheetBehavior"
android:textSize="20sp" />
</LinearLayout>
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@android:drawable/ic_dialog_email"
app:borderWidth="0dp"
app:elevation="5dp"
app:layout_anchor="@id/bottom_sheet"
app:layout_anchorGravity="right|top"
app:pressedTranslationZ="10dp" />
</android.support.design.widget.CoordinatorLayout>
解释两个属性:
1、app:behavior_hideable="true":是否可以隐藏
2、app:behavior_peekHeight="0dp":默认显示后View露出的高度。
MianActivity代码:
import android.support.design.widget.BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
public class MainActivity extends AppCompatActivity {
private BottomSheetBehavior<FrameLayout> behavior;
private FrameLayout bottomSheet;
private Button btnBehavior;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main1);
bottomSheet = (FrameLayout) findViewById(R.id.bottom_sheet);
behavior = BottomSheetBehavior.from(bottomSheet);
btnBehavior = (Button) findViewById(R.id.btnBehavior);
btnBehavior.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int state = behavior.getState();
if (state == BottomSheetBehavior.STATE_EXPANDED) {
behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
} else {
behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
}
});
}
}
-----------------------------------分割线-----------------------------------------------
下一章会讲解《Android开发之实现滑动RecyclerView,浮动按钮的显示和隐藏(二)》,主要内容是教大家如何自定义Behavior打造属于自己的新特效!