[翻译]AppCompat v21 — Android 5.0之前版本设备的Material Design实现

博客原文地址:http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html,要想打开,请FQ。

Android 5.0 SDK在上周五发布,它以新的UI控件、材料设计-我们专注于良好设计的可视化语言为特色。为了能够让你把最新的设计应用到之前的Android平台上,我们扩展了我们的支持包,包括具有较大更新的AppCompat,同样还有新的RecyclerView、CardView和Patette包。

AppCompat新特性

AppCompat(也叫ActionBarCompat)开始的时候是作为运行在Gingerbread上面的设备的Android 4.0 ActionBar API的相反移植,提供了紧接相反移植实现和框架实现的通用API层。 AppCompat v21交付了与Android 5.0一样最新的API和特性集。

在本次发布中,Android引进了新的Toolbar控件。它是给了你更多可控性和灵活性的Action Bar模式的泛化。就像其它的一样,在层次结构中,Toolbar只是一个视图,但却使得与其它视图交错、产生动画效果和对滑动事件产生回应更加容易。你也可以把它设置为Activity的action bar,这意味着标准选项按钮活动将展示在Toolbar里面。

最新更新的AppCompat,你可以已经在使用了一段时间,在过去几周中,它已经包含在多种Google应用更新中,如Play Store, Play Newsstand。它也已经集成到Android应用Google I/O中,就像上面的图片展示的那样,当然,Google I/O是开源的。

设置

如果你在使用Gradle,那么请把AppCompat在你的build.gradle文件中作为一个依赖添加进去。

1 dependencies {
2     compile "com.android.support:appcompat-v7:21.0.+"
3 }

新整合

如果你当前没在使用AppCompat,或者正要重头开始,下面将告诉你如何设置:

  1. 所有的Activity必须继承自ActionBarActivity,当然,ActionBarActivity继承自v4支持包中的FragmentActivity,这样你就可以继续使用fragment。
  2. 所有的主题(想要使用Action Bar/Toolbar)必须继承自Theme.AppCompat。其中有许多的变体可用,包括Light和NoActionBar。
  3. 在Action Bar上填充展示任何东西(例如在toolbar中列表导航的SpinnerAdapter)时,确保使用action bar的特定主题context时,通过getSupportActionBar().getThemedContext()获得。
  4. 必须为MenuItem中的任何有关action的调用使用MenuItemCompat中的静态方法。

想获取更多信息,请查看Action Bar API入门,它是有关AppCompat的综合性入门。

从先前设置中迁移

对于大多数应用,只需要在values/下声明一个主题:

 1 values/themes.xml:
 2
 3
 4
 5 <style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
 6
 7     <!-- Set AppCompat’s actionBarStyle -->
 8
 9     <item name="actionBarStyle">@style/MyActionBarStyle</item>
10
11
12
13     <!-- Set AppCompat’s color theming attrs -->
14
15     <item name=”colorPrimary”>@color/my_awesome_red</item>
16
17     <item name=”colorPrimaryDark”>@color/my_awesome_darker_red</item>
18
19
20
21     <!-- The rest of your attributes -->
22
23 </style>

你现在可以移除有关values-v14+的所有Action Bar风格了。

定制主题

AppCompat支持新的调色板属性,从而允许你可以轻易地自定义主题以通过primary和accent色彩来适配你的品牌。例如:

 1 values/themes.xml:
 2
 3
 4
 5 <style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
 6
 7     <!-- colorPrimary is used for the default action bar background -->
 8
 9     <item name=”colorPrimary”>@color/my_awesome_color</item>
10
11
12
13     <!-- colorPrimaryDark is used for the status bar -->
14
15     <item name=”colorPrimaryDark”>@color/my_awesome_darker_color</item>
16
17
18
19     <!-- colorAccent is used as the default value for colorControlActivated,
20
21          which is used to tint widgets -->
22
23     <item name=”colorAccent”>@color/accent</item>
24
25
26
27     <!-- You can also set colorControlNormal, colorControlActivated
28
29          colorControlHighlight, and colorSwitchThumbNormal. -->
30
31
32
33 </style>

当你设置这些属性时,AppCompat自动扩散这些值到API 21+上面的框架属性。它将自动地为状态条和任务概览着色。

在更老平台上,AppCompat在任何可能的地方模拟这种颜色主题。只是此时,为action bar和一些控件着色受到限制。

控件着色

运行在Android 5.0上的设备时,所有的控件都是通过刚刚讨论过的颜色主题属性着色。有两个特性允许在Lollipop上进行控件着色:drawable着色和在drawable中引用主题属性(如attr/foo的形式)。

  1. AppCompat为之前Android版本的以下控件子集提供相似的行为:
  2. AppCompat Toolbar提供的一切(action模式等)
  3. EditText
  4. Spinner
  5. CheckBox
  6. RadioButton
  7. Switch(使用新的android.support.v7.widget.SwitchCompat)
  8. CheckedTextView

为了使这些控件起作用,你不必做任何特别的事,只需要像往常一样在布局中使用这些控制信息,AppCompat将会完成其余的事情。

Toolbar控件

AppCompat完全支持Toolbar而且,Toolbar拥有同行于框架控件的特性和API。在AppCompat中,Toolbar在android.support.v7.widget.Toolbar类中实现。有两种方式使用Toolbar:

在想要使用业已存在的Action Bar设备但想要更多地控制界面时(如菜单填充和选择,ActionBarDrawerToggle等等),把Toolbar当Action Bar一样使用。

对于Action Bar不支持的场景,当想要在应用中使用这种模式时,使用单独的Toolbar;例如,在屏幕上展示多个工具条,悬跨部分宽度等等。

Action Bar

为了把Toolbar当Action Bar一样使用,首先要禁用提供装饰品的Action Bar。最简单的方式是使用继承自Theme.AppCompat.NoActionBar(或它的Light变体)的主题。

其次,通常通过布局文件创建Toolbar实例:

 1 <android.support.v7.widget.Toolbar
 2
 3     android:id=”@+id/my_awesome_toolbar”
 4
 5     android:layout_height=”wrap_content”
 6
 7     android:layout_width=”match_parent”
 8
 9     android:minHeight=”?attr/actionBarSize”
10
11     android:background=”?attr/colorPrimary” />

高度、宽度、背景等等,完全取决于你;这些就是好的例子。因为Toolbar也只是一个ViewGroup,你可以给它设置任何你想要的风格和大小。

然后在Activity划Fragment中,把Toolbar设置为你的Action Bar:

 1 @Override
 2
 3 public void onCreate(Bundle savedInstanceState) {
 4
 5     super.onCreate(savedInstanceState);
 6
 7     setContentView(R.layout.blah);
 8
 9
10
11     Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
12
13     setSupportActionBar(toolbar);
14
15 }

从这里之后,所有的菜单选项将会展示在Toolbar中,并通过标准选项菜单回调来产生之后的代码。

脱机使用

脱机模式的不同在于不必设置Toolbar像Action Bar一样活动。由此,可以使用任何AppCompat主题,且不必禁用提供装饰的Action Bar。

在脱机模式下,需要手工地通过content/actions来产生Toolbar相关的代码。例如,如果想要展示action,你需要在里面填充菜单:

 1 @Override
 2
 3 public void onCreate(Bundle savedInstanceState) {
 4
 5     super.onCreate(savedInstanceState);
 6
 7     setContentView(R.layout.blah);
 8
 9
10
11     Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
12
13
14
15     // Set an OnMenuItemClickListener to handle menu item clicks
16
17     toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
18
19         @Override
20
21         public boolean onMenuItemClick(MenuItem item) {
22
23             // Handle the menu item
24
25             return true;
26
27         }
28
29     });
30
31
32
33     // Inflate a menu to be displayed in the toolbar
34
35     toolbar.inflateMenu(R.menu.your_toolbar_menu);
36
37 }

有了Toolbar,你可以做许多其它的事件。想要获取更多的的信息,请参见Toolbar API。

定制风格

对于标准Action Bar,Toolbar的风格定制是完成的不一样的,是直接设置在它的视图上的。

当把Toolbar当Action Bar使用时,应用使用如下基本的风格:

1 <android.support.v7.widget.Toolbar
2
3     android:layout_height="wrap_content"
4
5     android:layout_width="match_parent"
6
7     android:minHeight="?attr/actionBarSize"
8
9     app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

app:theme声明将确保文本和子项在使用solid色彩。

DarkActionBar

可以使用布局属性来直接设置Toolbar实例的风格。为了获取一个看起来像DarkActionBar(dark内容,light overflow menu)的Toolbar,提供了theme和popupTheme属性:

 1 <android.support.v7.widget.Toolbar
 2
 3     android:layout_height=”wrap_content”
 4
 5     android:layout_width=”match_parent”
 6
 7     android:minHeight=”@dimen/triple_height_toolbar”
 8
 9     app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
10
11     app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

SearchView控件

AppCompat提供了Lollipop更新过的SearchView API,它是可以高度自定义和风格设置化的。我们现在使用Lollipop风格结构而不是老的searchview*主题属性.

如下设置SearchView属性:

 1 values/themes.xml:
 2
 3 <style name=”Theme.MyTheme” parent=”Theme.AppCompat”>
 4
 5     <item name=”searchViewStyle”>@style/MySearchViewStyle</item>
 6
 7 </style>
 8
 9 <style name=”MySearchViewStyle” parent=”Widget.AppCompat.SearchView”>
10
11     <!-- Background for the search query section (e.g. EditText) -->
12
13     <item name="queryBackground">...</item>
14
15     <!-- Background for the actions section (e.g. voice, submit) -->
16
17     <item name="submitBackground">...</item>
18
19     <!-- Close button icon -->
20
21     <item name="closeIcon">...</item>
22
23     <!-- Search button icon -->
24
25     <item name="searchIcon">...</item>
26
27     <!-- Go/commit button icon -->
28
29     <item name="goIcon">...</item>
30
31     <!-- Voice search button icon -->
32
33     <item name="voiceIcon">...</item>
34
35     <!-- Commit icon shown in the query suggestion row -->
36
37     <item name="commitIcon">...</item>
38
39     <!-- Layout for query suggestion rows -->
40
41     <item name="suggestionRowLayout">...</item>
42
43 </style>

不必设置全部属性,默认值对大多数应用起作用。

Toolbar即将到来……

我希望,这篇博客能够帮助你站起来和AppCompat一直奔跑并鼓励你创建优秀的材料设计风格的应用。如果你有任何有关AppCompat或者其它任何支持包的问题,请让我们在G+/Twitter的评论或者我们能够提供更多文档的地方知道。

时间: 2024-10-09 17:16:51

[翻译]AppCompat v21 — Android 5.0之前版本设备的Material Design实现的相关文章

在低于android 5.0的版本中ActionBar不显示

我从ABS切换到AppCompat与Material theme(仅适用于API21) 我的配置文件如下: <application android:theme="@style/AppStyle" <-- values folder --> <style name="AppStyle" parent="@style/AudioRecTheme"> <style name="AudioRecTheme&

android 4.0之前版本出现JSONException异常

今天在调试解析服务器传过来的JSON数据时,在2.3.7的手机上报了下面这样一个异常. 08-07 22:00:29.597: W/System.err(7610): org.json.JSONException: Value  of type java.lang.String cannot be converted to JSONArray 而在android4.0版本以上的手机上调试是没有问题的,从而去看了下android4.0 JSONArray源码,发现有如下变化 从对比图片来看,问题

从源码剖析PopupWindow 兼容Android 6.0以上版本点击外部不消失

PopupWindow可以说是Google坑最多的一个控件,使用PopupWindow的时候没有遇到几个坑你都不好意思说你用过它,说一个可能大多数人都遇到过的一个坑:那就是我们想触摸PopupWindow 以外区域就隐藏PopupWindow,理论上我们只需要调用 setOutsideTouchable(ture)设置为ture就可以了,但是实际上只设置这个属性是不行的,必须设置背景,也就是说要和setBackgroundDrawable(Drawable background)同时使用才有效,

Android5.0美不胜收的新特性 Material Design

Google提出了全新的设计规范Material Design,扁平化的设计,加上明亮的色彩,有一种美不胜收的感觉. Material Design翻译过来叫做"材料设计",Material Design是多种元素组合在一起形成一个层次的效果,有主题.新的控件.动画,那么使用Material Design要注意些什么呢?下面来看看使用的注意点: 1.保证兼容性,可以兼容市场占有率高的低版本系统 下面来初步认识一下Material Design的设计规范: 1.使用Material De

解决Android 4.0以上版本中OptionsMenu菜单不显示ICON图标的问题

在Android4.0系统中,创建菜单Menu,通过setIcon方法给菜单添加图标是无效的,图标没有显出来,2.3系统中是可以显示出来的.这个问题的根本原因在于4.0系统中,涉及到菜单的源码类 MenuBuilder做了改变,该类的部分源码如下: public class MenuBuilder implements Menu { ... private boolean mOptionalIconsVisible = false; .... void setOptionalIconsVisib

android 5.0以下版本使用atof报错解决

经过测试,如果手机系统在5.0之下,项目project.properties的target若在5.0以上(android-20), NDK 使用atof就会报错: cannot locate symbol "atof",使用strtof 也是一样:cannot locate symbol "strtof", 我目前所使用的解决办法是用 strtod()方法

Android 5 0以上版本去掉Button自带阴影效果的方法

关键代码: style="?android:attr/borderlessButtonStyle" 1 参考文章: http://stackoverflow.com/questions/28756035/how-to-remove-button-shadow-android 具体配置: <Button android:layout_width="wrap_content" android:layout_height="wrap_content&quo

Android 5.0 Lollipop介绍

Android Lollipop介绍 Android 5.0 Lollipop,此版本为用户提供了丰富的新功能,并为开发者新增了数以千计的 API,它进一步扩展了 Android 的应用范围,从手机.平板电脑和可穿戴式设备,扩展到电视和汽车. 1.Android 5.0新增功能与特性 Material Design: 简介:Material Design语言的一些重要功能包括 系统字体Roboto的升级版本 ,同时颜色更鲜艳,动画效果更突出.杜拉特还简要谈到了新框架的一些变化--这个新框架也于今

Android 5.0 documentation CHM 版本 下载

由于某种原因,在国内查看官网Android开发文档经常性打不开,下载其离线文档,使用时候不流畅,机缘巧合之下,在ApkBus网站发现发现Android 5.0 CHM版本开发文档,由于其下载的链接在电子工程世界,需注册才能下载.本着分享的精神,自己上传到百度云,方便开发者下载. 下载地址: 链接:http://pan.baidu.com/s/1bnhixKN 密码:sm4u 注意事项: Android 5.0 documentation CHM 打开后,点击链接没有反应,则需右键属性 安全- >