Material Design----全新的界面设计语言(一)

来源:互联网 发布:mac切换输入法设置 编辑:程序博客网 时间:2024/05/21 11:32

谷歌从Android 5.0系统开始,就将所有内置应用都使用Material Design风格来进行设计。本文主要记录学习的ToolBar这个控件。
ToolBar,继承了ActionBar的所有功能,灵活性很高。
首先设置项目的主题不要ActionBar

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>    </style>

接着写activity_main.xml

<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.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/ThemeOverlay.AppCompat.Dark.ActionBar"         app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >       </android.support.v7.widget.Toolbar> </FrameLayout>

注意:加入xmlns:app=http://schemas.android.com/apk/res-auto是由于Material Design是Android5.0系统中才出现的,为了兼容低版本,不使用android:attribute,而使用app:attribute
为了把ToobBar的主题和主题色系分开,设置ToolBar的主题android:theme,为了使得菜单弹出框的主题美观,此处设置app:popupTheme属性
在MainActivity.class中使用:

 Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);

此时看到的效果图为:
这里写图片描述
在res->menu文件夹->New ->Menu resource file创建toolbar.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/backup"          android:title="backup"          android:icon="@mipmap/sel_button"          app:showAsAction="always"          />    <item android:id="@+id/delete"          android:title="delete"          android:icon="@mipmap/trash_button_click"          app:showAsAction="ifRoom"    />    <item android:id="@+id/settings"          android:title="settings"          android:icon="@mipmap/ic_launcher"          app:showAsAction="never"    /></menu>

在MainActivity.class中添加代码如下:

 @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.toolbar,menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()){            case R.id.backup:                Toast.makeText(MainActivity.this,"You clicked backup",Toast.LENGTH_LONG).show();                break;            case R.id.delete:                Toast.makeText(MainActivity.this,"You clicked delete",Toast.LENGTH_LONG).show();                break;            case R.id.settings:                Toast.makeText(MainActivity.this,"You clicked settings",Toast.LENGTH_LONG).show();                break;        }        return true;    }

效果图为:
这里写图片描述