android5.0+(Toolbar)

来源：互联网发布：arp软件是个什么软件编辑：程序博客网时间：2024/05/16 01:53

Toolbar

Toolbar是什么？大概说一下它的官方介绍。Toolbar是应用的内容的标准工具栏，可以说是Actionbar的升级版，两者不是独立关系，要使用Toolbar还是得跟ActionBar扯上关系的。相比Actionbar Toolbar最明显的一点就是变得很自由，可随处放置，因为它是作为一个ViewGroup来定义使用的，所以单纯使用ActionBar已经稍显过时了，它的一些方法已被标注过时。

那么它怎么使用呢，首先我们一样要用到v7的支持包，然后定义程序的主题样式，在style里得先把Actionbar去掉，有点像欲想练功，必先自宫的感觉啊。如下：

/res/values/styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- toolbar（actionbar）颜色 -->        <item name="colorPrimary">#4876FF</item>        <!-- 状态栏颜色 -->        <item name="colorPrimaryDark">#3A5FCD</item>        <!-- 窗口的背景颜色 -->        <item name="android:windowBackground">@android:color/white</item>        <!-- SearchView -->        <item name="searchViewStyle">@style/MySearchViewStyle</item>    </style>    <style name="AppTheme" parent="@style/AppBaseTheme"></style>    <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">        <!--    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></resources>

去除Actionbar最简单的方法就是直接继承NoActionBar的主题了。颜色的属性说明，还是下面这张图最清楚了：

另外，SearchView在AppCompat中提供了更强的可定制性和更多的样式可供设置，不过一般我们用默认的就行。

还有我们可以在values-v21给API21的系统版本设置默认的底部导航栏默认的颜色：

/res/values-v21/styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">    <style name="AppTheme" parent="@style/AppBaseTheme">        <!-- 底部导航栏颜色 -->        <item name="android:navigationBarColor">#4876FF</item>    </style></resources>

我们把toolbar作为一个独立的布局xml，方便在其他布局里include进去。可以看到我们在这里是可以设置Toolbar的属性的，初上面的外还有以下的属性，都是见名知意的就不一一说明了。

然后在activity的布局里把它include进去就行了，当然一般把它放到最上面了，有需要你是可以把它放到中间、底部或其它位置的，可见它的自由度是很高的。在下一步呢就到代码了，在onCreate中：

mToolbar = (Toolbar) findViewById(R.id.toolbar);// toolbar.setLogo(R.drawable.ic_launcher);mToolbar.setTitle("Rocko");// 标题的文字需在setSupportActionBar之前，不然会无效// toolbar.setSubtitle("副标题");setSupportActionBar(mToolbar);/* 这些通过ActionBar来设置也是一样的，注意要在setSupportActionBar(toolbar);之后，不然就报错了 */// getSupportActionBar().setTitle("标题");// getSupportActionBar().setSubtitle("副标题");// getSupportActionBar().setLogo(R.drawable.ic_launcher);/* 菜单的监听可以在toolbar里设置，也可以像ActionBar那样，通过Activity的onOptionsItemSelected回调方法来处理 */mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem item) {switch (item.getItemId()) {case R.id.action_settings:Toast.makeText(MainActivity.this, "action_settings", 0).show();break;case R.id.action_share:Toast.makeText(MainActivity.this, "action_share", 0).show();break;default:break;}return true;}});

上面关键的一点就是setSupportActionBar(mToolbar);把Toolbar当做ActionBar给设置了。menu还是可以像ActionBar一样用和处理的：

res/menu/main.xml

<menu 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"    tools:context=".MainActivity" >    <item        android:id="@+id/ab_search"        android:orderInCategory="80"        android:title="action_search"        app:actionViewClass="android.support.v7.widget.SearchView"        app:showAsAction="ifRoom"/>    <item        android:id="@+id/action_share"        android:orderInCategory="90"        android:title="action_share"        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"        app:showAsAction="ifRoom"/>    <item        android:id="@+id/action_settings"        android:orderInCategory="100"        android:title="action_settings"        app:showAsAction="never"/></menu>

这一步时候程序的样子：

可以感觉到这样是不是和ActionBar没什么区别呢。诶，左边的菜单图标怎么出来的呢，其实上面还没处理到，他就是Navigation drawer了，使用新版本的v4、v7库的drawer明显的一点是它带了一个酷酷的交互动画（请看最后的gif图）。那么使用Toolbar之后又怎么去在Toolbar中使用drawer呢。下面当然也是跟着代码来.

/layout/activity_main.xml

<LinearLayout 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"    android:orientation="vertical"    tools:context="com.example.toolbar.MainActivity" >    <include layout="@layout/toolbar" />    <android.support.v4.widget.DrawerLayout        android:id="@+id/drawer"        android:layout_width="match_parent"        android:layout_height="match_parent" >        <!-- 内容界面 -->        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="vertical" >            <com.example.toolbar.widget.PagerSlidingTabStrip                android:id="@+id/tabs"                android:layout_width="match_parent"                android:layout_height="48dip" >            </com.example.toolbar.widget.PagerSlidingTabStrip>            <android.support.v4.view.ViewPager                android:id="@+id/pager"                android:layout_width="match_parent"                android:layout_height="match_parent" >            </android.support.v4.view.ViewPager>        </LinearLayout>        <!-- 侧滑菜单内容 -->        <LinearLayout            android:id="@+id/drawer_view"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_gravity="start"            android:background="@drawable/drawer"            android:orientation="vertical"            android:padding="8dp" >            <TextView                android:layout_width="match_parent"                android:layout_height="match_parent" />        </LinearLayout>    </android.support.v4.widget.DrawerLayout></LinearLayout>

Pager的东西可以先忽略，后面会说到。侧滑菜单的内容为简单起见直接先用图片来演示了。可以看到布局的设置大同小异，不同点在代码中：

getSupportActionBar().setDisplayHomeAsUpEnabled(true);mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,R.string.drawer_close);mDrawerToggle.syncState();mDrawerLayout.setDrawerListener(mDrawerToggle);

先把图标设置显示出来，然后把ActionBarDrawerToggle作为DrawerLayout的监听器设置进去，还是比较简单的，效果：

要是需要把drawer覆盖toolbar怎么办呢？需要稍微调整一下界面的布局位置就行了，效果就不贴上来了(脑补，或者改下源码的setContentView运行)：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/drawer"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        tools:context="com.example.toolbar.MainActivity" >        <include layout="@layout/toolbar" />        <!-- 内容界面 -->        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="@drawable/content"            android:orientation="vertical" >            <com.example.toolbar.widget.PagerSlidingTabStrip                android:id="@+id/tabs"                android:layout_width="match_parent"                android:layout_height="48dip"                android:visibility="invisible" >            </com.example.toolbar.widget.PagerSlidingTabStrip>            <android.support.v4.view.ViewPager                android:id="@+id/pager"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:visibility="invisible" >            </android.support.v4.view.ViewPager>        </LinearLayout>    </LinearLayout>    <!-- 侧滑菜单内容 -->    <LinearLayout        android:id="@+id/drawer_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="start"        android:background="@drawable/drawer"        android:orientation="vertical"        android:clickable="true"        android:padding="8dp" >        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent" />    </LinearLayout></android.support.v4.widget.DrawerLayout>

Demo源码下载地址：http://download.csdn.net/detail/bbld_/8191251

依赖库android-support-v7-appcompat.rar with Palette ： http://download.csdn.net/detail/bbld_/8382913

原文地址：http://blog.csdn.net/bbld_/article/details/41439715#

0 0