手把手教你打造一個Material Design風格的App(二)

標籤：android   material design   

——接上文。

3.1添加ToolBar(ActionBar)

添加ToolBar非常簡單，你需要做的僅僅是為toolbar建立一個單獨的layout布局，如果你想在哪裡展示toolbar，只要在對應布局裡將toolbar的布局檔案include進來即可。

（8）在res-->layout檔案夾下建立一個名為toolbar.xml的檔案，然後在裡面添加一個android.support.v7.widget.Toolbar元素，這樣就建立了一個具有特定高度和主題的toolbar。

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:local="http://schemas.android.com/apk/res-auto"

    android:id="@+id/toolbar"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:minHeight="?attr/actionBarSize"

    android:background="?attr/colorPrimary"

    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

（9）開啟你的主Activity的布局檔案（activtiy_main.xml）並使用<include/>標籤添加toolbar。

activity_main.xml

<RelativeLayout 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"

    tools:context=".MainActivity">

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:orientation="vertical">

 

        <include

            android:id="@+id/toolbar"

            layout="@layout/toolbar" />

    </LinearLayout>

 

 

</RelativeLayout>

運行App並觀察toolbar是否顯示在了螢幕上。

現在讓我們為toolbar添加一個標題以及一些活動項。

（10）下載搜尋icon並將它匯入Android Studio作為圖片資源。

（11）為了在Android Studio中匯入圖片資源，在res檔案夾上按右鍵，選擇new-->Image Asset，將會顯示一個彈窗來匯入資源。選擇在上一步下載好的搜尋icon，資源類型選擇“Action Bar and Tab Icons”並且將資源名稱命名為“ic_search_action”，然後繼續。

（12）一旦icon匯入之後，開啟res-->menu-->menu_main.xml檔案，像下面所示添加搜尋功能表項目。

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"

    tools:context=".MainActivity">

 

    <item

        android:id="@+id/action_search"

        android:title="@string/action_search"

        android:orderInCategory="100"

        android:icon="@drawable/ic_action_search"

        app:showAsAction="ifRoom" />

 

    <item

        android:id="@+id/action_settings"

        android:title="@string/action_settings"

        android:orderInCategory="100"

        app:showAsAction="never" />

</menu>

（13）現在開啟你的MainActivity.java做如下修改。

>通過繼承ActionBarActivity擴充你的Activity

>通過調用setSupportActionBar()方法並傳入toolbar對象來啟用toolbar。

>通過重載onCreateOptionsMenu()和onOptionsItemSelected()方法來啟用toolbar活動項。

MainActivity.java

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 {

 

    private Toolbar mToolbar;

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

 

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

 

        setSupportActionBar(mToolbar);

        getSupportActionBar().setDisplayShowHomeEnabled(true);

    }

 

 

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.menu_main, menu);

        return true;

    }

 

    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

        // Handle action bar item clicks here. The action bar will

        // automatically handle clicks on the Home/Up button, so long

        // as you specify a parent activity in AndroidManifest.xml.

        int id = item.getItemId();

 

        //noinspection SimplifiableIfStatement

        if (id == R.id.action_settings) {

            return true;

        }

 

        return super.onOptionsItemSelected(item);

    }

}

在上述修改之後，如果你運行App，你將會看到搜尋表徵圖和溢出菜單表徵圖。

由於文章較長，請繼續關註：手把手教你打造一個Material Design風格的App(三)

原文地址：http://www.androidhive.info/2015/04/android-getting-started-with-material-design/

手把手教你打造一個Material Design風格的App(二)