Android UI学习系列－ActionBar你最熟悉却又陌生的她（上篇）

这是自己踏入博客的第一篇文章，犹豫许久，却不知从何处谈起，也许这就是平时脑海中浮现很多的知识与灵感，但是当需要将其提炼并且清晰的表达给别人时却感到困难重重，无法清楚的表达，脑中所想只有付诸于实践才能变得更有价值。

 

开始之时，觉得Android很浅显，很容易入门，无需几行代码便可成型一个运行的程序，但是当静下心来研读之时，才发现Android的深邃，想学好Android绝不是一件容易的事情，在此希望分享一些自己学习中遇到的困难，并分享给大家，希望能和大家一起交流进步

 

闲话说了一大堆，接下来该步入正题了，今天想跟大家分享的是一个在各种应用中极其常见的控件，或者更为标准应该称其为风格，她就是ActionBar（如下图）

                                                       

大家是否觉得她是那么的熟悉呢，几乎每款应用中都会出现她的身影，前面说到她是一种控件，之前我在实现这么个导航栏时，也确实是将她当作控件的堆叠（例如下面的这段代码－简化版）

<LinearLayout>

<Button/>

<Button/>

<Button/>

</LinearLayout>

注：这里只需控制布局的水平摆放，并调整每个子控件的位置即可。

这样确实达到了上面图片中的效果，但是这样做，我们将花费大量的时间在控件的对齐以及摆放的整齐和美观程度上，Android显然并不希望我们这样去耗费精力，所以他提供给我们一种非常方便的ActionBar来达到我们想要的效果，他被封装为一种风格属性来供我们使用，当我们的应用使用了这样风格时便可通过相应的操作来实现和控制她。

其实实现这个风格只需如下简单的几步－教科书般的步骤：

1.添加v7appcompat support library 到你的工程。

2.让你的应用程序继承AppCompatActivity(来兼容低版本)。

3.在你想要实现ActionBar的地方加入如下风格：

<application

android:theme="@style/Theme.AppCompat.Light.DarkActionBar"

/>

注：要不想整个应用都实现ActionBar也可以只在个别Activity中加入该风格。

4.这样你就有了一个基本的ActionBar的模子，现在我们只需要往上面加入自己需要的ActionButton即可，如下代码可添加一个搜索Button到ActionBar 中：

<item

android:id="@+id/action_search"

android:title="search"

android:icon="@drawable/abc_ic_search_api_mtrl_alpha"

app:showAsAction="ifRoom"/>  <!--这个属性是表示是否显示到ActionBar-->

注：添加按钮要到res/menu文件下。

5.添加完Button后就要处理点击事件了，在Activity中有两个方法是用来载入和处理点击事件的她们分别是：

public boolean onCreateOptionsMenu(Menu menu) //用来载入menu

public booleanonOptionsItemSelected(MenuItem item) //用来处理menu的点击事件

说到这里，我们已经可以实现上面图片中所显示的效果了，那我们就止步于此了吗？

 

of course not,Android提供给我们这么一种使用风格，而具体的使用我们可以根据我们实际需要来个性化的定制我们的ActionBar，下面我们来make some difference，日常应用的使用中，搜索框的使用频率十分的高，通常我们实现一个搜索框可能会是一个EditText和Button的组合，稍微灵活一点呢，我们可以利用Android提供的SearchView来实现，但是我们可否结合SearchView来应用于我们ActionBar中的搜索呢？答案是肯定的，首先来看看我们将要实现的效果：

                                                       

将我们的搜索按钮实现SearchView的效果，我们只需要利用ActionBar为我们提供的一个属性，修改如下代码：

<item

android:id="@+id/action_search"

android:title="search"

android:icon="@drawable/abc_ic_search_api_mtrl_alpha"

app:showAsAction="ifRoom｜collapseActionView"<!--增加了伸缩属性-->

app:actionViewClass="android.support.v7.widget.SearchView"<!--搜索-->

/>

这样就可以在ActionBar 中实现可延展收缩的搜索框了，但是总是说人家给了我模版，我有自己的需求呀，我想要个性一点的样式怎么办？下面我们就需要仔细了解一下SearchView的构成，并找到方法去自定义自己的SearchView.

首先我们先要知道SearchView 代表的是一个布局，这个布局中包含了如上图所示的返回按钮，左侧搜索图标，还有搜索输入区域，当然还有当有文字输入时的清空按钮，以及隐藏的确认搜索的按钮，这些SearchView本身所提供给我们的view也许并不是我们期望中的那样，那么我们怎样才能改变它们呢？

通常我们的思路是这样的，当我们想要改变某个view控件的属性时，我们首先要通过findViewById的方法来找到这个控件，然后通过它自身提供的相应的方法来改变它，但是在这里我们怎么获取到SearchView 的控件呢？他是系统定义的我们又不知道他的控件ID是什么？诶？不对呀，你是怎么知道SearchView包含这些控件的？

想来大家也知道了，自然是找到了SearchView的布局文件，我是如何找到它的呢？这其中还是遇到了很多坎。

 

起初我想通过自定义主题来更改ActionBar的SearchView的属性，但是试了之后并没有效果，看来这条路是行不通的，但是尝试并没有白费，通过SearchView主题的父主题我找到了的Widget.AppCompat.SearchView，然后找到了他的父主题Base.Widget.AppCompat.SearchView，通过这个父主题找到了如下代码

<item name="layout">@layout/abc_search_view</item>

没错这就是SearchView的布局文件，打开之后便可找到我们想要的答案，现在的问题就很简单了，我们只需要在ActionBar创建时，获取到SearchView通过它来获取他其中的控件并修改他们的样式。

1.通过如下代码获取到SearchView的对象实例。

MenuItem searchItem=menu.findItem(R.id.action_search);

final SearchView searchView=(SearchView)MenuItemCompat.getActionView(searchItem);

2.可以利用SearchView来设置一些属性，例如是否显示确认按钮。

3.接下来我们就来完成我们的自定义样式，我们通过SearchView来得到想要修改View的ID,

LinearLayoutsearchButton=(LinearLayout)searchView.findViewById(R.id.search_edit_frame);//得到修改View的父布局

((ImageView)searchButton.getChildAt(0)).setImageResource(R.drawable.background);//找到子布局并修改其属性，这样我们就可以将自己设计的样式加入到SearchView中去，这里只是修改了确认按钮的图片样式，想要修改其他的样式可参照上述方法寻找其所在的布局进行修改。

4.SearchView还提供给我们判断展开收缩时的监听事件，也有搜索时的监听事件来让我们来控制整个SearchView。

MenuItemCompat.setOnActionExpandListener（searchitem，listener）//伸缩监听

searchView.setOnQueryTextListener（）//搜索监听

 

到此我们就实现了带有自定义搜索的ActionBar了，我们也可以继续添加Button，并且更换更多样式，希望和大家继续交流学习，共同成长，终于搞定了自己的第一篇博客，小兴奋一下～