前言

 AppBarLayout,顾名知意。就是用来给AppBar布局的容器,是LinearLayout的子类。而AppBar就包括我们通常所知道的ActionBar,Toolbar。

AppBarLayout要点:

  1. 功能:让子View(AppBar)能够选择他们自己的滚动行为。

  2. 注意:须要依赖CoordinatorLayout作为父容器,同一时候也要求一个具有能够独立滚动的兄弟节点(或兄弟节点的子view能够滚动)才干发挥其功能。

CoordinatorLayout简单介绍:

 该控件是Design包下的一个控件,是组织它众多子view之间互相协作的一个ViewGroup。

CoordinatorLayout 的奇妙之处就在于 Behavior 对象。CoordinatorLayout使用 Behavior 对象进行通信。使得其子view之间知道了彼此的存在。一个子view的变化能够通知到还有一个子view。CoordinatorLayout 所做的事情就是当成一个通信的桥梁。连接不同的view。

使用该控件须要依赖相关的库:

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'
}

实践出真章。动手才是硬道理

1. Toolbar + AppBarLayout的简单样例

 前面已经说了,AppBarLayout须要CoordinatorLayout作为父容器而且还须要一个能够独立滚动的兄弟节点(CoordinatorLayout 的子view(或间接子view))才干发挥其功能,不多说,看以下的布局:

activity_main.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.lt.appbarlayoutdemo.MainActivity"> <!-- AppBarLayout。作为CoordinatorLayout的子类 -->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
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"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay"/> </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">
<!-- Your scrolling content -->
<TextView
android:layout_width="match_parent"
android:layout_margin="20dp"
android:text="日本疑似被绑架记者现身网络中国新闻网 18:55"
android:layout_height="wrap_content"/>
</android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>

注意:

  1. 兄弟节点的app:layout_behavior="@string/appbar_scrolling_view_behavior"属性非常重要;
  2. AppBarLayout子view的app:layout_scrollFlags属性非常重要,其值有三个:
    1. scroll: 全部想滚动出屏幕的view都须要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
    2. enterAlways: 这个flag让随意向下的滚动都会导致该view变为可见,启用”高速返回”模式。
    3. enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图仅仅会在最小高度处进入,仅仅有当滚动视图到达顶部时才扩大到完整高度。
    4. exitUntilCollapsed: 在滚动过程中,仅仅有当视图折叠到最小高度的时候,它才退出屏幕。
  3. 注意AppBarLayout的兄弟节点(或兄弟节点的子view)一定要是能够滚动的View/ViewGroup。如:NestedScrollView,RecycleView。
  4. 那些使用Scroll flag的视图必须在其它没有使用Scroll flag的视图之前声明。

    这样才干确保全部的视图从顶部撤离。剩下的元素固定在前面(译者注:剩下的元素压在其它元素的上面)。

Activity代码測试:

package com.example.lt.appbarlayoutdemo;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.ListView; public class MainActivity extends AppCompatActivity { @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
} @Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
} @Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId(); //noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
} return super.onOptionsItemSelected(item);
}
}

关于Toolbar的使用能够參考:android 5.X Toolbar+DrawerLayout实现抽屉菜单,这里就不多做说明了。

2. 再 + TabLayout实现经典组合

activity_main.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.lt.appbarlayoutdemo.MainActivity"> <!-- AppBarLayout。作为CoordinatorLayout的子类 -->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
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"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay"/> <android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabIndicatorColor="@android:color/transparent"
app:tabMode="scrollable">
</android.support.design.widget.TabLayout> </android.support.design.widget.AppBarLayout> <!-- Your scrolling content -->
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</android.support.v4.view.ViewPager> </android.support.design.widget.CoordinatorLayout>

初始化TabLayout

String[] titles = {"最新","赣州","社会","订阅","娱乐","NBA","搞笑","科技","创业"};
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
List<Fragment> fragments = new ArrayList<Fragment>();
for (int i = 0; i < titles.length; i++) {
Fragment fragment = new MyFragment();
Bundle bundle = new Bundle();
bundle.putString("text",titles[i]);
fragment.setArguments(bundle);
fragments.add(fragment);
}
viewPager.setAdapter(new TabFragmentAdapter(fragments, titles, getSupportFragmentManager(), this));
// 初始化
TabLayout tablayout = (TabLayout) findViewById(R.id.tablayout);
// 将ViewPager和TabLayout绑定
tablayout.setupWithViewPager(viewPager);
// 设置tab文本的没有选中(第一个參数)和选中(第二个參数)的颜色
tablayout.setTabTextColors(Color.GRAY, Color.WHITE);

MyFragment.java

package com.example.lt.appbarlayoutdemo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.NestedScrollView;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView; /**
* Created by lt on 2016/3/19.
*/
public class MyFragment extends Fragment {
private String mText; @Override
public void onCreate(@Nullable Bundle bundle) {
super.onCreate(bundle);
if(getArguments()!=null){
mText = getArguments().getString("text");
}
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
NestedScrollView scrollableView = new NestedScrollView(getActivity());
TextView textView = new TextView(getActivity());
textView.setTextColor(Color.RED);
textView.setGravity(Gravity.CENTER);
textView.setText(mText);
scrollableView.addView(textView);
return scrollableView;
}
}

须要注意的是,我们不管怎样都要给AppBarLayout加入一个能够滚动的的兄弟节点(或兄弟节点的子节点),这里就嵌套了NestedScrollView 。

TabFragmentAdapter.java

package com.example.lt.appbarlayoutdemo;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /**
* Created by lt on 2016/3/19.
*/
public class TabFragmentAdapter extends FragmentPagerAdapter{
private final String[] titles;
private Context context;
private List<Fragment> fragments; public TabFragmentAdapter(List<Fragment> fragments,String[] titles, FragmentManager fm, Context context) {
super(fm);
this.context = context;
this.fragments = fragments;
this.titles = titles;
} @Override
public Fragment getItem(int position) {
return fragments.get(position);
} @Override
public int getCount() {
return titles.length;
} @Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}

关于TabLayout的使用不懂的能够參考:TabLayout轻松实现仿今日头条顶部tab导航效果

Toolbar和TabLayout布局属性layout_scrollFlags值组合:

  • (1)Toolbar=scroll|enterAlways

    (2)TabLayout=scroll|enterAlways

    效果:

  • (1)Toolbar=scroll|enterAlways

    (2)TabLayout不设该属性

    效果:

  • (1)Toolbar=不设该属性

    (2)TabLayout不设该属性

    效果:

    即不会滑出屏幕

  • (1)Toolbar不设该属性

    (2)TabLayout=scroll|enterAlways

    效果:

    即不会滑出屏幕

总结:关于这些控件的使用,我觉得不必一次性全部学透,仅仅要我们会个大概的使用即可了。其它更加细节的东西(比方Toolbar改动样式等等)能够等用到的时候再去研究。由于,有些控件要一次学透比較费时间,还说不定以后用不到。比方:学习ActionBar的时候不是必需先去知道怎么改动ActionBar的背景颜色,等我们使用ActionBar有这方面的须要的时候再去研究,查找解决方法。

须要源代码的请点击以下的链接:

demo下载

Material Design (四),AppBarLayout的使用的更多相关文章

  1. Android(Lollipop/5.0) Material Design(四) 创建列表和卡片

    Material Design系列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design( ...

  2. Android(Lollipop/5.0) Material Design(六) 使用图像

    Material Design列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design(二 ...

  3. Android(Lollipop/5.0) Material Design(二) 入门指南

    Material Design系列 Android(Lollipop/5.0)Material Design(一) 简介 Android(Lollipop/5.0)Material Design(二) ...

  4. Android(Lollipop/5.0) Material Design(一) 简单介绍

    Material Design系列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design( ...

  5. Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar

    ok,今天继续更新Material Design系列!!! 废话不说,先看看效果图吧: 好了,现在来讲讲上图是怎么实现的吧!讲之前先讲讲几个控件: CoordinatorLayout  该控件也是De ...

  6. 【转】Material Design 折叠效果 Toolbar CollapsingToolbarLayout AppBarLayout

    我非常喜欢Material Design里折叠工具栏的效果,bilibili Android客户端视频详情页就是采用的这种设计.这篇文章的第二部分我们就通过简单的模仿bilibili视频详情页的实现来 ...

  7. Material Design 组件之 AppBarLayout

    AppBarLayout 是一个垂直方向的 LinearLayout,它实现了许多符合 Material Design 设计规范的状态栏应该具有的功能,比如滚动手势. AppBarLayout 一般直 ...

  8. Material Design系列第四篇——Defining Shadows and Clipping Views

    Defining Shadows and Clipping Views This lesson teaches you to Assign Elevation to Your Views Custom ...

  9. Android Material Design NavigationView 及 Palette 颜色提取器

    DrawerLayout + NavigationView DrawerLayout布局,通常在里面添加两个子控件,程序主界面添加到NavitagionView前面. <android.supp ...

随机推荐

  1. H5系列之地理位置(必知必会)

    H5之地理位置必知必会     [02]概念   规范地址:http://www.w3.org/TR/geolocation-API/     HTML5 Geolocation(地理定位)用于定位用 ...

  2. SQL Server on Red Hat Enterprise Linux

    本文从零开始一步一步介绍如何在Red Hat Enterprise Linux上搭建SQL Server 2017,包括安装系统.安装SQL等相关步骤和方法(仅供测试学习之用,基础篇). 一.   创 ...

  3. 送信 okhttp

    package jp.co.gunmabank.minefocus.accountApp import android.content.Intentimport android.graphics.Co ...

  4. 关于流媒体(m3u8)的播放与下载

    前一段时间做了一个视频播放下载应用,抓取的是优酷的视频,虽然优酷有自己的开发平台http://open.youku.com/,但未真正的实现.所以只能靠抓取视频源,Youku的视频采取了加密+动态的获 ...

  5. [BZOJ4506] [Usaco2016 Jan]Fort Moo(DP?)

    传送门 总之可以先预处理出来每个位置最多往上延伸多少 枚举两行,看看夹在这两行中间的列最大能构成多大的矩形 可以看出,必须得在一个两行都没有X的区间才有可能构成最大的答案 那么可以把这些区间处理出来, ...

  6. 刷题总结——选课(ssoj树形dp+记忆化搜索+多叉树转二叉树)

    题目: 题目描述 学校实行学分制.每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分.学校开设了 N(N<300)门的选修课程,每个学生可选课程的数量 M 是给定的.学生选修了这M门课 ...

  7. 刷题总结——瞭望塔(bzoj1038)

    题目: Description 致力于建设全国示范和谐小村庄的H村村长dadzhi,决定在村中建立一个瞭望塔,以此加强村中的治安.我们将H村抽象为一维的轮廓.如下图所示 我们可以用一条山的上方轮廓折线 ...

  8. 路飞学城详细步骤 part1

    详细步骤 1 添加登录页面 步骤: Header.vue 写一个登录按钮,<router-link to = ' /xx'> 在路由的 index.js中添加这个 新的路由,{'path' ...

  9. HDU 2197 本源串

    如果一个串能完全由其子串组成,那么这个串就不是本源串 求长度为n的本源串的个数. 由定义一个串如果不是本源串,那么他的长度一定是组成其子本源串的长度的(>=1) 整数倍. 那么长度为n的串总个数 ...

  10. tyvj 1061 Mobile Service

    线性DP 本题的阶段很明显,就是完成了几个请求,但是信息不足以转移,我们还需要存储三个服务员的位置,但是三个人都存的话会T,我们发现在阶段 i 处,一定有一个服务员在 p[i] 处,所以我们可以只存另 ...