Android 5.0(L) ToolBar(替代ActionBar) 实战(一)

来源:互联网 发布:大智慧交易软件 编辑:程序博客网 时间:2024/06/10 15:10

Android 5.0SDK在上周悄然发布了,由于更新了Appcombat V7库,将Google在IO 2014时提到的Material Design的UI界面元素带了进来。从此,开发者可以创建基于Material Design界面设计的APP了。

诚然,在更新了新版SDK并引入新的Appcombat库后,发现之前的ActionBar的很多方法已经标记为不建议(Deprecated)的了。经过反复摸索,得知需要用ToolBar来代替古老的ActionBar。

那么ToolBar与传统ActionBar相比,有何优越性呢?简单来说:多样、自由。下面来一起看看ToolBar的使用。

首先,我们来新建一个项目



为了更好的兼容之前的版本,因此依旧将最低兼容的Android版本设置为2.2。其他保持默认,一路下一步,然后完成。

为了方便开发者,在新建项目的时候Eclipse依然是自动引入了Appcombar库。如果这个时候代码报错,则要看看这个库的引入状况,并且检查一下是否作为Library被导入到新的项目中了。

一切就绪的话,进入AndroidMenifest.xml,将ActionBar彻底废掉。废掉老旧的ActionBar的方法十分简单,将application下android:theme元素替换为:@style/Theme.AppCompat.NoActionBar就可以了。当然,下面的activity中切记不要再使用带有ActionBar的主题样式了,否则会报错的。另外,android:label对于Toolbar而言,也没有必要存在了,当然,即使存在这个字段是不会报错的。下面放上整个xml的例子:

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.xwh.toolbardemo"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk        android:minSdkVersion="8"        android:targetSdkVersion="21" />    <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/Theme.AppCompat.NoActionBar" >        <activity            android:name=".MainActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

下面我们来到MainActivity的布局文件:activity_main.xml。如果你的SDK已经更新为最新而且此项目也是配置为5.0的编译状态下时,在布局预览视图中将会如下所示:


可以看到,预览窗格中,已经完全是5.0的UI设计风格了。至于为什么是深色的主题,是因为之前在AndroidMenifest.xml中设置了Theme.AppCompat.NoActionBar。换言之,如果我们设置成Theme.AppCompat.Light.NoActionBar,则会呈现浅色的主题。


下面切换到代码视图。对于ActionBar,我们无需关心在xml布局中的位置,只需要在Java代码中进行设置即可。而对于ToolBar,是要求我们自己写到Layout(布局xml)中的。这也就意味着它可以出现在任意一个我们希望它出现的位置,甚至能够同时存在多个ToolBar,并且互不干扰(参考多个ImageView,或者多个TextView等等)。

我们可以通过创建android.support.v7.widget.Toolbar控件来显示自定义的Toolbar,参考下面的代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res/com.xwh.toolbardemo"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.xwh.toolbardemo.MainActivity" >    <android.support.v7.widget.Toolbar        android:id="@+id/demo_toolbar"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="?attr/colorPrimary"        android:minHeight="?attr/actionBarSize"        app:title="@string/hello_world" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/demo_toolbar"        android:text="@string/hello_world" /></RelativeLayout>
关于Toolbar的可用属性,这里不多做赘述,大家可以去安卓开发者官网自行搜索API。

到此,这个Toolbar已经可以正常显示了,并且其标题为“Hello World”。而且诸位可以发现,从Toolbar的创建到显示,我们还没有写过一句Java代码。

下面放上运行效果截图:



在下一篇博文中,我们将集中介绍如何使用Toolbar,结合ViewPager,实现类似微信的滑动切换多视图效果。

3 0
原创粉丝点击