Android UI实战之基于Toolbar与Navigation Drawer的Material Design快速开始

来源:转载

[TOC]

本文为翻译文章,原文地址在这里。

Material Design是由Google提出的关于如何构建一个Android应用的完整的指导方案,该方案不仅仅可以被用于Android应用的设计,同样可以被用于Web端的设计。目前在Web端上已经出现了大量践行Material Design的开源的组件库。在开发个APP的过程种,Android提供了多个辅助库来帮助开发者实践这些设计指南。其中最重要的几个库就是:

  • com.android.support:appcompat-v7:23.1.0

  • com.android.support:design :23.1.0

总而言之,如果使用Android Studio来开发应用的话,这两个库会被自动作为依赖引入项目中。在开发应用时,一个重要的方面就是应用的颜色模式的选择,而Material Design的原则中也阐述了如何来选择颜色。

Material Design: Colors

创建应用的第一步即是选择合适的颜色方案。在这种目标下可以利用这个站点 website 来根据Material Design来选取合适的颜色。在经过选择之后我们可以下载colors.xml:

<resources><color name="primary">#3F51B5</color><color name="primary_dark">#303F9F</color><color name="primary_light">#C5CAE9</color><color name="accent">#03A9F4</color><color name="primary_text">#212121</color><color name="secondary_text">#727272</color><color name="icons">#FFFFFF</color><color name="divider">#B6B6B6</color></resources>

在选择了合适的颜色之后就要创建自定义的主题,一般来说应用需要支持尽可能多的不同的设备,而不仅仅是Lollipop或者之后的版本。基于这个原因,我们需要在values目录下创建两个文件夹:

  • style

  • style-v21

第一个文件夹下面的样式设计会被低于Lollipop版本的手机使用,第二个文件夹下面的样式设计会被高于Lollipop版本的手机使用,在第一个目录下,style.xml文件应该被定义如下:

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

而在第二个文件夹下面只需要添加如下的配置:

<resources> <style name="MyAppTheme" parent="AppTheme"> <item name="android:windowContentTransitions">true</item> <item name="android:windowAllowEnterTransitionOverlap">true</item> <item name="android:windowAllowReturnTransitionOverlap">true</item> <item name="android:windowSharedElementEnterTransition">@android:transition/move</item> <item name="android:windowSharedElementExitTransition">@android:transition/move</item> </style></resources>

最后,在Manifest.xml文件中,应该将application的主题修正为:

<application android:theme="@style/MyAppTheme" > ...</application>

Android Toolbar

在开发一个Android应用中另一个比较重要的组件就是Toolbar,它的作用很类似于早年的Android中的Action Bar,它主要担负着如下几个功能:

  • 导航按钮

  • 应用标题与副标题

  • 活动菜单

  • 图标

根据Material Design的设计原则,Toolbar会包含之前选择的几个主要的颜色,可以将其加入到Android应用中:

<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"android:id="@+id/layout"> <include layout="@layout/toolbar" /></RelativeLayout>

其中Toolbar的布局如下:

<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="?attr/actionBarSize"android:background="@color/primary"local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

注意到在第五行中是利用?attr/actionBarSize设置了Toolbar的高度。同时在Activity种需要利用代码设置Toolbar:

@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setToolBar();}...private void setToolBar() {Toolbar tb = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(tb);ActionBar ab = getSupportActionBar();ab.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);ab.setDisplayHomeAsUpEnabled(true);}

添加活动菜单

一旦Toolbar配置完毕之后,就需要为该菜单添加活动选项与出现在Toolbar上的菜单栏目。首先需要在res/menu目录下添加一个main_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/menu_settings" android:title="Settings" android:icon="@android:drawable/ic_menu_preferences" app:showAsAction="always" android:orderInCategory="100"/><item android:id="@+id/menu_help"android:title="Help"android:icon="@android:drawable/ic_menu_help"app:showAsAction="ifRoom"android:orderInCategory="110" /><item android:id="@+id/menu_compass"android:title="Compass"android:icon="@android:drawable/ic_menu_compass"app:showAsAction="never"android:orderInCategory="105"/></menu>

现在Activity就是如下:

@Overridepublic boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main_menu, menu); return true;}


分享给朋友:
您可能感兴趣的文章:
随机阅读: