前言

 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. TCP内核参数

    tcp_syn_retries :INTEGER默认值是5对于一个新建连接,内核要发送多少个 SYN 连接请求才决定放弃.不应该大于255,默认值是5,对应于180秒左右时间.(对于大负载而物理通信良 ...

  2. USACO Hamming Codes

    题目大意:求n个两两hamming距离大于等于d的序列,每个元素是一个b bit的数 思路:仍然暴力大法好 /*{ ID:a4298442 PROB:hamming LANG:C++ } */ #in ...

  3. SpringBoot + Spring Security 基本使用及个性化登录配置详解

    Spring Security 基本介绍 这里就不对Spring Security进行过多的介绍了,具体的可以参考官方文档 我就只说下SpringSecurity核心功能: 认证(你是谁) 授权(你能 ...

  4. msp430项目编程33

    msp430中项目---简易示波器系统 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结

  5. Python入门--番外--中文目录乱码问题

    写Python的程序,读取含有中文目录下的文件,结果发现根本读取不了该中文目录下的文件, 原因:通过调试发现:该文件的目录乱码,目录无法解析,自然导致无法读取文件内容 解决方法: strPath = ...

  6. 前端开发之html篇

    一.什么是html? 1.我们说socket网络编程的时候,提到过一个cs模型,就是客户端—服务端模型,前端开发也是基于网络编程,但是这时就应该是bs模型了,是浏览器与服务端的通信. 我们可以模拟一个 ...

  7. 接阿里云oss有感

    看API,从头细看到尾,在这个过程中一定会找到你要找的东西.

  8. Jenkins中的Job配置里缺少“触发远程构建(例如,使用脚本)”选项的问题解决

    如图所示的功能没有出现在Job配置页面,这是由于权限问题导致的,解决方法如下: 1.[系统管理]->[Configure Global Security] 2.配置如下: 3.或者你有第三方权限 ...

  9. Free web scraping | Data extraction | Web Crawler | Octoparse, Free web scraping

    Free web scraping | Data extraction | Web Crawler | Octoparse, Free web scraping 人才知了

  10. 如何使用KeyChain保存和获取UDID - Flex/AS Programmer

    原文 http://www.cnblogs.com/yssgyw/p/3364370.html 本文是iOS7系列文章第一篇文章,主要介绍使用KeyChain保存和获取APP数据,解决iOS7上获取不 ...