高仿易信UI之自定义ActionBar

本文效果图如下红线部分：

 

1、   在styles.xml文件中自定义主题，自定义的主题一定要有parent

 <style name="CustomTheme" parent="android:style/Theme.Holo.Light">   
       <!-- 用于设置item点击后背景
        <item name="android:selectableItemBackground">@drawable/itembg</item>-->
        
        <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
        <item name="android:actionBarTabTextStyle">@style/MyActionBarTabTextStyle</item>
</style>


    <!-- Tab选项标签的样式 -->
    <style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabView">
        <item name="android:background">@drawable/actionbar_tab_bg</item>
        <item name="android:paddingLeft">22dp</item>
        <item name="android:paddingRight">22dp</item>
    </style>


    <!-- Tab选项标签字体的样式 -->
    <style name="MyActionBarTabTextStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabText">        
        <item name="android:textColor">@drawable/text_color</item>
        <item name="android:textSize">12sp</item>   
    </style>

actionbar_tab_bg.xml，用于设置actionbar的背景图片

<?xml version="1.0" encoding="utf-8"?>
<selector  xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item  android:state_selected="true" android:drawable="@drawable/selected"/>
    <item  android:state_selected="false" android:drawable="@drawable/transparent_bg"/>
</selector>
    

text_color.xml，用于设置actionbar文本颜色

<?xml version="1.0" encoding="utf-8"?>
<selector  xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item  android:state_selected="true" android:color="#33B5E5"/>
    <item  android:state_selected="false" android:color="#000000"/>
</selector>
    

2、   在AndroidManifest.xml文件中设置主题为自定义的主题

 <application      
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"      
        android:theme="@style/CustomTheme">

3、   设置易信灰色 icon以及背景图

actionBar.setIcon(this.getResources().getDrawable(R.drawable.none_message_icon));
actionBar.setBackgroundDrawable(this.getResources().getDrawable(R.drawable.transparent_bg));

4、   创建选项菜单增加  搜索和添加视图

先在java代码中重写如下方法

  @Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" >


    <item
        android:id="@+id/search"     
        android:showAsAction="always|collapseActionView"
        android:title="@string/search"
        android:icon="@drawable/search"
        android:actionViewClass="android.widget.SearchView"/>
   
    <item
        android:id="@+id/add"     
        android:showAsAction="always"
        android:title="@string/add"
        android:icon="@drawable/add">        
        
    </item>
</menu>

OK，到这就结束了