Android Material Design AppBarLayout使用

Android Material Design AppBarLayout使用

转载请声明次出链接http://blog.csdn.net/bxllove/article/details/78338871

之前我们有说过 CoordinatorLayout 相当于一个进化版的FrameLayout 那么今天所说的AppBarLayout 就相当于一个特殊的线性布局 他继承的是LinnerLayout ,因此它有线性布局的属性 (其子控件默认垂直显示) 但它和LinnerLayout相比 区别就在于它能够结合Material Design 的相关控件以及普通控件 支持手动滑动手势 (也就是说想要实现控件的相互作用滑动就必须使用 AppBarLayout 包裹子控件), 而实现自己所需要手势的特效就必须通过layout_scrollFlags属性或是setScrollFlags()方法来指定, 但要注意的是这个控件是要依赖于 CoordinatorLayout 的包裹才能发挥其特性.

举个例子:这里我想通过滑动NestedScrollView 来控制toobar的滑动隐藏或显示 被AppBarLayout所包裹的 Toolbar 控件里添加app:layout_scrollFlags=”scroll”这里的layout_scrollFlags 不只有scroll这个属性还有snap – enterAlways – enterAlwaysCollapsed – exitUntilCollapsed 等相关属性稍后再一一介绍

<?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:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll" />
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/str"></TextView>
</android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

下面该是代码的编写了MainActivity .java

public class MainActivity extends AppCompatActivity{

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.app_bar_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}

运行结果:



把以上的CoordinatorLayout 子视图布局属性先改一下

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="?attr/colorPrimary"
android:minHeight="10dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" />
</android.support.design.widget.AppBarLayout>

app:layout_scrollFlags=”scroll”当NestedScrollView向下滑到头部临界点时toolbar就拖出来 ,向上推toolbar完全消失时NestedScrollView也随着推动滑出视图 运行结果:



app:layout_scrollFlags=”scroll|enterAlways”而enterAlways 则是toolbar拉到底部后NestedScrollView 视图再缓慢地拉出图面 他们之间是有先后过程的 而 app:layout_scrollFlags=”scroll”下拉时则是同时进行的 运行结果:



app:layout_scrollFlags=”scroll|exitUntilCollapsed” 因设置了最小高度10dp 所以再使toolbar推动到顶部的时候会留出10dp的(toolbar) 运行结果:



app:layout_scrollFlags=”scroll|snap” 下拉toolbar 三分之一时松手他会自动滚上去上推也一样 具有吸附性 运行结果



app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed” 因为设置了最小高度 当滑动事件下拉时显示最小的高度10dp 然后滑动列表下拉到临界点时才会显示剩下的90dp高度 运行结果:

属性	作用
scroll	在appbarlayout里的子控件添加此属性会随着 滑动控件的滚动而滚动
enterAlways	当toolbar处于隐藏时下拉滑动控件会直接先显示toolbar当toobar完全显示后 列表才会继续滚动 使用时scroll和enterAlways同时使用
exitUntilCollapsed	使用时给toolbar设置最小高度比如 android:minHeight=10dp android:layout_height=100dp当toolbar 向上隐藏时只显示最小高度10dp其它的90dp会被移除出去 scroll和exitUntilCollapsed结合使用
snap	具有吸附作用当android:minHeight=10dp android:layout_height=100dp 下拉toolbar 三分之一时松手他会自动滚上去上推也一样 使用时 scroll和snap 结合使用
enterAlwaysCollapsed	使用时给toolbar设置最小高度比如 android:minHeight=10dp android:layout_height=100dp 当滑动事件下拉时显示最小的高度10dp 然后滑动列表下拉到临界点时才会显示剩下的90dp高度