Android Material Design ToolBar 使用

Google 在Android3.0 引入的actionbar 因为在很大程度上无法统一Android应用导航栏的样式 只能固定于顶端,无法个性化的实现自定义 给程序员的开发造成了很大的不便 于是到了Android5.x的时候Google 便从新定义了Android界面的设计样式和规范ToolBar 便替代了ActionBar .
ToolBar 的优点 可以配合其他控件完成Materail desing 设计效果 并且能够更好自由的置定导航栏布局

• 第一步去除actionbar
  引用库
  compile 'com.android.support:design:25.3.1'

首先打开AndroidManifest.xml,看到AppTheme 点击进去

 <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:supportsRtl="true"        android:theme="@style/AppTheme">  </application> 

在res.values.styles.xml 文件里 把parent=”Theme.AppCompat.Light.DarkActionBar” 更改为 parent=”Theme.AppCompat.Light.NoActionBar”,以下已更改完,想要改成深色主题parent=”Theme.AppCompat.NoActionBar”

resources> <!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="colorAccent">@color/colorAccent</item></style><style name="AppTheme.NoActionBar"><item name="windowActionBar">false</item><item name="windowNoTitle">true</item></style><style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /><style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /></resources>

• 第二步写布局文件

<?xml version="1.0" encoding="utf-8"?><FrameLayout 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="match_parent"    android:orientation="vertical">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"        android:theme="@style/AppTheme.AppBarOverlay"        app:popupTheme="@style/AppTheme.PopupOverlay" /></FrameLayout>

这里的app:popupTheme=”@style/AppTheme.PopupOverlay” 跳进去 <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />这个属性能够将弹出的菜单变成淡色主题
android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar” 可加可不加根据自己的需求 这个主要作用文字和图标变成白色或黑色

• 第三步java代码

public class MainActivity extends AppCompatActivity{    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.toobar);        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);        setSupportActionBar(toolbar);    }   @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.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);    }

• 运行结果
  

光秃秃的一片看着别扭添点东西
在res目录下创建menu.xml 放点数据

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/action_settings"        android:orderInCategory="100"        android:title="@string/action_settings"        app:showAsAction="never" />    <item        android:id="@+id/nav_camera"        android:icon="@drawable/ic_menu_camera"        app:showAsAction="ifRoom"        android:title="Import" />    <item        android:id="@+id/nav_gallery"        app:showAsAction="always"        android:icon="@drawable/ic_menu_gallery"        android:title="Gallery" />    <item        app:showAsAction="always"        android:id="@+id/nav_share"        android:icon="@drawable/ic_menu_share"        android:title="Share" />    <item        app:showAsAction="always"        android:id="@+id/nav_send"        android:icon="@drawable/ic_menu_send"        android:title="Send" /></menu>

• app:showAsAction=”never” 表示在菜单中显示
• app:showAsAction=”always”在导航bar中显示
• app:showAsAction=”ifRoom”如果导航栏bar已被占满则在菜单中显示

运行结果:

---