转载:

CoordinatorLayout配合AppBarLayout,Toolbar和TabLayout的使用

控件的简单介绍:

AppBarLayout:它是继承LinerLayout实现的一个ViewGroup容器组件,是为了Material Design而设计的App Bar,支持手势滑动操作。

默认的AppBarLayout是垂直方向的,它的作用是把AppBarLayout包裹的内容都作为AppBar。 
使用方式非常简单,直接在布局文件中包裹想要作为顶部栏的控件,例如Toolbar和TabLayout.

CoordinatorLayout:CoorfinatorLayout是一个增强型的FrameLayout,,它的作用就是用来协调其所包裹的子view的手势操作的.

当然在使用之前,我们需要在gradle中引入Design支持包,24.2.0也可以

compile 'com.android.support:design:23.2.0'
也可以在File-project Stucture 点击对应的项目搜索design依赖
代码实现:手指向上滚动屏幕时,reCycleView 滚动,toolbar向上滑出屏幕
    手指向下滑动时,Toolbar显示回屏幕上
xml:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="fanggao.qf.coordinatorlayout_appbarlayout_toolbar_tablayoutbar.MainActivity"> <android.support.design.widget.AppBarLayout
android:id="@+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<!--
设置的layout_scrollFlags有如下几种选项:
scroll: 所有想滚动出屏幕的view都需要设置这个flag-没有设置这个flag的view将被固定在屏幕顶部。
enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,
你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。-->
<!--标题栏-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width = "match_parent"
android:layout_height = "?attr/actionBarSize"
app:layout_scrollFlags = "scroll|enterAlways"
android:background="#0000ff"
>
<!--自定义view-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="标题"
android:textSize="30sp"
android:gravity="center"
android:layout_gravity="center"
/>
</android.support.v7.widget.Toolbar>
<!--选项卡-->
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width = "match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@android:color/holo_orange_dark"
android:scrollbarSize="10dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#000000"
app:tabTextColor="#ffffff" />
</android.support.design.widget.AppBarLayout>
<!--包含可滑动的布局内容(RecyclerView,NestedScrollView,不支持ListView,ScrollView)
必须要设置app:layout_behavior="@string/appbar_scrolling_view_behavior"
属性来告知CoordinatorLayout该组件是带有滑动行为的组件,
然后CoordinatorLayout在接受到滑动时会通知AppBarLayout中可滑动的Toolbar可以滑出屏幕-->
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

为了达到手势上下滚动,Toolbar显示不显示的动画效果,我们需要在ToolBar中设置如下属性

app:layout_scrollFlags = "scroll|enterAlways"
表示该bar是可滑动的
同时,为了使得Toolbar可以滑动,还需要一个条件就是CoordinatorLayout布局下包裹一个可以滑动的布局,比如: RecyclerView,NestedScrollView(ListView,ScrollView不支持)具有滑动效果的组件。 
并且还需要给这些组件设置如下属性来告诉CoordinatorLayout,该组件是带有滑动行为的组件,然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了。
 app:layout_behavior="@string/appbar_scrolling_view_behavior"

注意:这里我们使用了Toolbar代替ActionBar,因此需要在清单文件中设置theme为noActionBar,否则会报找不到actionBar异常

recycleview_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:padding="2dp">
<TextView
android:id="@+id/tv_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30dp"
android:textColor="#ffffff"
android:text="文字"
android:gravity="center"
android:padding="20dp"
android:background="@android:color/darker_gray"/>
</LinearLay>
主程序代码:
public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
private RecyclerView recyclerView;
private TabLayout tablayout;
private List<String> dataList = new ArrayList<String>(); ;
private RecycleViewAdapter recycleViewAdapter; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData(1);
initView(); } private void initData(int page) { for (int i = 0; i < 50; i++) {
dataList.add("第"+page+"页第"+(i+1)+"条数据");
}
}
private void initView() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
//toolabar替换actionBar,需在清单文件中设置style = noActionBar
setSupportActionBar(toolbar);
tablayout = (TabLayout) findViewById(R.id.tabLayout);
//设置TabLayout
for (int i = 0; i < 30; i++) {
tablayout.addTab(tablayout.newTab().setText("TAB"+i));
}
//设置tablayout的切换监听
tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
//当页卡选择的时候调用
@Override
public void onTabSelected(TabLayout.Tab tab) {
dataList.removeAll(dataList);
//切换的时候更新RecyclerView
initData(tab.getPosition()+1);
recycleViewAdapter.notifyDataSetChanged();
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
//设置布局
recyclerView.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false));
//设置动画
recyclerView.setItemAnimator(new DefaultItemAnimator());
//设置适配器
recycleViewAdapter = new RecycleViewAdapter(this, dataList);
recyclerView.setAdapter(recycleViewAdapter);
}
}

RecycleViewAdapter:

public class RecycleViewAdapter extends RecyclerView.Adapter<RecycleViewAdapter.MyViewHolder> {
private Context context;
private List<String> dataList;
public RecycleViewAdapter(Context context, List<String> dataList) {
this.context = context;
this.dataList = dataList;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(context).inflate(R.layout.layout_recyclerview_item, parent, false);
return new MyViewHolder(view);
}
@Override
public int getItemCount() {
return dataList.size();
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.tv_text.setText(dataList.get(position));
}
public class MyViewHolder extends RecyclerView.ViewHolder {
private TextView tv_text;
public MyViewHolder(View itemView) {
super(itemView);
tv_text=(TextView) itemView.findViewById(R.id.tv_text);
}
}
}

效果如下:

默认:

向上滑动效果:

点击Tab:

安卓Design包之CoordinatorLayout配合AppBarLayout,ToolBar,TabLaout的使用的更多相关文章

  1. 安卓Design包之NavigationView结合DrawerLayout,toolbar的使用,FloatingActionButton

    注意:使用前需要添加Design依赖包,使用toolbar时需要隐藏标题头 FloatingActionButton 悬浮按钮:FloatingActionButton是重写ImageView的,所有 ...

  2. 安卓Design包之Toolbar控件的使用

    转自:ToolBar的使用 ToolBar的出现是为了替换之前的ActionBar的各种不灵活使用方式,相反,ToolBar的使用变得非常灵活,因为它可以让我们自由往里面添加子控件.低版本要使用的话, ...

  3. 安卓Design包之TabLayout控件的使用

    转自: 安卓Design包之TabLayout控件的简单使用 Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android ...

  4. 安卓Design包之AppBar和Toolbar的联用

    前面讲了Design包的的CoordinatorLayout和SnackBar的混用,现在继续理解Design包的AppBar; AppBarLayout跟它的名字一样,把容器类的组件全部作为AppB ...

  5. 安卓Design包之超强控件CoordinatorLayout与SnackBar的简单使用

    在前面的Design中,学习使用了TabLayout,NavigationView与DrawerLayout实现的神奇效果,今天就带来本次Design包中我认为最有意义的控件CoordinatorLa ...

  6. 【知识必备】一文让你搞懂design设计的CoordinatorLayout和AppbarLayout联动,让Design设计更简单~

    一.写在前面 其实博主在之前已经对design包的各个控件都做了博文说明,无奈个人觉得理解不够深入,所以有了这篇更加深入的介绍,希望各位看官拍砖~ 二.从是什么开始 1.首先我们得知道Coordina ...

  7. 安卓Design包下的TextInputLayout和FloatingActionButton的简单使用

    终于介绍到Design包的最后的东西了. 也很简单,一个是TextInputLayout. TextInputLayout作为一个父容器,包含一个新的EditText,可以给EditText添加意想不 ...

  8. 安卓Design包之TabLayout控件的简单使用

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...

  9. 安卓Design包之CollapsingToolbarLayout(可折叠的工具栏布局)的简单使用

    转自: CollapsingToolbarLayout的使用 注意:使用前需要添加Design依赖包,使用toolbar时需要隐藏标题头 CollapsingToolbarLayout作用是提供了一个 ...

随机推荐

  1. HDU2819Swap(二分图最大匹配)

    题目链接  http://acm.hdu.edu.cn/showproblem.php?pid=2819 题目大意很明确,交换图的某些行或者是某些列(可以都换),使得这个N*N的图对角线上全部都是1. ...

  2. java去掉jsp标签内容的方法

    //去掉内容的标签   public static String removeTag(String count){    try {    int tagCheck=-1;    do {     i ...

  3. shell常见语法

    #!/bin/bashecho "**********argument**********"echo script name: $0echo first argument $1ec ...

  4. installshield Basic 工程每次安装完提示重启电脑

     将Sequence中的ScheduleReboot Action的Condition清空即可. 

  5. Jquery 校验文本框只能输入负数、小数、整数

     /*   umlzhang    date:2013-09-12   */   //检验只能输入整数,小数和负数    $(function () {          var obj = $(&q ...

  6. jQuery(一)delegate() 方法

    定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来 ...

  7. AVR JTAG MKii 引脚布局 ( JTAG 和 ISP )

    1,JTAG和ISP引脚复用,JTAG的TCK,TDO,TDI分别与ISP的SCK,MISO,MOSI复用:2,VT引脚必须接目标板电源,不然仿真器接口电路不工作: JTAG接口引脚定义如下 标配的J ...

  8. VPW Communication Protocol

    http://www.fastfieros.com/tech/vpw_communication_protocol.htm Breakdown of the j1850 3 byte Header f ...

  9. 【转】知道创宇研发技能表v2.1

    转自:http://blog.knownsec.com/Knownsec_RD_Checklist/v2.1.html# 知道创宇研发技能表v2.1 创建时间:2012/12/1 2013/4/26 ...

  10. C#-异常处理:tyr,catch,finally ---ShinePans

    异常处理能够解决诸如一下问题: 数据库连接失败,IO错误,数据溢出,数组下表越界等问题.  总结:我认为在某些easy出错的地方加上 异常处理语句是很明智的选择 finally 是不管怎样都要运行的语 ...