Android 打造风格统一的导航之v7 ToolBar

前言
前面,我们学习了actionbar的各种使用,有么有发现,其实大家不爱用actionBar还是有原因的,用起来是在不方便,还要配置一大堆的styles.xml。在Android 5.0(L),出来之后,鉴于actionbar诟病已久,Google 推出了一款全新的导航实现,它完全就是个控件,使用起来也非常方便,是实现一款用户感觉两道的导航功能的首选。
1.原料 appcompat_v7
这里写图片描述
为了保正ToolBar在2.1-5.0的设备可以正常使用google官方推出了向下兼容的 v7包,一定要最新的哦,否则,你可能会找不到Toolbar这个类
2.开始
在网上开始下载了一个demo来研究,发现导进来,严重报错,直接严重影响成就感,好在还是解决了。
常见错误有如下:
a.ClassNotFoundException 找不见类,android.support.v7.widget.Toolbar;
其实这里,我有个疑问,我们看到其实,5.0的api下,android.widget包下面试有toolBar这个包的,为什么不是用这个东东呢?是不是,5.0的设备上跑直接用android.widget.toolbar?可以来研究下,不过这个不是重点;
b.You need to use a Theme.AppCompat theme (or descendant) with this activity; 但是现在使用v7包,你发现对不对,而却项目还报错,
这里写图片描述
解决办法 使用v7包,要使用AppCompat下的theme;
c.还有错,要使用Toolbar,你必须先把原来的actionbar禁掉
使用如下类型的NoActionBar主题
这里写图片描述
基本上解决了这些问题就可以跑起来了。
3.初认Toolbar;
这里写图片描述
可是看到,toolbar是继承自viewGroup的,这说明他真如Google官方说的,这完全就是一个控件,继承自,Viewgoup,就像Linerlayout/relativelayout,这以为这我们可以像里面添加,我们想要的任何布局样式,打破了actionbar死板僵化的样子;
在布局中使用的时候:

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary" >
    </android.support.v7.widget.Toolbar>

可以看到它具有view所有的优点,任意打造,宽高,背景;
代码中:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        if (toolbar != null) {
            setSupportActionBar(toolbar);
        }
        //设置导航左边图片,如同actionbar的logo
        Drawable drawable = getResources().getDrawable(R.drawable.ic_navigation);
        //设置标题
        toolbar.setTitle("ToolBar Title");
        //设置子标题
        toolbar.setSubtitle("This is subtitle");
        //设置标题字体颜色
    toolbar.setTitleTextColor(Color.parseColor("#ff0000"));
        //设置activtiy  logon
        toolbar.setLogo(R.drawable.ic_launcher);
        //设置导航icon
        toolbar.setNavigationIcon(drawable);

        //添加一个子view
        TextView subView = new TextView(this);
        subView.setText("subTextView");
        //注意LayoutParams 的类型
        Toolbar.LayoutParams params = new Toolbar.LayoutParams(         Toolbar.LayoutParams.WRAP_CONTENT,      Toolbar.LayoutParams.WRAP_CONTENT,
                Gravity.CENTER);
        params.setMargins(3, 3, 3, 4);      subView.setLayoutParams(params);
        toolbar.addView(subView);               

这样我们就可以看到,简单的toolbar,像下面这样啦;

这里写图片描述

4.ToolBar添加用户交互接口

5.制作一款nice的导航

6.Toolbar其他探究

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值