博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Material Design 控件 (一)
阅读量:5015 次
发布时间:2019-06-12

本文共 4929 字,大约阅读时间需要 16 分钟。

Toolbar

ActionBar 由于设计的原因,被限定只能位于活动的顶部,从而不能实现一些Material Design的效果,因此官方已经不再建议使用ActionBar了。

使用Toolbar来代替ActionBar,Toolbar不仅继承了ActionBar的所有功能,而且灵活性更高,可以配合其他控件来完成Material Design的效果。

首先在创建工程的时候,我们的主题通常是 android:theme="@style/AppTheme"这个,而这个的主题是带ActionBar的,

所以在使用Toolbar代替时,应该将主题设成: android:theme="@style/AppTheme.NoActionBar",只要是NoActionBar的主题就可以。

如果这里没有设置,在用Toolbar代替时会报以下的错:

java.lang.RuntimeException: Unable to start activity ComponentInfo {com.android50materialdesign/com.android50materialdesign.ToorBarActivity}: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false     in your theme to use a Toolbar instead.

新建一个Activity,那么布局中就可以直接使用Toolbar

在这里我们可以引入xmlns:app="http://schemas.android.com/apk/res-auto"

,这这个xmlns:app命名空间上我们可以使用一些新属性。为什么不直接使用xmlns:android这个命名空间呢?因为Material Design是在Android 5.0 中才出现的,使用为了兼容老版本,我们更应该使用app命名空间下的属性。

在Activity中使用Toolbar。

@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_toor_bar);    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);    //把Toolbar设置成ActionBar    setSupportActionBar(toolbar);}

运行就如下图所示:

c3d5599475ec0887.png

如普通的ActionBar是一样的。

如果要更改上面的title。可以在AndroidManifest.xml文件在修改.

那么标题就改成了Change。

同样我们可以在Toolbar上添加按钮。

右击res目录 New->Directory,创建memu文件夹。然后点击menu文件夹 New->Menu resource file 创建toolbar.xml文件,并编写代码.

在代码中有这个 app:showAsAction="" . 这个用于指定按钮显示的位置的。使用app命名也是为了兼容旧版本。

showAsAction有以下属性(通常使用的为以下三个)

  • always :表示永远显示在Toolbar上,如果屏幕空间不够则不显示。
  • ifRoom :表示屏幕空间足够的情况下显示在Toolbar上,如果不够就显示在菜单上
  • never :永远显示在菜单上

设置了菜单后就要让Toolbar应用上。

在Activity上编写

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {    getMenuInflater().inflate(R.menu.toolbar,menu);    return  true;}

同时我们也可以为这些按钮加上点击事件:

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {    switch (item.getItemId()){        case R.id.first:            Toast.makeText(ToorBarActivity.this,"first",Toast.LENGTH_SHORT).show();            break;        case R.id.second:            Toast.makeText(ToorBarActivity.this,"second",Toast.LENGTH_SHORT).show();            break;        case R.id.third:            Toast.makeText(ToorBarActivity.this,"third",Toast.LENGTH_SHORT).show();            break;    }    return true ;}

效果如下(上面已经修改了标题为Change)

7541106d2d4b607d.png

DrawerLayout

我们常见的菜单。

DrawerLayout是一个布局,在布局中允许放入两个直接子控件,第一个控件是主屏幕中显示的内容,第二个是滑动菜单中显示的内容。

注意的是:第二个子控件 android:layout_gravity="" 这个属性必须指定。

这个实现是告诉DraweLayout滑动菜单是在屏幕的左边还是右边。

  • left :屏幕的左边
  • right :屏幕的右边
  • start :根据系统的语言来选择,如果系统的语言是从左往右的,就在左边滑出。反之...

d67864c5a2550317.png

可以用代码控制菜单的打开与关闭

private DrawerLayout dl;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_dawer_layout);    dl = (DrawerLayout) findViewById(R.id.activity_dawer_layout);    Button btnOpen = (Button) findViewById(R.id.btn_open);    TextView tv = (TextView) findViewById(R.id.tv);    btnOpen.setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {            //打开菜单            dl.openDrawer(GravityCompat.START);        }    });    tv.setOnClickListener(new View.OnClickListener() {          @Override          public void onClick(View v) {                //关闭菜单              dl.closeDrawers();          }      }    );}

NavigationView是Design Support 库中提供的一个控件。他严格按照了Material Design 的要求来进行设计。

  1. 要使用它首先要添加依赖:

    compile 'com.android.support:design:23.4.0'

  2. 右击res目录 New->Directory,创建memu文件夹。然后点击menu文件夹 New->Menu resource file 创建menu.xml文件,并编写代码.

  3. 编写headlayout:

  4. 把NavigationView设置成菜单

同样放置在drawerlayout中。 app:menu="@menu/menu"、app:headerLayout="@layout/headlayout"引入了刚刚的所写的菜单和布局。

可以用以下代码对NavigationView中的item进行操作:

NavigationView  nv = (NavigationView) findViewById(R.id.nv);    nv.setNavigationItemSelectedListener(new     NavigationView.OnNavigationItemSelectedListener() {         @Override         public boolean onNavigationItemSelected(MenuItem item) {             switch (item.getItemId()){                 case R.id.first:                     //处理点击事件                    ..........                     break;                ...........             }             return true;         }     });

效果如下:

e10a5e0831b9dd89.png

FloatingActionButton

这个控件可以是我们轻松的实现悬浮按钮的效果。

app:elevation="4dp":高度值,高度值越大,投影范围越大,但是投影效果越淡;高度值越小,投影范围越小,但是投影效果越浓。

添加点击事件(与普通的按钮是一样的):

FloatingActionButton  btn  = (FloatingActionButton) findViewById(R.id.btn);    btn.setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {            Toast.makeText(FloatingActionButtonActivity.this,"点击",Toast.LENGTH_SHORT).show();        }    });

e073275092b75e80.png

转载于:https://www.cnblogs.com/ZWRpoi/p/6281711.html

你可能感兴趣的文章
人生苦短,我用python-- Day11
查看>>
JAVA Bean
查看>>
ehcache memcache redis 三大缓存男高音_转
查看>>
curd_3
查看>>
百度地图API示例之设置地图显示范围
查看>>
Java构造方法、重载及垃圾回收
查看>>
.Net Core AES加密解密
查看>>
Spring Quartz实现任务调度
查看>>
python | 桶排序、冒泡排序、选择排序、去重
查看>>
两个Html页面之间值得传递
查看>>
EasyUI datagrid 的多条件查询
查看>>
Mac升级bash到最新版本
查看>>
利用vagrant打包系统--制作自己的box
查看>>
美女与硬币问题
查看>>
计算几何算法概览 (转)
查看>>
Notepad++的ftp远程编辑功能
查看>>
数据库多对多关联表(Python&MySQL)
查看>>
[实变函数]1.2 集合的运算
查看>>
第06天
查看>>
设计模式的征途—5.原型(Prototype)模式
查看>>