高仿易信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，到這就結束了