MaterialDesign 之 ToolBar学习

关于Eclipse的下载，请参见网盘

http://pan.baidu.com/s/1mgNvbHA#path=%252FAndroid%252F%25E6%259C%2580%25E6%2596%25B0EclipseADT

新建一个项目

修改values/styles.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#4886f3</item>
        <item name="colorPrimaryDark">#4179da</item>
        <item name="colorAccent">#4179da</item>
        <!-- 标题颜色 -->
        <item name="android:textColorPrimary">@android:color/white</item>
        <!-- 溢出菜单图标颜色 -->
        <item name="colorControlNormal">@android:color/white</item>
        <!-- 箭头 -->
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
        <!-- 溢出菜单文字颜色 -->
        <item name="textAppearanceLargePopupMenu">@style/OverflowMenuTextAppearance</item>
        <!-- 菜单项点击selector -->
        <item name="actionBarItemBackground">@drawable/abc_item_background_holo_dark</item>
       
    </style>

    <!-- 左边的箭头指示 -->
    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>

    <!-- 溢出菜单文字样式 -->
    <style name="OverflowMenuTextAppearance" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
        <item name="android:textColor">@android:color/black</item>
    </style>

</resources>

新建values-21/styles.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#4886f3</item>
        <item name="colorPrimaryDark">#4179da</item>
        <item name="colorAccent">#4179da</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    </style>
    
</resources>

新建layout/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:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >

</android.support.v7.widget.Toolbar>

使用toolbar.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <include layout="@layout/toolbar" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</LinearLayout>

修改MainActivity的继承和onCreate方法，删除 onCreateOptionsMenu方法 ：

public class MainActivity extends AppCompatActivity implements OnClickListener {

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

      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      toolbar.setTitle("MeterialDesign");
      setSupportActionBar(toolbar);
      //显示左边的箭头
      getSupportActionBar().setDisplayHomeAsUpEnabled(true);
      // 左边的箭头加监听
      toolbar.setNavigationOnClickListener(this);

   }

   @Override
   public void onClick(View v) {
      Toast.makeText(this, "Click me！", Toast.LENGTH_SHORT).show();
   }

运行出的效果就是：

接下来是如何在ToolBar上面设置Menu，以及Menu的监听

新增menu/menu_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" >

    <item
        android:id="@+id/menu_search"
        android:icon="@drawable/abc_ic_search_api_mtrl_alpha"
        android:title="搜索"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom|collapseActionView">
    </item>
    <item
        android:icon="@drawable/abs__ic_menu_moreoverflow_holo_light"
        android:title="更多"
        app:showAsAction="always">
        <menu>
            <item
                android:id="@+id/action_settings"
                android:icon="@android:drawable/ic_delete"
                android:orderInCategory="100"
                android:title="@string/action_settings"
                app:showAsAction="never"/>
        </menu>
    </item>

</menu>

你需要的资源：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
   //通常只需要只一句代码
   getMenuInflater().inflate(R.menu.menu_main, menu);
   
   // 这段代码只是为了点击搜索菜单出现输入框用的。
   SearchView searchView = (SearchView) MenuItemCompat.getActionView(menu
         .findItem(R.id.menu_search));
   searchView.setQueryHint("请输入搜索关键字");
   // searchView.setSuggestionsAdapter(); // 提示匹配
   // searchView.setOnQueryTextListener(mOnQueryTextListener);
   return true;
}

ToolBar 设置Menu的监听

    // 左边的箭头加监听
   toolbar.setNavigationOnClickListener(this);
   toolbar.setOnMenuItemClickListener(this);
}

实现onMenuItemClick方法

@Override
public void onClick(View v) {
   Toast.makeText(this, "Click me！", Toast.LENGTH_SHORT).show();
}

实现效果如下：

好了，本次ToolBar的学习到此结束。下面附赠源码：

  下载地址