自定义ToolBar之一

其实已经有很多大神写过这方面的文章了，不过我比较蠢吧，老有一些地方看不懂的，翻了很多关于Toolbar方面的文章和视频，这儿总结一下。
  参考资料：youtube:slidenerd

阶段一 自定义配色可以修改配色地方-API>=21

Toolbar可以自定义的地方包括：

• 状态栏颜色(Status Bar/colorPrimaryDark)(只在api21及以上有效)
• 标题栏背景颜色(ToolBar/colorPrimary)
• 弹出菜单背景颜色(OptionMenu)
• 内容区域背景颜色(Background)
• 导航栏颜色(NavigationBar)(只在api21及以上有效)
• 标题文字颜色 (TitleBarTextColor/TextColorPrimary)
• 弹出菜单文字颜色(TextColor)
• 内容文字颜色(TextColor)
• 控件颜色(ColorAccent)

文／pheynix（简书作者）
原文链接：http://www.jianshu.com/p/91eabe0c326d
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。API<21暂时无法修改status bar和navigation bar的配色

 

新建一个项目，在res/values/下新建colors.xml，并添加要用到的颜色，具体颜色自己选择，建议参考google给出的规范(自备翻墙)；

 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="primaryColor">#ffeb3b</color>
     <color name="primaryColorDark">#fbc02d</color>
     <color name="accentColor">#50514f</color>
     <color name="textColorPrimary">#33b5e5</color>
     <color name="textColorSecondary">#aa66cc</color>
 </resources>

在res/layout下新建toolBar.xml作为toolBar布局文件;

  <?xml version="1.0" encoding="utf-8"?>
  <android.support.v7.widget.Toolbar
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@color/primaryColor"
 </android.support.v7.widget.Toolbar>

• 行1中必须要使用android.support.v7.widget.Toolbar
• 行7设置了内容区域背景颜色

在MainActivity.java中加入以下代码引入toolBar，
－－－必须import android.support.v7.widget.Toolbar －－－：

文／pheynix（简书作者）
原文链接：http://www.jianshu.com/p/91eabe0c326d
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

 package com.pheynix.material;

 import android.os.Bundle;
 import android.support.v7.app.ActionBarActivity;
 import android.support.v7.widget.Toolbar;
 import android.view.Menu;
 import android.view.MenuItem;

 public class MainActivity extends ActionBarActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_main);

    //----------------------以下为添加的代码----------------------
     Toolbar toolbar = (Toolbar) findViewById(R.id.app_bar);
     setSupportActionBar(toolbar);
    //----------------------以上为添加的代码----------------------
 }

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

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
     int id = item.getItemId();

     if (id == R.id.action_settings) {
         return true;
     }

     return super.onOptionsItemSelected(item);
 }

然后我们自定义API<21使用的styles，修改values/styles.xml如下,

 <resources>
    <style name="AppTheme" parent="MyAppTheme">
    </style>

    <style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryColorDark</item>
        <item name="colorAccent">@color/accentColor</item>
    </style>
 </resources>

－－－567行name="colorPrimary"而不是name="android:colorPrimary"，谁错谁怀孕－－－

• 行2的style标签是AndroidManifest使用的主题(android:theme)，继承自我们自定义的style即可实现对app主题的修改
• 行4的style是我们自定义的style，parent可以定义为：
  • parent="Theme.AppCompat.Light"-->白色基调的主题(是这么说的么)
  • parent="Theme.AppCompat"-->黑色基调的主题
  • parent="Theme.AppCompat.Light.NoActionBar"-->白色基调的主题,并且去掉默认的ActionBar
  • parent="Theme.AppCompat.NoActionBar"-->黑色基调的主题，并且去掉默认的ActionBar
• 行5定义了标题栏的颜色，但是并无效果(嗯，并没有什么卵用),标题栏颜色需要在toolBar的布局文件toolBar.xml中定义android:background="@color/colorPrimary"
• 行6用来定义状态栏(statusBar)的颜色
• 行7用来定义控件的颜色

如果需要在API>=21的设备上运行，需要在res文件夹下新建values-21，并新建styles.xml，内容如下：

 <resources>
    <style name="AppTheme" parent="MyAppTheme">
        <item name="android:colorPrimary">@color/primaryColor</item>
        <item name="android:colorPrimaryDark">@color/primaryColorDark</item>
        <item name="android:colorAccent">@color/accentColor</item>
        <item name="android:navigationBarColor">@color/primaryColor</item>
    </style>
 </resources>

• 行2选择继承我们自定义的MyAppTheme，当然继承values/styles.xml中的行4介绍的parent也是可以的(没有介绍到的也是行的～)；
• 行3中定义的标题栏背景色同样不起作用，需要在toolBar的布局文件toolBar.xml中定义android:background="@color/colorPrimary"
• 行5定义导航栏的颜色，导航栏颜色只能在API>=21时生效

标题栏文字颜色和弹出菜单按钮的颜色也是可以自定义的；
如果只是希望设置颜色为黑或者白，只需要在toolBar.xml中改变样式，请看代码：

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primaryColor"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
        app:theme="@style/MyCustomToolBarStyle">
    </android.support.v7.widget.Toolbar>

• 行8设置了弹出菜单样式，值可以选择系统提供的：
  • @style/ThemeOverlay.Appcompat.Dark-->黑底白字
  • @style/ThemeOverlay.Appcompat.Light-->白底黑字
• 行9设置了标题栏样式，值可以选择系统提供的：
  • @style/ThemeOverlay.Appcompat.Dark-->黑底白字
  • @style/ThemeOverlay.Appcompat.Light-->白底黑字
    不过由于前面在toolBar.xml中设置了background的属性，标题栏的底色是不是因为这里的设置而变化；

如果想设置更丰富的字体颜色，可以在values/styles.xml中添加自定义样式，然后在toolBar.xml中修改app:popupTheme和app:theme的值

在styles.xml中添加一个<style>标签：

 <style name="MyCustomToolBarStyle" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:textColorPrimary">@color/textColorPrimary</item>
    <item name="android:textColorSecondary">@color/textColorSecondary</item>
    <item name=""android:textColor">@color/textColorSecondary</item>
 </style>

• 行2用来定义标题栏文字颜色
• 行3用来定义弹出菜单icon的颜色(竖着排列的那三个点)

• 行4用来定义弹出菜单OptionMenu文字的颜色
  修改toolBar.xml

  app:popupTheme="@style/MyCustomToolBarStyle"
  app:theme="@style/MyCustomToolBarStyle"

阶段一 自定义配色就这么多啦，我去睡觉了～
什么？！你说内容文字的颜色怎么设置？呐...

 <TextView
     android:textColor="#ffac00"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:text="@string/hello_world" />

文／pheynix（简书作者）
原文链接：http://www.jianshu.com/p/91eabe0c326d
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。