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

        自从谷歌在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 的常用控件,让你的页面更酷炫)