文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

Material Design是由谷歌开发的一套规范,用来引导Android应用程序的开发。它们不仅适用于安卓应用,也适用于网站设计。在应用程序的开发过程中,Android提供了一些库来帮助开发人员来实现主要的material规范。
最重要的库是:

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

要知道,当开发人员使用Android Studio启动一个新项目时,这两个库就被默认导入。

应用程序的一个重要方面是色彩模式的表达。Material Design规范中给出了颜色选择的说明。

第 1 段(可获 1.41 积分)

假设我们要创建一个简单的安卓应用,我们根据主要步骤实现具有质感设计的安卓应用。

质感设计:颜色

第一步, 为应用程序选取颜色模式。为了这个目的,我们可以在这个很棒的网站上根据质感设计的原则创建颜色模式。

颜色选取好后,我们可以下载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>
第 2 段(可获 0.89 积分)

你可以选择你喜欢的颜色模式。第一个结果如下图所示:

how to use android toolbar with material design

现在是时候用之前选取的颜色创造主题了。应用程序应支持大量的智能手机,不仅能够运行在安卓5.0 Lollipop上,也应该支持以后的版本。

为此有必要建立两个主题,一个用于运行在安卓5及以后的版本上,另一个用于lollipop以前的版本。

因此让我们建立两个目录如下所示:

style
style-v21

第一个目录用于运行在Lollipop以前版本上的所有智能手机,第二个目录用于Lollipop操作系统及其以后版本的安卓手机。

在第一个目录使用style.xml:

第 3 段(可获 1.48 积分)
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/primary&amp;lt/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>

 

第 4 段(可获 0.1 积分)

最后修改Manifest.xml文件:

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

Android工具栏

开发安卓应用程序最重要的组件是工具栏。工具栏的作用和之前的 action bar 一样。工具栏含有以下组件:

  • 导航按钮
  • 应用程序标题和子标题
  • 操作菜单
  • 品牌标志

依据质感设计,工具栏的颜色和我们之前的选择类似。怎样将它加到安卓程序里呢?

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

 

第 5 段(可获 0.93 积分)

工具栏布局如下:

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

注意到第5行我们用?attr/actionBarSize设置工具栏高度, 第6行设置工具背景色。

在activity中有必要设置工具栏:

第 6 段(可获 0.45 积分)
@Override
protected 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 with material design

给工具栏添加操作菜单

一旦配置正确,可以在工具栏上添加操作菜单或菜单项,要进行这项操作需在res/menu文件夹下添加名为main_menu.xml的文件:

第 7 段(可获 0.55 积分)

现在在activity里有:

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

运行示例,应用程序外观如下:

options in android toolbar

当用户选择其中一个选项,应用程序应该能探测到并采取合适的操作,要这么做有必要重写方法:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
int itemId = item.getItemId();
String btnName = null;

switch(itemId) {
case R.id.menu_settings:
btnName = "Settings";
break;
case R.id.menu_compass:
btnName = "Compass";
break;
case R.id.menu_help:
btnName = "Help";
break;

}

Snackbar.make(layout, "Button " + btnName, Snackbar.LENGTH_SHORT).show();
return true;
}
第 8 段(可获 0.51 积分)

在这里我们只是使用Snackbar简单的显示一个信息。

Android导航抽屉

导航抽屉是由谷歌推出的开发安卓App最重要的UI组件之一.导航抽屉一个侧边菜单,用来组织app内部的导航. 它提供一个统一的方式来访问app内不同的页面和信息. 你可以通过浏览谷歌官网了解更多.
它实现起来很简单. 表示导航抽屉的自定义view必须是布局中的第一个元素:

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;android.support.v4.widget.DrawerLayout
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"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity"
&gt;

&lt;LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"&gt;

&lt;include layout="@layout/toolbar" /&gt;

&lt;!-- Let's add fragment --&gt;
&lt;FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/frame"/&gt;

&lt;/LinearLayout&gt;

&lt;android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_items" /&gt;

&lt;/android.support.v4.widget.DrawerLayout&gt;
第 9 段(可获 1.15 积分)

在这种情况下,工具栏在LinearLayout内,但应用程序处理它的方式与之前显示的相同。
在这种情况下,FrameLayout用来保存通过fragment显示的页面内容。
NavigationView是我们应用程序的“真实”菜单。 菜单项写入nav_items中。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item android:id="@+id/fab"
android:title="Floating Action Button"
android:icon="@drawable/ic_action_fab" />

<item android:id="@+id/star"
android:title="Star"
android:icon="@drawable/ic_action_star" />

<item android:id="@+id/uploadr"
android:title="Star"
android:icon="@drawable/ic_action_upload" />
</group>
</menu>

 

第 10 段(可获 0.68 积分)

要处理用户点击一个选项是非常容易的,需要编写如下的代码:

private void setNavigationDrawer() {
dLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navView = (NavigationView) findViewById(R.id.navigation);
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {

Fragment frag = null;
int itemId = menuItem.getItemId();

if (itemId == R.id.fab) {
frag = new Fragment1();
}
else if (itemId == R.id.star) {
frag = new Fragment2();
}

if (frag != null) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

transaction.replace(R.id.frame, frag);
transaction.commit();
dLayout.closeDrawers();
return true;
}

return false;
}
});
}
第 11 段(可获 0.2 积分)

我们添加一个监听器来监听菜单栏目是否被用户按下,然后根据用户操作设置正确的fragment,最后一步是当用户点击home图标时打开抽屉 ,添加如下代码:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
int itemId = item.getItemId();
String btnName = null;

switch(itemId) {
...
//home键
case android.R.id.home: {
dLayout.openDrawer(GravityCompat.START);
return true;
}
}
.....
}

运行这个例子,得到如下结果:

Apply material design to android navigation drawer

在文章末尾,你知道了如何根据material设计原则来使用安卓导航抽屉盒工具栏了。

第 12 段(可获 0.85 积分)

如果你想了解怎样运用质感设计创建真实的应用程序,请参看链接描述怎样 运用质感设计创建安卓天气应用程序 

源码可在@github获取。

 

第 13 段(可获 0.45 积分)

文章评论