Material Design (四),AppBarLayout的使用
前言
AppBarLayout,顾名知意。就是用来给AppBar布局的容器,是LinearLayout的子类。而AppBar就包括我们通常所知道的ActionBar,Toolbar。
AppBarLayout要点:
功能:让子View(AppBar)能够选择他们自己的滚动行为。
注意:须要依赖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>
注意:
- 兄弟节点的
app:layout_behavior="@string/appbar_scrolling_view_behavior"
属性非常重要; - AppBarLayout子view的
app:layout_scrollFlags
属性非常重要,其值有三个:
- scroll: 全部想滚动出屏幕的view都须要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
- enterAlways: 这个flag让随意向下的滚动都会导致该view变为可见,启用”高速返回”模式。
- enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图仅仅会在最小高度处进入,仅仅有当滚动视图到达顶部时才扩大到完整高度。
- exitUntilCollapsed: 在滚动过程中,仅仅有当视图折叠到最小高度的时候,它才退出屏幕。
- 注意AppBarLayout的兄弟节点(或兄弟节点的子view)一定要是能够滚动的View/ViewGroup。如:NestedScrollView,RecycleView。
- 那些使用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有这方面的须要的时候再去研究,查找解决方法。
须要源代码的请点击以下的链接:
Material Design (四),AppBarLayout的使用的更多相关文章
- Android(Lollipop/5.0) Material Design(四) 创建列表和卡片
Material Design系列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design( ...
- Android(Lollipop/5.0) Material Design(六) 使用图像
Material Design列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design(二 ...
- Android(Lollipop/5.0) Material Design(二) 入门指南
Material Design系列 Android(Lollipop/5.0)Material Design(一) 简介 Android(Lollipop/5.0)Material Design(二) ...
- Android(Lollipop/5.0) Material Design(一) 简单介绍
Material Design系列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design( ...
- Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar
ok,今天继续更新Material Design系列!!! 废话不说,先看看效果图吧: 好了,现在来讲讲上图是怎么实现的吧!讲之前先讲讲几个控件: CoordinatorLayout 该控件也是De ...
- 【转】Material Design 折叠效果 Toolbar CollapsingToolbarLayout AppBarLayout
我非常喜欢Material Design里折叠工具栏的效果,bilibili Android客户端视频详情页就是采用的这种设计.这篇文章的第二部分我们就通过简单的模仿bilibili视频详情页的实现来 ...
- Material Design 组件之 AppBarLayout
AppBarLayout 是一个垂直方向的 LinearLayout,它实现了许多符合 Material Design 设计规范的状态栏应该具有的功能,比如滚动手势. AppBarLayout 一般直 ...
- Material Design系列第四篇——Defining Shadows and Clipping Views
Defining Shadows and Clipping Views This lesson teaches you to Assign Elevation to Your Views Custom ...
- Android Material Design NavigationView 及 Palette 颜色提取器
DrawerLayout + NavigationView DrawerLayout布局,通常在里面添加两个子控件,程序主界面添加到NavitagionView前面. <android.supp ...
随机推荐
- H5系列之地理位置(必知必会)
H5之地理位置必知必会 [02]概念 规范地址:http://www.w3.org/TR/geolocation-API/ HTML5 Geolocation(地理定位)用于定位用 ...
- SQL Server on Red Hat Enterprise Linux
本文从零开始一步一步介绍如何在Red Hat Enterprise Linux上搭建SQL Server 2017,包括安装系统.安装SQL等相关步骤和方法(仅供测试学习之用,基础篇). 一. 创 ...
- 送信 okhttp
package jp.co.gunmabank.minefocus.accountApp import android.content.Intentimport android.graphics.Co ...
- 关于流媒体(m3u8)的播放与下载
前一段时间做了一个视频播放下载应用,抓取的是优酷的视频,虽然优酷有自己的开发平台http://open.youku.com/,但未真正的实现.所以只能靠抓取视频源,Youku的视频采取了加密+动态的获 ...
- [BZOJ4506] [Usaco2016 Jan]Fort Moo(DP?)
传送门 总之可以先预处理出来每个位置最多往上延伸多少 枚举两行,看看夹在这两行中间的列最大能构成多大的矩形 可以看出,必须得在一个两行都没有X的区间才有可能构成最大的答案 那么可以把这些区间处理出来, ...
- 刷题总结——选课(ssoj树形dp+记忆化搜索+多叉树转二叉树)
题目: 题目描述 学校实行学分制.每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分.学校开设了 N(N<300)门的选修课程,每个学生可选课程的数量 M 是给定的.学生选修了这M门课 ...
- 刷题总结——瞭望塔(bzoj1038)
题目: Description 致力于建设全国示范和谐小村庄的H村村长dadzhi,决定在村中建立一个瞭望塔,以此加强村中的治安.我们将H村抽象为一维的轮廓.如下图所示 我们可以用一条山的上方轮廓折线 ...
- 路飞学城详细步骤 part1
详细步骤 1 添加登录页面 步骤: Header.vue 写一个登录按钮,<router-link to = ' /xx'> 在路由的 index.js中添加这个 新的路由,{'path' ...
- HDU 2197 本源串
如果一个串能完全由其子串组成,那么这个串就不是本源串 求长度为n的本源串的个数. 由定义一个串如果不是本源串,那么他的长度一定是组成其子本源串的长度的(>=1) 整数倍. 那么长度为n的串总个数 ...
- tyvj 1061 Mobile Service
线性DP 本题的阶段很明显,就是完成了几个请求,但是信息不足以转移,我们还需要存储三个服务员的位置,但是三个人都存的话会T,我们发现在阶段 i 处,一定有一个服务员在 p[i] 处,所以我们可以只存另 ...