Android高级UI开发(二十)AppBar与CoordinatorLayout 组合出各式各样的效果
如果无法成为大鲨鱼,就当一枚小虾吧,时而激起小浪花。无法成为太阳,就做星辰吧。
有些人永远不会有自信,因为他曾经有过这样的感觉:”我还不如一个幼儿园学生“。也有些人永远都会盲目自信,因为他一直都是佼佼者,没有碰过壁,还不曾有敬畏之心,时常会有这样的幻觉:”我与天同高(齐天大圣)“。我们只有结合自身的综合情况客观的评价自己,注意是”综合情况“,不只是局限于你的工作能力、吹牛能力,还有你的身心健康(没有了健康自信全是0) 找到自己,做自己,你在这个世界上是独一无二的。
如果无法成为灌木,就当摇曳的小草吧,让道路因你的存在而更加美妙。
无法成为大道,就做小径;
无法成为太阳,就做星辰。
不可能人人都是船长,水手也有水手的精彩。
如果无法成为大鲨鱼,就当一枚小虾吧。
快过年了,祝大家身体健康,万事如意。
我们Android中常见的是ActionBar与Toolbar,今天我们来一起研究一下AppBar。以Coorderration为根布局,当AppBar包裹Toolbar,同时设置一些属性就可以实现 我们平时需要大量代码来实现的效果。今天我们来3个效果:
1. 监听Recyclerview的滑动来让Toolbar显示和隐藏。
关于这个效果我们上一节已经用Coorderration和Behavior已经实现了,还写了些Toolbar显示和隐藏相关的代码。这次我们不用编写代码,利用AppBar包裹Toolbar,然后设置一些AppBar的属性就可以实现这个效果。
2. 监听android.support.v4.widget.NestedScrollView的滑动来让Toolbar显示和隐藏。
这里与1的区别是监控NestedScrollView(Scrollview的升级版)的滑动。相同之处还是设置Appbar的一些属性,1分钟搞定这个效果。
3. 监听viewpager的滑动滑动来让Toolbar显示和隐藏。
相同之处还是设置Appbar的一些属性,1分钟搞定这个效果。
我们接下来按上面的顺序来分析和实现每一个效果。
1、监听Recyclerview的滑动来让Toolbar显示和隐藏
1.1 原理:
(1) CoordinatorLayout为根布局来监控它的内部所有控件的滑动事件,这里监控的是Recyclerview列表的滑动事件然后纷发给名称为“appbar_scrolling_view_behavio。
(2)这个名称为“appbar_scrolling_view_behavio的Behavior是配置给Recyclerview的。(LisTview不行)
(3) AppBar设置的属性app:layout_scrollFlags="scroll|enterAlways"
(4).appbar_scrolling_view_behavio会自动检查AppBar内部Toolbar设置的属性app:layout_scrollFlags,根据这个属性控制Toolbar的隐藏与显示。此app:layout_scrollFlags="scroll|enterAlways"表示当上滑列表时Toolbar会随着滚动出屏幕顶端,当下滑时又会重新进入屏幕并固定在顶端。
1.2 代码实现
我们从1.1原理中 可以看出我们只需要在布局文件里为RecyclerView与Appbar内部的Toolbar配置一些属性即可。不需要为这个滑动效果编写额外的代码。
(1)布局文件main.xml:
-
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
-
xmlns:tools="http://schemas.android.com/tools"
-
android:layout_width="match_parent"
-
android:layout_height="match_parent"
-
xmlns:app="http://schemas.android.com/apk/res-auto">
-
-
<android.support.v7.widget.RecyclerView
-
app:layout_behavior="@string/appbar_scrolling_view_behavior"
-
android:id="@+id/recyclerview"
-
android:layout_width="match_parent"
-
android:layout_height="match_parent"
-
android:clipToPadding="false"
-
android:clipChildren="false"
-
android:paddingTop="?attr/actionBarSize"
-
/>
-
-
<android.support.design.widget.AppBarLayout
-
android:layout_width="match_parent"
-
android:layout_height="wrap_content">
-
-
<android.support.v7.widget.Toolbar
-
app:layout_scrollFlags="scroll|enterAlways"
-
android:elevation="4dp"
-
app:titleTextColor="@color/color_white"
-
android:id="@+id/toolbar"
-
android:layout_width="match_parent"
-
android:layout_height="?attr/actionBarSize"
-
android:background="?attr/colorPrimary"/>
-
</android.support.design.widget.AppBarLayout>
-
-
</android.support.design.widget.CoordinatorLayout>
如上面布局文件CoordinatorLayout作为根目录可以捕捉Recyclerview的滑动事件,然后交给这个类名为@string/appbar_scrolling_view_behavior的Behavior,然后Behavior根据toolbar的 app:layout_scrollFlags="scroll|enterAlways"属性来处理toolbar,实现上滑列表Toolbar跟着滑出屏幕顶端,下滑列表时Toolbar又回显出来。注意这里的列表指的是Recyclerview,不是Listview。Listview的滑动事件不会分发给这个appbar_scrolling_view_behavior,从而控制不了Appbar内部的Toolbar效果。
(2)MainActivity.java
这里主要是实现一个简单的RecyclerView列表,能滑动就行。
-
package com.example.administrator.appbarrecyclerview;
-
import android.support.v7.app.AppCompatActivity;
-
import android.os.Bundle;
-
import android.support.v7.widget.LinearLayoutManager;
-
import android.support.v7.widget.RecyclerView;
-
import android.support.v7.widget.Toolbar;
-
import android.widget.ImageButton;
-
import com.example.administrator.appbarrecyclerview.adapter.RecyclerAdapter;
-
import java.util.ArrayList;
-
import java.util.List;
-
-
public class MainActivity extends AppCompatActivity {
-
RecyclerView recyclerview;
-
Toolbar toolbar;
-
ImageButton fab;
-
@Override
-
protected void onCreate(Bundle savedInstanceState) {
-
super.onCreate(savedInstanceState);
-
setContentView(R.layout.activity_main);
-
recyclerview = (RecyclerView) findViewById(R.id.recyclerview);
-
toolbar = (Toolbar) findViewById(R.id.toolbar);
-
setSupportActionBar(toolbar);
-
setTitle("滑动隐藏");
-
-
recyclerview.setLayoutManager(new LinearLayoutManager(this));
-
List<String> list = new ArrayList<>();
-
for (int i = 0; i < 50; i++) {
-
list.add("条目" + i);
-
}
-
RecyclerView.Adapter adapter = new RecyclerAdapter(list);
-
recyclerview.setAdapter(adapter);
-
}
-
}
MainActivity.java代码里主要实现了一个可以滑动的Recyclerview。Demo源码下载在文章最后。
2. 监听android.support.v4.widget.NestedScrollView的滑动来让Toolbar显示和隐藏。
这次与1中的实现原理差不多,只是把可滑动的控件换成了NestedScrollView而已. NestedScrollView
是一个Scrollview的升级版,同样只有 它的事件才能被纷发给bappbar_scrolling_view_behavior,从而控制不了Appbar内部的Toolbar效果,而Scrollview是不行的。
2.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"
-
>
-
-
<android.support.design.widget.AppBarLayout
-
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="?attr/actionBarSize"
-
android:background="?attr/colorPrimary"
-
android:elevation="4dp"
-
app:layout_scrollFlags="scroll|enterAlways"
-
app:titleTextColor="@color/white" />
-
</android.support.design.widget.AppBarLayout>
-
-
<android.support.v4.widget.NestedScrollView
-
android:layout_width="match_parent"
-
app:layout_behavior="@string/appbar_scrolling_view_behavior"
-
android:layout_height="wrap_content">
-
-
<LinearLayout
-
android:orientation="vertical"
-
android:layout_width="match_parent"
-
android:layout_height="match_parent">
-
-
<TextView
-
android:layout_width="match_parent"
-
android:layout_height="200dp"
-
android:text="滑动NestedScrollview隐藏或显示Toolbar!"
-
app:layout_constraintBottom_toBottomOf="parent"
-
app:layout_constraintLeft_toLeftOf="parent"
-
app:layout_constraintRight_toRightOf="parent"
-
app:layout_constraintTop_toTopOf="parent" />
-
-
<TextView
-
android:layout_width="match_parent"
-
android:layout_height="200dp"
-
android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
-
app:layout_constraintBottom_toBottomOf="parent"
-
app:layout_constraintLeft_toLeftOf="parent"
-
app:layout_constraintRight_toRightOf="parent"
-
app:layout_constraintTop_toTopOf="parent" />
-
-
<TextView
-
android:layout_width="match_parent"
-
android:layout_height="200dp"
-
android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
-
app:layout_constraintBottom_toBottomOf="parent"
-
app:layout_constraintLeft_toLeftOf="parent"
-
app:layout_constraintRight_toRightOf="parent"
-
app:layout_constraintTop_toTopOf="parent" />
-
-
<TextView
-
android:layout_width="match_parent"
-
android:layout_height="200dp"
-
android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
-
app:layout_constraintBottom_toBottomOf="parent"
-
app:layout_constraintLeft_toLeftOf="parent"
-
app:layout_constraintRight_toRightOf="parent"
-
app:layout_constraintTop_toTopOf="parent" />
-
-
<TextView
-
android:layout_width="match_parent"
-
android:layout_height="200dp"
-
android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
-
app:layout_constraintBottom_toBottomOf="parent"
-
app:layout_constraintLeft_toLeftOf="parent"
-
app:layout_constraintRight_toRightOf="parent"
-
app:layout_constraintTop_toTopOf="parent" />
-
-
<TextView
-
android:layout_width="match_parent"
-
android:layout_height="200dp"
-
android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
-
app:layout_constraintBottom_toBottomOf="parent"
-
app:layout_constraintLeft_toLeftOf="parent"
-
app:layout_constraintRight_toRightOf="parent"
-
app:layout_constraintTop_toTopOf="parent" />
-
-
<TextView
-
android:layout_width="match_parent"
-
android:layout_height="200dp"
-
android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
-
app:layout_constraintBottom_toBottomOf="parent"
-
app:layout_constraintLeft_toLeftOf="parent"
-
app:layout_constraintRight_toRightOf="parent"
-
app:layout_constraintTop_toTopOf="parent" />
-
-
<TextView
-
android:layout_width="match_parent"
-
android:layout_height="200dp"
-
android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
-
app:layout_constraintBottom_toBottomOf="parent"
-
app:layout_constraintLeft_toLeftOf="parent"
-
app:layout_constraintRight_toRightOf="parent"
-
app:layout_constraintTop_toTopOf="parent" />
-
</LinearLayout>
-
</android.support.v4.widget.NestedScrollView>
-
-
</android.support.design.widget.CoordinatorLayout>
如上面布局文件CoordinatorLayout作为根目录可以捕捉NestedScrollView的滑动事件,然后交给这个类名为@string/appbar_scrolling_view_behavior的Behavior,然后Behavior根据toolbar的 app:layout_scrollFlags="scroll|enterAlways"属性来处理toolbar,实现上滑列表Toolbar跟着滑出屏幕顶端,下滑列表时Toolbar又回显出来。其实和1中Recyclerview滑动是一样的,只是这里滑动控件被替换为NestedScrollView而已。
2.2 MainActivity.java代码
-
package com.example.administrator.nestedscrollviewtoolbar;
-
import android.support.v7.app.AppCompatActivity;
-
import android.os.Bundle;
-
import android.support.v7.widget.Toolbar;
-
-
public class MainActivity extends AppCompatActivity {
-
Toolbar toolbar;
-
@Override
-
protected void onCreate(Bundle savedInstanceState) {
-
super.onCreate(savedInstanceState);
-
setContentView(R.layout.activity_main);
-
-
toolbar = (Toolbar) findViewById(R.id.toolbar);
-
setSupportActionBar(toolbar);
-
setTitle("滑动隐藏");
-
}
-
}
这里没有什么,只是显示了一个toolbar. 也就是说滑动隐藏或显示toolbar的效果其实都是在布局文件里通过配置属性而实现的。
该Demo源码下载地址同样在文章最后。
3. 监听viewpager的滑动滑动来让Toolbar显示和隐藏。
这个原理还是一样的,只是viewpager里的每一个页面布局定义成一个可滑动的NestedScrollView。同样配置Appbar内部Toolbar的一些属性可以实现垂直滑动Viewpager内容时显示或隐藏Toolbar,而且还可以隐藏TabLayout等。我们先对比一下原来的效果与现在要实现的效果:
这里只在 《高级进阶十六》的源码基础上修改了布局,我们在此主要看一下布局
3.1 main.xml布局
-
<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:orientation="vertical">
-
<android.support.design.widget.AppBarLayout
-
android:layout_width="match_parent"
-
android:layout_height="wrap_content">
-
-
<android.support.v7.widget.Toolbar
-
android:id="@+id/toolbar"
-
app:titleTextColor="@color/white"
-
app:layout_scrollFlags="scroll|enterAlways"
-
android:layout_width="wrap_content"
-
android:layout_height="wrap_content">
-
</android.support.v7.widget.Toolbar>
-
-
<android.support.design.widget.TabLayout
-
android:background="@color/white"
-
app:tabMode="scrollable"
-
android:id="@+id/tablayout"
-
android:layout_width="fill_parent"
-
android:layout_height="wrap_content"
-
app:tabIndicatorColor="@color/colorPrimary"
-
app:tabTextColor="@color/colorPrimary"
-
app:tabSelectedTextColor="@color/colorPrimaryDark"
-
app:tabGravity="fill"
-
/>
-
</android.support.design.widget.AppBarLayout>
-
<android.support.v4.view.ViewPager
-
android:id="@+id/vp"
-
android:layout_width="fill_parent"
-
android:layout_height="fill_parent"
-
/>
-
-
</android.support.design.widget.CoordinatorLayout>
这里正如我们所说,仍旧是在AppBarLayout里的Toolbar设置属性scrollFlags = "scroll|enterAlways".然后我们要让ViewPager里的页面内容可以垂直滑动起来。
3.2 ViewPager每一页fragment的布局
-
<?xml version="1.0" encoding="utf-8"?>
-
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-
android:layout_width="match_parent"
-
android:layout_height="match_parent"
-
xmlns:app="http://schemas.android.com/apk/res-auto">
-
-
<android.support.v4.widget.NestedScrollView
-
android:layout_width="match_parent"
-
app:layout_behavior="@string/appbar_scrolling_view_behavior"
-
android:layout_height="match_parent">
-
<LinearLayout
-
android:orientation="vertical"
-
android:layout_width="wrap_content"
-
android:layout_height="wrap_content">
-
-
<TextView
-
android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
-
android:layout_width="match_parent"
-
android:layout_height="200dp" />
-
-
<TextView
-
android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
-
android:layout_width="match_parent"
-
android:layout_height="200dp" />
-
-
<TextView
-
android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
-
android:layout_width="match_parent"
-
android:layout_height="200dp" />
-
-
-
<TextView
-
android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
-
android:layout_width="match_parent"
-
android:layout_height="200dp" />
-
-
<TextView
-
android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
-
android:layout_width="match_parent"
-
android:layout_height="200dp" />
-
<TextView
-
android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
-
android:layout_width="match_parent"
-
android:layout_height="200dp" />
-
<TextView
-
android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
-
android:layout_width="match_parent"
-
android:layout_height="200dp" />
-
<TextView
-
android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
-
android:layout_width="match_parent"
-
android:layout_height="200dp" />
-
</LinearLayout>
-
</android.support.v4.widget.NestedScrollView>
-
-
</android.support.constraint.ConstraintLayout>
这里我们声明了一个滚动布局NestedScrollView,在里面添加足够多的Textview使页面可以垂直滑动起来,同第2节中的NestedScrollView一样,设置layout_behavior属性为@string/appbar_scrolling_view_behavior.
至此我们讲了3种情况下垂直滑动页面内容让Toolbar显示和隐藏的实现。
源码下载:
1.滑动RecyclerView列表让Toolbar显示和隐藏的源码:
https://download.csdn.net/download/gaoxiaoweiandy/10946317
2. 滑动NestedScrollView让Toolbar显示和隐藏的源码:
https://download.csdn.net/download/gaoxiaoweiandy/10946304
3. 滑动ViewPager页面内容让Toolbar显示和隐藏的源码:
https://download.csdn.net/download/gaoxiaoweiandy/10945313
附录
使用心得
app:layout_scrollFlags="scroll|enterAlways"属性,不只适用于上面的Toolbar,可以将Toolbar换成任意布局,如LinearLayout,也可以达到上述隐藏/显示的效果。
文章来源: blog.csdn.net,作者:冉航--小虾米,版权归原作者所有,如需转载,请联系作者。
原文链接:blog.csdn.net/gaoxiaoweiandy/article/details/86598057
- 点赞
- 收藏
- 关注作者
评论(0)