zoukankan      html  css  js  c++  java

  • Android5.x新特性之 Toolbar和Theme的使用

    Toolbar

    你还在为Android 的ActionBar的文字不能随意设置位置而烦恼么？你还在为ActionBar不能自定义添加自己的布局而烦恼么？现在告诉你一个好消息，当你看到这篇文章时，就不必烦恼了。Google在Android5.0以后推出了一个Toolbar来完全代替之前的Actionbar，Toolbar的出现解决了Actionbar的各种限制，Toolbar可以完全自定义和配置。我们从以下几个点了解Toolbar的使用

    1. Toolbar的基础使用
    2. Toolbar配置主题Theme
    3. Toolbar中常用的控件设置
    4. Toolbar的自定义

    Toolbar的基础使用

    我们从以下几点来一步一步的学习Toolbar的使用

    1. Style（风格）
    2. Layout（布局）
    3. Activity（代码）

    Style

    为了能在你的Activity中使用Toolbar，你必须在工程里修改styles.xml文件里的主题风格，系统默认如下

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  

    这种Theme表示使用系统之前的ActionBar，那么我们想要使用Toolbar怎么办呢？

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  

    这个主题表示不使用系统的Actionbar了，这是第一步。

    Layout布局

    为了使用Toolbar，我们第二步是在你的activity_main.xml布局里添加Support v7提供的Toolbar，代码如下

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"  
    5.     tools:context=".MainActivity">  
    6.   
    7.     <android.support.v7.widget.Toolbar  
    8.         android:id="@+id/toolbar"  
    9.         android:layout_width="match_parent"  
    10.         android:layout_height="?attr/actionBarSize"  
    11.         android:minHeight="?attr/actionBarSize"  
    12.         >  
    13.     </android.support.v7.widget.Toolbar>  
    14.   
    15. </RelativeLayout>  

    为了在你的UI中使用Toolbar，你得为每个activity布局添加Toolbar,并且给Toolbar设置一个id android:id=”@+id/toolbar”。这是第二部。

    代码添加Toolbar

    为了使用Toolbar，我们第三部是在你的Activity代码中做如下代码处理：

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. Toolbar toolbar;  
    2.     @Override  
    3.     protected void onCreate(Bundle savedInstanceState) {  
    4.         super.onCreate(savedInstanceState);  
    5.         setContentView(R.layout.activity_main);  
    6.   
    7.         toolbar = findView(R.id.toolbar);  
    8.         setSupportActionBar(toolbar);  
    9.     }  

    代码中通过findView找到Toolbar，然后通过setSupportActionBar(toolbar);将Toolbar设置为Activity的导航栏。

    通过上面的三个步骤，你就已经使用了Support v7提供的Toolbar了。看看那效果图。

    这里写图片描述 
    是不是感觉很丑？没有一点MD设计的风格，不过别失望，这仅仅是为了让Toolbar正常工作而已，为了让Toolbar有Material Design风格，我们必须去设置Toolbar的主题风格。

    Toolbar配置主题Theme

    我们重新配置系统主题Theme，修改styles.xml代码如下：

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  
    2.         <!-- Customize your theme here. -->  
    3.         <!--导航栏底色-->  
    4.         <item name="colorPrimary">@color/accent_material_dark</item>  
    5.         <!--状态栏底色-->  
    6.         <item name="colorPrimaryDark">@color/accent_material_light</item>  
    7.         <!--导航栏上的标题颜色-->  
    8.         <item name="android:textColorPrimary">@android:color/black</item>  
    9.         <!--Activity窗口的颜色-->  
    10.         <item name="android:windowBackground">@color/material_blue_grey_800</item>  
    11.         <!--按钮选中或者点击获得焦点后的颜色-->  
    12.         <item name="colorAccent">#00ff00</item>  
    13.         <!--和 colorAccent相反，正常状态下按钮的颜色-->  
    14.         <item name="colorControlNormal">#ff0000</item>  
    15.         <!--Button按钮正常状态颜色-->  
    16.         <item name="colorButtonNormal">@color/accent_material_light</item>  
    17.         <!--EditText 输入框中字体的颜色-->  
    18.         <item name="editTextColor">@android:color/white</item>  
    19.     </style>  

    各个属性就不解释了，注释都很清楚。我们来看看Toolbar怎么使用这些主题吧？

    配置activity_main.xml中的Toolbar改成为如下：

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <android.support.v7.widget.Toolbar  
    2.         android:id="@+id/toolbar"  
    3.         android:layout_width="match_parent"  
    4.         android:layout_height="?attr/actionBarSize"  
    5.         android:background="?attr/colorPrimary"  
    6.         >  
    7.     </android.support.v7.widget.Toolbar>  

    相比上面的Toolbar配置，这里只多添加了 这么一行代码

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. android:background="?attr/colorPrimary"  

    给Toolbar设置背景属性，这里使用了styles.xml文件中如下属性

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <!--导航栏底色-->  
    2.  <item name="colorPrimary">@color/accent_material_dark</item>  

    经过如下配置再来看看效果图吧！

    这里写图片描述

    效果有点改进，我们继续发现Toolbar的优势吧！

    Toolbar中常用的控件设置

    那么Toolbar是否都有Actionbar的所有功能呢？毋庸置疑，来看代码：

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. toolbar = findView(R.id.toolbar);  
    2.         setSupportActionBar(toolbar);  
    3.         getSupportActionBar().setDisplayShowTitleEnabled(false);  
    4.         toolbar.setTitle("主标题");  
    5.         toolbar.setSubtitle("副标题");  
    6.         toolbar.setLogo(R.drawable.ic_launcher);  
    7.         toolbar.setNavigationIcon(android.R.drawable.ic_input_delete);  

    Toolbar可以设置 Title（主标题），Subtitle（副标题），Logo（logo图标）NavigationIcon（导航按钮）。

    注意 如果你想要通过toolbar.setTitle(“主标题”);设置Toolbar的标题，你必须在调用它之前调用如下代码：

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. getSupportActionBar().setDisplayShowTitleEnabled(false);  

    上面代码用来隐藏系统默认的Title。

    那么Toolbar能不能使用Menu菜单功能呢？答案是肯定的了。来看看加载如下menu菜单的Toolbar吧

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <menu xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
    3.     xmlns:tools="http://schemas.android.com/tools"  
    4.     tools:context=".MainActivity">  
    5.     <item  
    6.         android:id="@+id/action_edit"  
    7.         android:icon="@drawable/abc_ic_search_api_mtrl_alpha"  
    8.         android:orderInCategory="80"  
    9.         android:title="查找"  
    10.         app:showAsAction="always" />  
    11.   
    12.     <item  
    13.         android:id="@+id/action_share"  
    14.         android:icon="@drawable/abc_ic_menu_share_mtrl_alpha"  
    15.         android:orderInCategory="90"  
    16.         android:title="分享"  
    17.         app:showAsAction="always" />  
    18.   
    19.     <item  
    20.         android:id="@+id/action_settings"  
    21.         android:orderInCategory="100"  
    22.         android:title="@string/action_settings"  
    23.         app:showAsAction="never" />  
    24. </menu>  

    怎么给menu的各个Item添加点击事件呢？Toolbar给我们提供如下方法

    Activity继承Toolbar的OnMenuItemClickListener接口

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. public class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener  
    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. //实现接口  
    2. toolbar.setOnMenuItemClickListener(this);  
    3. @Override  
    4.     public boolean onMenuItemClick(MenuItem item) {  
    5.   
    6.         switch (item.getItemId()) {  
    7.             case R.id.action_edit:  
    8.                 Toast.makeText(this, "查找按钮", Toast.LENGTH_SHORT).show();  
    9.                 break;  
    10.             case R.id.action_share:  
    11.                 Toast.makeText(this, "分享按钮", Toast.LENGTH_SHORT).show();  
    12.                 break;  
    13.         }  
    14.   
    15.         return false;  
    16.     }  

    至此，Toolbar添加控件就基本完结了，来看看效果如下

    这里写图片描述

    是不是很炫？我们还没有使用自定义的Toolbar呢？那怎么使用呢？

    Toolbar的自定义

    其实Toolbar是继承ViewGroup的一个容器控件，言外之意就是我们可以在Toolbar添加自己的布局了。看代码

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <android.support.v7.widget.Toolbar  
    2.         android:id="@+id/toolbar"  
    3.         android:layout_width="match_parent"  
    4.         android:layout_height="?attr/actionBarSize"  
    5.         android:background="?attr/colorPrimary">  
    6.   
    7.         <RelativeLayout  
    8.             android:layout_width="match_parent"  
    9.             android:layout_height="wrap_content"  
    10.             android:gravity="center">  
    11.   
    12.             <Button  
    13.                 android:layout_width="wrap_content"  
    14.                 android:layout_height="wrap_content"  
    15.                 android:text="add" />  
    16.   
    17.             <TextView  
    18.                 android:layout_width="wrap_content"  
    19.                 android:layout_height="wrap_content"  
    20.                 android:layout_centerInParent="true"  
    21.                 android:layout_gravity="center_vertical"  
    22.                 android:text="标题"  
    23.                 android:textSize="18sp" />  
    24.   
    25.             <ImageView  
    26.                 android:layout_width="wrap_content"  
    27.                 android:layout_height="wrap_content"  
    28.                 android:layout_alignParentRight="true"  
    29.                 android:background="@drawable/abc_ic_menu_share_mtrl_alpha" />  
    30.   
    31.         </RelativeLayout>  
    32.     </android.support.v7.widget.Toolbar>  

    效果图： 
    这里写图片描述

    这样我们就可以任意给Toolbar布局了。也解决了标题不能居中的问题。有特殊需求的Toolbar的童鞋就可以自行补脑实现各种需求效果啦！

    Android5.x Material Design 主题风格Theme配置

    在通往Material Design风格的路上总是遥远的，但也阻挡不了我们学习的劲头，仅仅会使用Toolbar是不够的。除了Toolbar的风格，我们还可以通过设置Theme主题该控制Android很多控件的风格。直接上一张图片效果。

    这里写图片描述

    以上效果的主题配置如下：

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  
    2.         <!-- Customize your theme here. -->  
    3.         <!--导航栏底色-->  
    4.         <item name="colorPrimary">@color/accent_material_dark</item>  
    5.         <!--状态栏底色-->  
    6.         <item name="colorPrimaryDark">@color/accent_material_light</item>  
    7.         <!--导航栏上的标题颜色-->  
    8.         <item name="android:textColorPrimary">@android:color/black</item>  
    9.         <!--Activity窗口的颜色-->  
    10.         <item name="android:windowBackground">@color/material_blue_grey_800</item>  
    11.         <!--按钮选中或者点击获得焦点后的颜色-->  
    12.         <item name="colorAccent">#00ff00</item>  
    13.         <!--和 colorAccent相反，正常状态下按钮的颜色-->  
    14.         <item name="colorControlNormal">#ff0000</item>  
    15.         <!--Button按钮正常状态颜色-->  
    16.         <item name="colorButtonNormal">@color/accent_material_light</item>  
    17.         <!--EditText 输入框中字体的颜色-->  
    18.         <item name="editTextColor">@android:color/white</item>  
    19.     </style>  

    1.colorPrimary: Toolbar导航栏的底色。 
    2.colorPrimaryDark：状态栏的底色，注意这里只支持Android5.0以上的手机。 
    3.textColorPrimary：整个当前Activity的字体的默认颜色。 
    4.android:windowBackground：当前Activity的窗体颜色。 
    5.colorAccent：CheckBox，RadioButton，SwitchCompat等控件的点击选中颜色 
    6.colorControlNormal：CheckBox，RadioButton，SwitchCompat等默认状态的颜色。 
    7.colorButtonNormal：默认状态下Button按钮的颜色。 
    8.editTextColor：默认EditView输入框字体的颜色。
  • 相关阅读:
    centos已经安装了python2，同时安装python3
    linux下判断磁盘是ssd还是hdd
    Java中如何判断两个对象是否相等
    NPOI导出Excel和基于office导出Excel比较
    asp
    又找到了一个blog
    关于宋朝及中国历史的一点想法
    Android中实现EditText圆角
    Python小练习
    软件架构设计（三） 架构、架构师和架构设计
  • 原文地址：https://www.cnblogs.com/chenliyang/p/6558839.html
Copyright © 2011-2022 走看看