2. TextInputLayout
2.0 环境配置
需要引用Support v7 和 Support Design 包
You need to use a Theme.AppCompat theme (or descendant) with the design library,注意使用design包必须使用AppCompat的主题
2.1 展示效果:自带界面友好的错误提示
2.2 使用TextInputLayout包裹一个EditText,TextInputLayout和ScrollView一样,只接受一个子元素
2.3 获取输入框
textInputLayout.getEditText(); // 不需要findViewById
2.4 显示错误提示
textInputLayout.setErrorEnable(true);
textInputLayout.setError(msg);
2.5 隐藏错误提示
textInputLayout.setErrorEnable(false);
3. TextSelection
3.1 展示效果:对比5.0的文本选择,6.0系统文本选中显示的菜单项可以被修改。
3.2 创建布局,添加TextView
textView, android:textIsSelectable="true"
3.3 获取TextView对象,注册回调监听
tv.setCustomSelectionActionModeCallBack()
3.4 自定义类实现监听接口 ActionMode.CallBack
3.4 ActionMode.CallBack的onCreateActionMode方法创建Menu对象
3.4.1 创建MenuInflate对象
MenuInflate menuInflate = actionMode.getMenuInflater();
3.4.2 填充menu对象
menuInflate.inflate(R.menu.main, menu);
3.4.3 方法返回值设置为true,说明该方法已被拦截
3.6 ActionMode.CallBack的onActionItemClicked()当菜单项被选中时回调
4. FloatingActionButton(FAB)
4.1 design包中的控件,继承自ImageButton,用于显示一个悬浮在界面上的按钮,可以设置点击事件(onClickListener)
4.2 相关属性
app:elevation="10dp" 设置z轴值
app:pressedTranslationZ="20dp" 按下时z轴值
app:rippleColor="#FF0000FF" 点击时水波纹颜色
app:fabSize="normal" 两个值 normal="56dp",mini="48dp"
app:layout_anchor="@+id/anchor_id" //指定anchor(锚点) View,注意FAB需要和anchor在同一个CoordinatorLayout里面
app:layout_anchorGravity="bottom|right" //居于anchor View的什么位置
5. SnackBar
5.1 展示效果:用于显示提示,官方建议用于替代Toast
5.2 对比Toast来使用
Toast.makeText(context,msg,0).show();
Snackbar.make(view,msg,0).show();
5.3 参数里View的作用
查看官方文档,该view用于查找ParentView,直到找到CoordinatorLayout或者最上层的根控件,再显示在找到的ParentView的下面,以确定SnackBar的显示位置
5.4 设置点击事件
snackBar.setAction("提示文字",onClickListener);
6. TabLayout
依赖design包
6.1 展示效果:方便的实现tab跟随Viewpager切换,不需要第三方或者自定义
6.3 在布局里使用tablayout
6.4 向tablayout对象addTab
tabLayout.addTab(tabLayout.newTab().setText(""))
6.5 关联ViewPager
tabLayout.setupWithViewPager(viewPager)
6.6 ViewPager使用的FragmentPagerAdapter
需要在getPagerTitle方法返回一个字符串,该字符串会作为对应position的tab的标题。
6.7 设置tab的点击事件
tabLayout.setOnTabSelectedListener
6.8 相关属性
app:tabIndicatorColor="#FFFF0000" 选中Tab指示线的颜色
app:tabIndicatorHeight="5dp" 选中Tab指示线的高度
app:tabSelectedTextColor="#FF0000FF" 选中Tab文本的颜色
app:tabTextColor="#FFFFFFFF" 默认Tab文本颜色
app:tabMode="scrollable" 两个属性值 scrollable 可滚动,fixed 固定(默认)
app:tabGravity="fill" 两个属性值 fill 宽度平分屏幕,center,让Tab居中。
请注意,如果 tabMode 是设置成 scrollable 的,则tabGravity会被忽略。
基本使用:
initTab():
初始化:
TabLayout mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
添加Tab:
mTabLayout.addTab(mTabLayout.newTab().setText("Tab"+(i+1)));
可设置的属性:
tabMode:scrollable Tab长度固定,可左右滚动,即使当前所有Tab的宽度没有占满TabLayout,也是固定长度,适合Tab个数较多时
tabMode:fixed,平分当前TabLayout的宽度给每一个Tab,适合Tab个数较少时
Tab的点击监听:
mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener());
和ViewPager关联
布局中添加viewpager
创建自己的MyPagerAdapter 继承FragmentPagerAdapter,创建SubFragment,实现onCreateView,newInstance(String content)方法,
MyPagerAdapter中新建方法addFragment,实现getItem,getPagerTitle.
ViewPager设置setAdapter
TabLayout和ViewPager关联:tabLayout.setupWithViewPager(viewPager)
Tab的选中回调时 viewPager.setCurrentItem(tab.getPosition());
7. NavigationView
7.1 展示效果:用作侧滑菜单的侧边导航栏
7.2 必须嵌套在DrawerLayout里使用
DrawerLayout包含两个子布局,一个导航栏,另一个为显示的正文
7.3 NavigationView的属性:
7.3.1 app:headerLayout,可选项,可以指定一个布局作为导航内容的Header
7.3.2 app:menu,必需项,指定一个menu,作为导航内容的菜单
7.3.3 其他相关属性
app:itemIconTint ICON 染色
app:itemBackground item的背景色
app:itemTextColor item的文本颜色
7.4 导航栏的点击响应
7.4.1 navigationView.setNavigationItemSelectedListener
该方法监听被点击的MenuItem,判断MenuItem对象处理对应的事件响应
8.CoordinatorLayout 结合FAB调整布局
8.1 CoordinatorLayout 的作用
1.可以协调多个布局间的位置关系。让FloatActionButton上下滑动,为Snackbar留出空间;
2.拓展或折叠toolbar,让主内容区域有更多的空间;
3.控制view扩展或收缩,以及大小比例
8.2 实现调整FAB 与SnackBar的位置功能
8.2.1 FloatActionButton外加一层CoordinatorLayout 即可调整。
9.CoordinatorLayout 结合AppBarLayout 实现向上滑动隐藏ToolBar
思路
9.1 AppBarLayout 的作用
1.用AppBarLayout包裹的子view会以一个整体的形式作为AppBar,从而具备统一的风格。
2.它的子控件使用app:layout_scrollFlags 属性可以实现向上滑动隐藏控件的功能。滚动事件由可滚动控件设置app:layout_behavior 属性通知。
9.2 app:layout_scrollFlags 属性值介绍(AppBarLayout包裹的子控件使用)
// scroll 表示该view可以被滑出屏幕。
// enterAlways 表示任意向下的滚动都会导致该View变为可见,启用快速“返回模式”。
// exitUntilCollapsed 当有miniheight 时,向上滚动则一直保持miniheight高度。
// enterAlwaysCollapsed 当滑动的控件到达其顶部时,该隐藏的View才显示
9.3 app:layout_behavior 属性值介绍
配合AppBarLayout 使用的可滚动控件需要设置这个属性值,用于告诉AppBarLayout,当前控件的滚动状态,标识自己发起的滚动可以导致AppBar收缩。
固定写法:app:layout_behavior="@string/appbar_scrolling_view_behavior"
步骤
1.添加CoordinatorLayout,包裹AppBarLayout和可滚动的控件
2.添加AppBarLayout控件,内部包裹 ToolBar 及TabLayout 控件
3.ToolBar 设置app:layout_scrollFlags="scroll|enterAlways" //表示向上滚动时,隐藏Toolbar 控件。
5. CoordinatorLayout 下添加可滚动控件,并在该控件中设置 app:layout_behavior="@string/appbar_scrolling_view_behavior" 属性。用于告诉
AppBarLayout,由该控件发起滚动事件。
6. 注意:
带layout_scrollFlags的view需要放在固定View的前面,这样收回的view才能够正常退出,而固定的view继续留在顶部
10、CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout 结合实现视差效果
10.1 AppBarLayout用于包裹且仅包裹CollapsingToolbarLayout,使得CollapsingToolbarLayout作为AppBar而存在
10.2 CollapsingToolbarLayout作用:用于折叠ToolBar,提供滑动中的渐变和视差效果
10.3 设置CollapsingToolbarLayout属性
app:expandedTitleMarginStart="10dp" // 指定文字和左边缘的间距
app:contentScrim="?android:attr/colorPrimary" //折叠后ToolBar的颜色
app:layout_scrollFlags="scroll|exitUntilCollapsed" //设置滑动标志,表示该View会离开屏幕范围,直到收折到最小高度
CollapsingToolbarLayout包裹的子View可以设置的属性
app:layout_collapseMode="pin" 表示不会被滚出屏幕范围
app:layout_collapseMode="parallax" 表示滚动过程中,会一直保持可见区域在正中间
10.4 发起layout_behavior
NestedScrollView 有behavior 属性,ScrollView 没有。
给NestedScrollView设置app:layout_behavior="@string/appbar_scrolling_view_behavior"
10.5 手势滑动时,修改toolbar文字大小,文字颜色
10.5.1 获取到CollapsingToolbarLayout对象
10.5.2 设置标题
collapsingToolbarLayout.setTitle
10.5.3 设置展开状态时Title颜色
collapsingToolbarLayout.ExpandedTitleColor
10.5.4 设置折叠状态时Title颜色
collapsingToolbarLayout.setCollapsedTitleTextColor
**CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。CoordinatorLayout通过设置子View的 Behaviors来调度子View。系统
1.CoordinatorLayout:**
1.1 作用
1.1.1作为顶层布局
1.1.2调度协调子布局
1.2 原理
CoordinatorLayout使用调度子布局的形式实现触摸影响布局的形式产生动画效果。CoordinatorLayout通过设置子View的 Behaviors来调度子View。系统(Support V7)提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior<V extends View> 等。
1.3 CoordinatorLayout结合FloatingActionButton 使用
CoordinatorLayout是一个在ViewGroup的基础扩展的类,设置子视图的android:layout_gravity属性控制位置。
1.4 CoordinatorLayout与AppBarLayout
1.4.1 AppBarLayout嵌套TabLayout和ToolBar,来实现向上滑动时,隐藏ToolBar功能。
视图滚动时,Toolbar会隐藏,这个效果是Android Support Library里面新增的CoordinatorLayout, AppBarLayout实现的。通过AppBarLayout的子视图的属性控制。观察AppBarLayout的子布局,Toobar有app:layout_scrollFlags属性,
这就是控制滑动时视图效果的属性。app:layout_scrollFlags有四个值:
scroll: 所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。例如,TabLayout 没有设置这个值,将会停留在屏幕顶部。
enterAlways: 设置这个flag时,向下的滚动都会导致该view变为可见,启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。
1.4.2 注意事项
为了使得Toolbar有滑动效果,必须做到如下三点:
1. CoordinatorLayout作为布局的父布局容器。
2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
3. 给滑动的组件设置app:layout_behavior属性
1.5 CoordinatorLayout结合AppBarLayout嵌套CollapsingToolbarLayout(可折叠ToolbarLayout),来实现ToolBar 折叠效果,及展现视差效果
1.5.1 CollapsingToolbarLayout作用
CollapsingToolbarLayout可实现Toolbar的折叠效果。CollapsingToolbarLayout的子视图类似与LinearLayout垂直方向排放。
1.5.2 CollapsingToolbarLayout 提供以下属性和方法
1. Collapsing title:ToolBar的标题,当CollapsingToolbarLayout全屏没有折叠时,title显示的是大字体,在折叠的过程中,title不断变小到一定大小的效果。
你可以调用setTitle(CharSequence)方法设置title。
2. Content scrim:ToolBar被折叠到顶部固定时候的背景,你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
3. Status bar scrim:状态栏的背景,调用方法setStatusBarScrim(Drawable)。不过这个只能在Android5.0以上系统有效果。
4. Parallax scrolling children:CollapsingToolbarLayout滑动时,子视图的视觉差,可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0],
值越大视察越大。
5. CollapseMode :子视图的折叠模式,在子视图设置,有两种“pin”:固定模式,在折叠的时候最后固定在顶端;“parallax”:视差模式,在折叠的时候会有个视差折叠的效果。
我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。
1.5.2 使用CollapsingToolbarLayout实现折叠效果,需要注意3点
1. AppBarLayout的高度固定
2. CollapsingToolbarLayout的子视图设置layout_collapseMode属性
3. 关联悬浮视图设置app:layout_anchor,app:layout_anchorGravity属性
1.6 CoordinatorLayout 还提供了一个 layout_anchor 的属性,连同 layout_anchorGravity 一起,可以用来放置与其他视图关联在一起的悬浮视图(如 FloatingActionButton)
design 包中控件相关资料:
http://www.androidchina.net/2...
http://blog.csdn.net/xyz_lmn/...
http://developer.android.com/...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。