【Android】AppCompat V21:将 Materia Design 兼容到5.0之前的设备

AppCompat V21:将 Materia Design 兼容到于5.0之前的设备

本篇文章翻译自Chris Banes(就职于Google,是Android-PullToRefresh,PhotoView,photup的作者,GitHub地址:https://github.com/chrisbanes,博客地址:https://chris.banes.me/2014/10/17/appcompat-v21/ ,现在这篇文章已经收录到Android官方博客了:http://android-developers.blogspot.jp/2014/10/appcompat-v21-material-design-for-pre.html,下面是翻译正文,末尾介绍了一个已经兼容到5.0之前设备的App,提供2014 Google开发者大会信息的app:  Google Iosched,具体信息可以看文章结尾处。

博客正文

android 5.0今天发布。在很多很棒的更新中,包括了新的UI组件和创建 Material Design 主题的能力。为了使你能够将新的设计中更新到旧的系统中,

我们同时更新了包含 AppCompat 的support libraries。在这篇文章中,我将总体说明一下appCompat的新特性并介绍一下如何应用于你的app中。

AppCompat (aka ActionBarCompat)是为了Android 4.0中的ActionBar的向后兼容到 Gingerbread(2.3) 系统。在兼容性实现和
Framework实现的上层提供了一个通用的API层。这个最新的 21Version appcompat 提供一些5.0的API和特性设置。

Android5.0引入了一个新的ToolBar widget,这是一个ActionBar模式的衍生,但为你的使用提供了更多的控制和便利性。

Toolbar 和你的View层级关系中的其它View一样。但它使得界面更容易的与其它部分交互,比如View,动画,Scroll事件的响应。

添加依赖

如果你正在使用Gradle,只要把appcompat作为一个依赖库添加到你的build.gradle中即可。

dependencies {
    ...
    compile "com.android.support:appcompat-v7:21.0.0"
}

新的集成

如果你现在没有使用AppCompat,或者完全是从头开始,请参考下面几个步骤:
 1.所有的Activities都必须继承自ActionBarActivity,它继承自v4包的FragmentActivity,因此你可以继续使用fragments。
 2.所有的主题必须继承Theme.AppCompat. 这里有一些变量,包括Light和NoActionBar。
 3.当你要通过ActionBar来展示任何东西的时候(比如用于List导航的SpinnerAdapter),请确保你使用了ActionBar的主题上下文,你可以通过
 getSupportActionBar().getThemedContext().来获取。
 4.对于所有的MenuItem action的调用,你必须使用静态方法MenuItemCompat。

ActionBar API 指南 (http://developer.android.com/guide/topics/ui/actionbar.html) 是一个AppCompat的综合的介绍。但也需要更新到 21 版本。只要忽略底部的“Example theme”,它提到了你应该设置为每一个ActionBar设置两个版本的style属性。

从之前的创建中迁移

如果你早已拥有了AppCompat的搭建,紧接着这里会介绍如何使用新的特性去更新你的主题。

我们现在在所有的版本上支持Toobar/ActionBar的实现。意味着你在ActionBar中将再也看不到任何的android:属性。(过去为了兼容都需要设置两个属性,一个要带android:的,一个不带)对于那些已经使用AppCompat的app创建,意味着你应该重新设置那些在Android name space 中重置的V14+的主题。

 请注意,这些仅仅用于那些影响到ActionBar的属性。

对于大多数的App,你应该需要在values中添加一个主题的声明:values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- Here we setting appcompat’s actionBarStyle -->
    <item name="actionBarStyle">@style/MyActionBarStyle</item>  

    <!-- ...and here we setting appcompat’s color theming attrs -->
    <item name="colorPrimary">@color/my_awesome_red</item>
    <item name="colorPrimaryDark">@color/my_awesome_darker_red</item>  

    <!-- The rest of your attributes -->
</style>

主题
AppCompat已经支持了新的color palette主题属性(http://developer.android.com/training/material/theme.html#ColorPalette), 这将允许你更简单的通过一个主要及基本色调(http://www.google.com/design/spec/style/color.html#color-ui-color-application) 去自定义主题去适应你的品牌。
示例:values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">@color/my_awesome_color</item>  

    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">@color/my_awesome_darker_color</item>  

    <!-- colorAccent is used as the default value for colorControlActivated
     which is used to tint widgets -->
    <item name="colorAccent">@color/accent</item>  

    <!-- You can also set colorControlNormal, colorControlActivated
     colorControlHighlight & colorSwitchThumbNormal. -->
</style> 

在 API21+ 上,通过设置这些,AppCompat将会自动的将这些值传递到framework的属性中。会自动填充状态栏和最近的任务项的颜色。
在老的系统平台上,AppCompat会在需要的地方模拟颜色主题。现在,对于ActionBar和一些widget的着色将会受到限制。

Widget 着色(Widget Tinting)

当运行在5.0的设备上,所有的widget将会使用我们刚才讨论的 color theme 属性着色。
 在Lollipop上,有两种主要的特性是被允许的: drawabel着色和在drawables中引用主题的属性。
 AppCompat为 在老的系统的 UI widget的子集提供了相似的表现行为:

所有的东西都由 AppCompat的 toolbar提供
EditText
Spinner
CheckBox
RadioButton
Switch(使用supportV7中的SwitchCompat,https://developer.android.com/reference/android/support/v7/widget/SwitchCompat.html

CheckedTextView

你不需要做任何特殊的工作,只需像以前一样在你的布局中使用这些控制并且AppCompat会为你做剩下的工作(请看FAQ)。

Widgets

ToolBar
首先,在AppCompat中ToolBar被很好的支持,并且拥有过去Framework Widget中的所有API。
你需要通过 android.support.v7.widget.Toolbar (https://developer.android.com/reference/android/support/v7/widget/Toolbar.html) 使用它。

这里有两种方式使用ToolBar:

1.将ToolBar作为ActionBar来使用 当你ActionBar的功能一些基本功能,(比如menu 填充和selection,ActionBarDrawerToggle等),

但还不能够满足你的需求的时候。

2.ToolBar作为独立使用。在以下场景中:

不支持ActionBar的情况、在同一个屏幕中使用多个toolbar的情况。

Action Bar
当把ToolBar作为ActionBar使用的时候,第一件事就是去禁用 Decor 提供ActionBar的功能。最简单的方式是继承 Theme.AppCompat.NoActionBar主题,其次,你需要创建一个ToolBar实例,通常由布局文件来设置:

<android.support.v7.widget.Toolbar
  android:id="@+id/my_awesome_toolbar"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:minHeight="?attr/actionBarSize"
  android:background="?attr/colorPrimary" />   

宽、高,背景等等,完全由你来控制,这些只是示例。由于ToolBar只是一个ViewGroup,你可以添加任何样式并放在任何位置。
接着在你的Activity或者Fragment中设置这个ToolBar作为ActionBar使用。

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_layout);  

        Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
        setSupportActionBar(toolbar);
    }  

所有的menu 条目将会在你的ToolBar中展示,通过标准的options menu进行回调。
基于上述几点,所有的menu 条目将被展示在你的ToolBar中,通过标准的menu回调。

Standalone(单独使用)

和上面很类似,但是在这种模式下,你不用去设置ToolBar作为ActionBar使用。由于这个原因,你可以使用任何AppCompat主题并且你不需要禁用decor提供的ActionBar。

当它被独立使用的时候,你需要通过content/actions手动的填充ToolBar、比如,如果你想它展示一些actions,你需要填充一个menu进去。

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.my_layout);  

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

    // Set an OnMenuItemClickListener to handle menu item clicks
    toolbar.setOnMenuItemClickListener(
        new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            // Handle the menu item
            return true;
        }
    });  

    // Inflate a menu to be displayed in the toolbar
    toolbar.inflateMenu(R.menu.your_toolbar_menu);
} 

ToolBar还可以做很多事情,具体的可以参考文档:https://developer.android.com/reference/android/support/v7/widget/Toolbar.html

Styling

ToolBar的样式与标准的ActionBar是不一样的。它是被直接设置到View上的。

一个常被开发者问到的问题是,如何实现一个看起来像DarkActionBar的Toolbar(深色的内容,亮色的覆盖在上层的菜单)(这应该是侧边栏滑出时的那种效果),这样的样式可以通过提供theme和popupTheme属性实现:

<android.support.v7.widget.Toolbar
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="@dimen/triple_height_toolbar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />  

很明显的,背景,高度,可以由你任意设置,上面只是建议。

SearchView
AppCompat提供了Lollipop中的SearchView API的更新,它们会变得更加可定制和样式多样化。基于这些,我们现在使用 L 样式结构代替旧的SearchView主题属性:
下面展示了如何改变SearchView 的样式:

values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat">
    <item name="searchViewStyle">@style/MySearchViewStyle</item>
</style>  

<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
    <!-- The layout for the search view. Be careful. -->
    <item name="layout">...</item>
    <!-- Background for the search query section (e.g. EditText) -->
    <item name="queryBackground">...</item>
    <!-- Background for the actions section (e.g. voice, submit) -->
    <item name="submitBackground">...</item>
    <!-- Close button icon -->
    <item name="closeIcon">...</item>
    <!-- Search button icon -->
    <item name="searchIcon">...</item>
    <!-- Go/commit button icon -->
    <item name="goIcon">...</item>
    <!-- Voice search button icon -->
    <item name="voiceIcon">...</item>
    <!-- Commit icon shown in the query suggestion row -->
    <item name="commitIcon">...</item>
    <!-- Layout for query suggestion rows -->
    <item name="suggestionRowLayout">...</item>
</style> 

很显然,你不需要去设置上面的所有属性,缺省的就已经可以满足大多数App了。

希望这篇文章可以帮助你构建一个基于AppCompat,更加完美,Materia Desigh 的App,如果有任何AppCompat或者support libraries的使用问题,你可以通过G+/Twitter来告知我们,我们将会提供更多的文档。

常见问题:

为什么EditText(或者其它的Widget List)在Lollipop之前的系统上没有被着色。
在AppCompat中 Widget 的着色原理是:
通过拦截任何布局填充并且插入一个特殊的 tint-aware版本的Widget到它的位置上。对于大多数人,是可以生效的,但我也考虑到了几种未生效的场景:

你已经拥有自定义版本的Widget(比如,你继承了EditText)

你通过一个LayoutInflater去创建了一个EditText(比如你调用new EditText)

你正在与LayoutInflater的Factory正关联着。

这个特殊的 tint aware Widget 已经被隐藏了,因为它们是一个未完成的实现(这里不太明白是什么意思)。

Google Iosched

相信很多人对这个项目都不会陌生,开源有一段时间了,关键的是随着5.0正式版的推出,它立即向5.0之前的系统做了兼容,相信以后还会持续更新GitHub地址:https://github.com/google/iosched 在我的微盘下提供了一个APK,大家可以先看一下,当然还是希望大家clone源码,仔细研究下,很不错的项目,下载地址:http://vdisk.weibo.com/s/av06eFs1kWSeE?from=page_100505_profile&wvr=6 ,如果没有使用数据,微盘下的另一个Apk或许可以帮到你哦。下面是几张截图,交互很棒,赶紧下载源码去看实现吧,还有个项目也可以关注下:https://github.com/antoniolg/MaterialEverywhere,看名字就知道了

            

              

文章出处

http://blog.csdn.net/xushuaic/article/details/40212327

时间: 2024-11-10 11:33:51

【Android】AppCompat V21:将 Materia Design 兼容到5.0之前的设备的相关文章

[翻译]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和

Eclipse导入?appcompat,design兼容包

从Android studio推出1.0正式版后,就一直在as上开发项目,但是最近要测试一个项目,是eclipse结构,导入as后,是各种报错信息,决定改成eclipse. 其中项目中用到了ppcompat,carview,recyclerview,design兼容包及组件,要正常运行这些包要与本机的sdk中的版本一样: 为了方便,以library的形式导入: 勾上copy projects int workspace:(方便以后其他项目引用,复制至项目空间下) Root Diretory:就是

Android Material Design 兼容库的使用

Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客:1.Android Material Design 兼容库的使用详解2.Android应用Design Support Library完全使用实例第一篇博客是这个兼容库的详细解析,我参考了里面的许多内容,第二篇是兼容库的大致介绍,如果你能把这两篇全部弄懂,我这篇也没有必要看了.说了这么多,开始正文吧

Android最佳实践之Material Design

Material概述及主题 学习地址:http://developer.android.com/training/material/get-started.html 使用material design创建App: 温习一下material design说明 在app中应用material 主题 创建遵循material design规则的布局 指定投射阴影的高度 使用ListView和CardView 自定义动画 使用Material 主题 <!-- res/values/styles.xml

告别ActionBarSherlock——Android.support包也能打造兼容2.x的ActionBar(1)

http://www.bdqn.cn/news/201308/10625.shtml 摘要: 告别ActionBarSherlock——android.support包也能打造兼容2.x的ActionBar(1) ActionBar是Android 3.0的产物 一直延伸到现在最新的4.3 就个人而言 ActionBar相比传统的弹出式菜单 更加简洁 但是ActionBar只有API 10以上(包括API 10)才能尝到 于是有些大神便打造出了ActionBarSherlock,为2.x带来了一

[转]Material Design Library 23.1.0的新变化与代码实战

Design Library出来已经快有一个月了,当时大概看了一下介绍这个新版本变化的译文,内容不多,给我印象最深的就是Percent lib.AppBarLayout 和NavigationView的变化,当然还有Design Lib的一些控件内部实现的变化没有介绍,从而使得在使用新版本的控件时候难免因为版本的不同会发生一些异常,而本人正好在上个星期对一个项目换库时发现了这个问题,什么问题呢? NavigationView使用注意的问题 就是NavigationView的内部实现发生了改变,它

Material Design Library 23.1.0的新变化与代码实战

Design Library出来已经快有一个月了,当时大概看了一下介绍这个新版本变化的译文,内容不多,给我印象最深的就是Percent lib.AppBarLayout 和NavigationView的变化,当然还有Design Lib的一些控件内部实现的变化没有介绍,从而使得在使用新版本的控件时候难免因为版本的不同会发生一些异常,而本人正好在上个星期对一个项目换库时发现了这个问题,什么问题呢? NavigationView使用注意的问题 就是NavigationView的内部实现发生了改变,它

Android项目实战(三十四):蓝牙4.0 BLE 多设备连接

原文:Android项目实战(三十四):蓝牙4.0 BLE 多设备连接 最近项目有个需求,手机设备连接多个蓝牙4.0 设备 并获取这些设备的数据. 查询了很多资料终于实现,现进行总结. -------------------------------------------------------------------------------------------------------------------------------------------------------------

Android官方开发文档Training系列课程中文版:连接无线设备之网络服务搜索功能

原文地址:http://android.xsoftlab.net/training/connect-devices-wirelessly/index.html 引言 Android设备除了可以与服务器建立连接之外,Android无线API还允许处于同一网段下的两台设备建立连接,或者是物理距离相近的两台设备建立连接.Network Service Discovery (NSD)允许应用程序通过扫描来搜索附近可连接的设备.当然被扫描的设备也同样需要开启该服务.利用这项特性可以使应用程序拥有更强大的功