Android MeterialDesignUI控件 - ToolBar的使用

在Android5.0最引人注意的就是MaterialDesign设计风格了
,之前一直在用常用布局写一下体验不太好的自定义控件,自从发现了ToolBar使用的如痴如醉

Android MeterialDesignUI控件 - ToolBar的使用_第1张图片

上图是我门使用idea创建的时候为我们默认生成的样式

1.将默认的Actionbar替换为我们要使用的ToolBar
如果我们要在这个基础上添加自己的修改和添加新的功能是不太容易做到的(主要是复用的问题),

这里将我们的系统默认的DarkActionBar替换为NoActionBar,这个意思就是去除他的咱们自己添加,这里如果不将原来的去掉,ToolBar跟ActionBar一起使用就会崩溃,并且告诉我们不能使用两个actionBar之类的异常。


    

我们在布局的xml文件中加入View

 

使用代码将ActionBar代替

		Toolbar toolbar = findViewById(R.id.toolbar);
        
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle("");
        toolbar.setTitle("ToolBar");

这样就将它的替换为咱们的了。

2.实现Title居中的效果

当我们设置tilte高高兴兴的打开,哎?这个位置不大对呀,怎样去实现Ui图里边的那样?
我发现市场上大部分的app的title是在中间的,如果要将title设置到中间,这里面的方法是不支持的,我们可以在H5的标签中加入一个居中的TextView,效果就不上图了,因为使用真机比较难搞,这个只是实现了效果,大家可以进行微调,我的比较丑

 
        
    
   

3.实现返回键

电脑没电了,用我久电脑没有模拟器,感觉没有图片有点不方便,毕竟是一图胜千言,我就去盗了一些图片
Android MeterialDesignUI控件 - ToolBar的使用_第2张图片
咱们在开发的时候肯定会基于MainActivity跳转多个页面,返回键是必不可少的。

我们需要在ToolBar View中添加一个 app:navigationIcon="@drawable/ic_back",设置上我们需要显示的icon,在代码中监听我们的事件,这样返回的ok了。

 toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "销毁当前页面", Toast.LENGTH_SHORT).show();
            }
        });

给ToolBar添加点击菜单`

如果要在本页面加入menu的话,setSupportActionBar(toolbar);我们在这里需要进行类似于注册的一个过程,在res下创建一个menu包

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return super.onCreateOptionsMenu(menu);
    }

然后在menu创建后在menu标签创建item





在这里面我平时开发用到的有一下几个属性:

android:id 我们根据这个在代码中调用id处理一下操作

android:icon 设置图片

app:showAsAction="ifRoom"设置menu的位置,在ToolBar上显示,还是显示在菜单里面

app:actionLayout 这里我们可以通过这个属性自定义扩展当前的Item

app:actionViewClass 设置系统里面的方法比如我现在使用的android.widget.SearchView
在这里插入图片描述
这里可以看到给我们写好的一个搜索框,不过定制型比较差,可以根据自己需求。

当我们设置上menu菜单,运行起来就会发现咱们上边设置菜单,点击出来的icon不见了,这个是一个坑,明明设置了,但是就是不显示,据我目前了解,这个menu菜单中的icon默认是不显示的,如果要改这个默认的设置我们需要通过反射修改系统里面的东西。


    /**
     * 利用反射机制调用MenuBuilder的setOptionalIconsVisible方法设置mOptionalIconsVisible为true,
     * 给菜单设置图标时才可见 让菜单同时显示图标和文字
     */
    @Override
    public boolean onMenuOpened(int featureId, Menu menu) {
        if (menu != null) {
            if (menu.getClass().getSimpleName().equalsIgnoreCase("MenuBuilder")) {
                try {
                    Method method = menu.getClass()
                            .getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    method.setAccessible(true);
                    method.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return super.onMenuOpened(featureId, menu);
    }

设置完后就是这样:
Android MeterialDesignUI控件 - ToolBar的使用_第3张图片

嗯,做完这个我让ui看了下,他说动画还可以,但是item中间不能没有分割线,我就捣鼓了半天没有看到分割线属性

 
    
    
    

这个属性就可以满足我正常的需求。

menu的点击事件
因为我们创建菜单在Activity创建属性基本一样:

 @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        int itemId = item.getItemId();
        if (itemId == R.id.item_01) {
        } else if (itemId == R.id.item_02) {
        }
        return super.onOptionsItemSelected(item);
    }

目前这是我对ToolBar,menu的基本了解和使用,有新学到的就再次补充,如果大家有更好的使用方式,可以在评论里一起探讨。?

你可能感兴趣的:(Ui控件)