资讯专栏INFORMATION COLUMN

android support design library包下的各组件属性值的设置

MasonEast / 2907人阅读

摘要:它的子控件使用属性可以实现向上滑动隐藏控件的功能。滚动事件由可滚动控件设置属性通知。属性值介绍包裹的子控件使用表示该可以被滑出屏幕。表示任意向下的滚动都会导致该变为可见,启用快速返回模式。通过的子视图的属性控制。

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 等。
    
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/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/13368.html

相关文章

  • Material Design - 收藏集 - 掘金

    摘要:与老前辈使用攻略刷新篇掘金小序继使用攻略助力篇之后,一直没有更新上下拉刷新的功能实现,主要还是受限于个人现有的技术实力,总觉得没有经过实际打磨的,就不敢有上场的自信。 DrawerLayout 和 NavigationView 使用详解 - Android - 掘金Android Material Design Library 推出了很长时间,越来越多的APP使用了符合Library ...

    stormzhang 评论0 收藏0
  • 探索新的Android Material Design支持库

    摘要:支持库提供了一些新组件,我们在这里简要的介绍一下这些组件,以及如何使用这些组件。大会年引进一些很棒的新特性,包括新的支持库。是带有动画效果的快速提示条,它只会出现在屏幕底部。现在我们可以在程序里很容易实现,不再需要其他三方库的支持。 Android Material Design支持库提供了一些新组件,我们在这里简要的介绍一下这些组件,以及如何使用这些组件。 我是Material D...

    魏明 评论0 收藏0
  • Android组件化开发实践和案例分享

    摘要:主工程具有和组件进行绑定和解绑的功能。如下图组件化需要考虑问题考虑的问题分而治之,并行开发,一切皆组件。引用阿里的框架,通过注解方式进行页面跳转。 目录介绍 1.为什么要组件化 1.1 为什么要组件化 1.2 现阶段遇到的问题 2.组件化的概念 2.1 什么是组件化 2.2 区分模块化与组件化 2.3 组件化优势好处 2.4 区分组件化和插件化 2.5 applicati...

    zr_hebo 评论0 收藏0
  • android design library提供的TabLayout的用法

    摘要:现在我们可以使用库的去实现了。创建其中的布局为的适配器设置这里提几点我遇到的问题开始我设置的是运行后,三个标签挤到一块去了。这个有两个属性值不做过多的解释,适合很多的情况。需要注意的是方法是最新的才有的。 在开发中,我们常常需要ViewPager结合Fragment一起使用,如下图:showImg(https://segmentfault.com/img/bVoQIu); 我们可以使用...

    icyfire 评论0 收藏0
  • android有趣 文章合集- 收藏集 - 掘金

    摘要:使用起来非常开发利器介绍掘金本文翻译自著名博客,原作者是,点击此处可查看原文。这时你的心里肯定有轮播图控件的实现详解附开源链接掘金轮播图在开发中是非常常见的控件,一般的首页广告和电商类的商品详情图片都会用轮播图来实现。 Android性能优化(六)之卡顿那些事 - 掘金1、 Introduction 对普通用户而言,类如内存占用高、耗流量、耗电量等性能问题可能不会轻易发现,但是卡顿问题...

    FingerLiu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<