美文网首页
Material Design 的常用控件,让你的页面更酷炫

Material Design 的常用控件,让你的页面更酷炫

作者: AK__47 | 来源:发表于2020-06-06 10:39 被阅读0次

            自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮,好的用户体验;针对Material Design推出的新控件做个简单的说明和使用介绍,加深印象:

    DrawLayout   NavigationView

            在Materil Design中,NavigationView作为一个抽屉导航来实现app内部的交互,让实现更简单,同时还能直接通过菜单资源元素直接生成导航元素;NavigationView 的使用需要结合DrawLayout一起使用。

    navigation_menu的使用

    注意:其中checked=”true”的item将会高亮显示,这可以让用户知道当前选中的菜单项是哪个。当然,item的选中状态可以在代码中设置;

    注意:我们上面实现的是menu菜单的点击事件,我们如果要回调headerLayout的点击事件该怎么写呢,NavigationView并没有提供一个类似于menu的点击监听,而是提供了一个getHeaderView(int index)的api,所以头布局的点击事件应该这么写:

    mNavigationView.getHeaderView(0).setOnClickListener(new View.OnClickListener() {  

                        @Override  

                        public void onClick(View v) {  

                                    Toast.makeText(NavigationViewActivity.this,"Pic",Toast.LENGTH_SHORT).show();  

                          }  

        });  

    小贴士:NavigationView还提供了一个getHeaderCount()的api返回头布局一共有多少个子view,可以实现任一控件的监听;

    TextInputLayout  注意: TextInputLayout的颜色来自style中的colorAccent的颜色,除了显示提示信息,还可以通过调用setError()在EditText下面显示一条错误信息。

    FloatingActonButton   悬浮操作按钮 (SnackBar 类似于toash的使用)

    是一个负责显示界面基本操作的圆形按钮,它实现了一个默认颜色为主题中colorAccent的悬浮操作按钮,它是一个带有阴影的圆形按钮,可以通过fabSize来改变其大小;有以下属性:

    默认颜色为colorAccent的颜色值,可以通过app:backgroundTint 属性或者setBackgroundTintList (ColorStateList tint)方法去改变背景颜色。

    改变尺寸:通过设置 app:fabSize 属性(mini or normal)

    android:src 改变drawable

    app:rippleColor 设置点击时候的颜色(水波纹效果)

    app:borderWidth 设置button的边框宽度,该属性尤为重要,如果不设置0dp,那么在4.1的sdk上FAB会显示为正方形,而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth=”0dp”

    app:elevation 设置平常阴影状态的深度(默认6dp)

    app:pressedTranslationZ 设置点击状态的阴影深度(默认12dp)

    app:layout_anchor - 设置FAB的锚点,即以哪个控件为参照点设置位置

    app:layout_anchorGravity - 设置FAB相对锚点的位置,值有 bottom、center、right、left、top等

    用法,放在屏幕右下角:

    mFabBtn.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                    Snackbar.make(v,"哈哈哈哈哈哈",Snackbar.LENGTH_LONG).setAction("Action", new View.OnClickListener() {

                            @Override

                               public void onClick(View v) {

                                            Toast.makeText(FloatingActonButtonActivity.this,"退出",Toast.LENGTH_SHORT).show();

                                }

                    }).show();

            }

    });

    详细用法参考:http://blog.csdn.net/lmj623565791/article/details/46678867

    TabLayout

    | 属性 | 含义 |

    | -------- | ----- | ---- |

    |app:tabIndicatorColor="#EF4A11"  |    tab文字下方的那条线的颜色 |

    |app:tabMode="scrollable" |  如果tab过多超出屏幕宽度可以水平滚动|

    | app:tabMode="fixed" | 底部tab布局不可滑动 |

    |app:tabSelectedTextColor="#FFFFFF" | tab被选中的时候文字的颜色|

    |app:tabTextColor="#FFFFFF"    |    tab未被选中时文字的颜色|

    |app:tabIndicatorHeight="0dp" | 不显示tab底部的横线 |

    注:

    scrollable可以滑动,向左对齐,如今日头条,网易新闻就是scrollable,但是在Tab选项卡较少时会无法填满TabLayout栏。

    fixed则无法滑动,每个选项卡平均分配空间,适合较少Tab选项卡的情况,当选项卡较多时,会出现每个选项卡内容无法显示完整的情况

    参考链接:https://www.jianshu.com/p/51f3a17df49d

    AppBarLayout:

    AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,默认的AppBarLayout是垂直方向的,它的作用是把AppBarLayout所包裹的内容都作为AppBar, 支持手势滑动操作,可以管理其中的控件在内容滚动时的行为。

    ToolBar

    Toobar主要是用来替换ActionBar的,换句话说,ActionBar能做的,Toolbar都能做。既然是替换,当然用Toolbar的时候就得先去把ActionBar给隐藏掉啦~

    CoordinatorLayout

    CollapsingTollbarLayout

    CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠(其实就是看起来像伸缩~)的App Bar效果。它需要放在AppBarLayout布局里面,并且作为AppBarLayout的直接子View。

    CardView

    AutoScrollView

    相关文章

      网友评论

          本文标题:Material Design 的常用控件,让你的页面更酷炫

          本文链接:https://www.haomeiwen.com/subject/wfngqftx.html