«

手把手教你打造一个Material Design风格的App(二)

时间:2024-3-2 18:14     作者:韩俊     分类: Android


——接上文。

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/



标签: android

热门推荐