日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

【Android UI設(shè)計(jì)與開(kāi)發(fā)】第13期：自定義ActionBar風(fēng)格和樣式

 蠢驢不笨驢不蠢 2014-04-05

這篇文章將對(duì)ActionBar專題前面幾篇學(xué)習(xí)過(guò)的內(nèi)容做一個(gè)總結(jié)，順便運(yùn)用以前學(xué)過(guò)的知識(shí)實(shí)現(xiàn)一個(gè)自定義樣式的ActionBar標(biāo)題欄效果。話不多說(shuō)，進(jìn)入今天的正題。


一、實(shí)現(xiàn)效果圖

豎屏效果圖：最左邊是Logo圖標(biāo)，右邊是工具欄按鈕，點(diǎn)擊Menu鍵顯示其余的按鈕鍵，下方是Tab標(biāo)簽選項(xiàng)。





橫屏效果圖：豎屏中的Tab選項(xiàng)標(biāo)簽變成了中間的下拉導(dǎo)航按鈕







二、項(xiàng)目結(jié)構(gòu)圖



三、編碼準(zhǔn)備工作

先來(lái)學(xué)習(xí)一下自定義樣式的基礎(chǔ)知識(shí)，以便大家能看懂關(guān)于后面的代碼。

1、設(shè)置操作欄的樣式

       如果你對(duì)應(yīng)用程序中的可視構(gòu)件進(jìn)行了定制化的設(shè)計(jì)，那么你可能也會(huì)要對(duì)操作欄做一些重新設(shè)計(jì)，以便跟應(yīng)用程序的設(shè)計(jì)匹配。要這樣做的話，需要使用Android的樣式與主題框架中的一些特殊的樣式屬性來(lái)重新設(shè)置操作欄的樣式。

       注意：改變外觀的背景圖片依賴與當(dāng)前按鈕的狀態(tài)（選擇、按下、解除選擇），因此你使用的可描畫的資源必須是一個(gè)可描畫的狀態(tài)列表。

       警告：對(duì)于你提供的所有可描畫的背景，要確保使用NinePatch類型可描畫資源，以便允許圖片的拉伸。NinePatch類型的圖片應(yīng)該比40像素高30像素寬的圖片要小。


2、普通的外觀

android:windowActionBarOverlay

      這個(gè)屬性聲明了操作欄是否應(yīng)該覆蓋Activity布局，而不是相對(duì)Activity的布局位置的偏移。這個(gè)屬性的默認(rèn)值是false。

      通常，在屏幕上，操作欄需要它自己的空間，并且把剩下的空間用來(lái)填充Activity的布局。當(dāng)操作欄四覆蓋模式時(shí)，Activity會(huì)使用所有的有效空間，系統(tǒng)會(huì)在Activity的上面描畫操作欄。如果你想要在操作欄隱藏和顯示時(shí)，布局中的內(nèi)容保持固定的尺寸好位置，那么這種覆蓋模式是有用的。你也可能只是為了顯示效果來(lái)使用它，因?yàn)槟憧梢越o操作欄設(shè)置半透明的背景，以便用戶依然能夠看到操作欄背后的Activity布局。

       注意：默認(rèn)情況下，Holo主題會(huì)用半透明背景來(lái)描畫操作欄。但是，你能夠用自己的樣式來(lái)修改它，并且默認(rèn)的情況下，DeviceDefault主題在不同的設(shè)備上可能使用不透明的背景。

       覆蓋模式被啟用時(shí)，Activity布局不會(huì)感知到操作欄覆蓋在它的上面，因此，在操作欄覆蓋的區(qū)域，最好不要放置一些重要的信息或UI組件。如果適合，你能夠引用平臺(tái)的actionBarSize值來(lái)決定操作欄的高度，例如，在XML布局文件中引用這個(gè)值。

  1. <SomeView
  2.     ...
  3.     android:layout_marginTop="?android:attr/actionBarSize" />
復(fù)制代碼
你還能夠用getHeight()方法在運(yùn)行時(shí)獲取操作欄的高度。如果在Activity生存周期的早期調(diào)用這個(gè)方法，那么在調(diào)用時(shí)所反映的操作欄的高度可能不包括被堆放的操作欄（因?yàn)閷?dǎo)航選項(xiàng)標(biāo)簽）。要看如何在運(yùn)行時(shí)判斷操作欄總的高度（包括被堆放的操作欄），請(qǐng)看Honeycomb Gallery示例應(yīng)用中的TitlesFragment類。

3、操作項(xiàng)元素
android:actionButtonStyle給操作項(xiàng)按鈕定義樣式資源。android:actionBarItemBackground 給每個(gè)操作項(xiàng)的背景定義可描畫資源（被添加在API 級(jí)別 14中）。android:itemBackground 給每個(gè)懸浮菜單項(xiàng)的背景定義可描畫資源。android:actionBarDivider給操作項(xiàng)之間的分隔線定義可描畫資源（被添加在API 級(jí)別 14中）android:actionMenuTextColor給顯示在操作項(xiàng)中文本定義顏色。android:actionMenuTextAppearance 給顯示在操作項(xiàng)中文本定義樣式資源。android:actionBarWidgetTheme給作為操作視窗被填充到操作欄中的可視構(gòu)件定義主題資源（被添加在API級(jí)別14中）。
4、導(dǎo)航選項(xiàng)標(biāo)簽
android:actionBarTabStyle 給操作欄中的選項(xiàng)標(biāo)簽定義樣式資源。android:actionBarTabBarStyle給顯示在導(dǎo)航選項(xiàng)標(biāo)簽下方的細(xì)條定義樣式資源。android:actionBarTabTextStyle給導(dǎo)航選項(xiàng)標(biāo)簽中的文本定義樣式資源。
5、下拉列表
android:actionDropDownStyle 給下拉導(dǎo)航列表定義樣式（如背景和文本樣式）。如，下例XML文件中給操作欄定義了一些定制的樣式：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <!-- the theme applied to the application or activity -->
  4.     <style name="CustomActivityTheme" parent="@android:style/Theme.Holo">
  5.         <item name="android:actionBarTabTextStyle">@style/CustomTabTextStyle</item>
  6.         <item name="android:actionBarDivider">@drawable/ab_divider</item>
  7.         <item name="android:actionBarItemBackground">@drawable/ab_item_background</item>
  8.     </style>

  10.     <!-- style for the action bar tab text -->
  11.     <style name="CustomTabTextStyle" parent="@android:style/TextAppearance.Holo">
  12.         <item name="android:textColor">#2456c2</item>
  13.     </style>
  14. </resources>
復(fù)制代碼
注意：一定要在<style>標(biāo)簽中聲明一個(gè)父主題，這樣定制的主題可以繼承所有沒(méi)有明確聲明的樣式。在修改操作欄樣式時(shí)，使用父主題是至關(guān)重要的，它會(huì)讓你能夠簡(jiǎn)單的覆寫你想要改變的操作欄樣式，而不影響你不想修改的樣式（如文本的外觀或操作項(xiàng)的邊緣）。      你能夠在清單文件中把定制的主題應(yīng)用到整個(gè)應(yīng)用程序或一個(gè)單獨(dú)的Activity對(duì)象，如：
  1. <application android:theme="@style/CustomActivityTheme" ... />
復(fù)制代碼
6、高級(jí)樣式      如果需要比上述屬性更高級(jí)的樣式，可以在Activity的主題中包含android:actionBarStyle和android:actionBarSplitStyle屬性。這兩個(gè)屬性的每一個(gè)都指定了另一種能夠給操作欄定義各種屬性的樣式，包括帶有android:background、android:backgroundSplit、android:backgroundStacked屬性的不同背景。如果要覆蓋這些操作欄樣式，就要確保定義一個(gè)像Widget.Holo.ActionBar這樣的父操作欄樣式。例如，如果要改變操作欄背景，你可以使用下列樣式：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <!-- the theme applied to the application or activity -->
  4.     <style name="CustomActivityTheme" parent="@android:style/Theme.Holo">
  5.         <item name="android:actionBarStyle">@style/MyActionBar</item>
  6.         <!-- other activity and action bar styles here -->
  7.     </style>

  9.     <!-- style for the action bar backgrounds -->
  10.     <style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar">
  11.         <item name="android:background">@drawable/ab_background</item>
  12.         <item name="android:backgroundStacked">@drawable/ab_background</item>
  13.         <item name="android:backgroundSplit">@drawable/ab_split_background</item>
  14.     </style>
  15. </resources>
復(fù)制代碼
四、詳細(xì)代碼編寫 1、整個(gè)項(xiàng)目中最核心的地方就是在res/values下的styles.xml文件中，這是自定義風(fēng)格樣式的資源文件，styles.xml：
  1. <resources xmlns:android="http://schemas./apk/res/android">

  3.     <style name="AppBaseTheme" parent="android:Theme"></style>

  5.     <!-- 將自定義的style取名為CustomTheme，父類為Theme.Holo.Light，也就是說(shuō)默認(rèn)背景是白底黑字（如果是Theme.Holo，則默認(rèn)是黑底白字） -->
  6.     <style name="CustomTheme" parent="android:style/Theme.Holo.Light">
  7.         <!-- 這是item的背景修改，不按時(shí)透明，按時(shí)顯示綠色  -->
  8.         <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
  9.         <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
  10.         <item name="android:actionBarTabTextStyle">@style/MyActionBarTabTextStyle</item>
  11.                 <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>   
  12.         <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>      
  13.     </style>

  15.     <!-- Tab選項(xiàng)標(biāo)簽的樣式 -->
  16.     <style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabView">
  17.         <item name="android:background">@drawable/actionbar_tab_bg</item>
  18.         <item name="android:paddingLeft">22dp</item>
  19.         <item name="android:paddingRight">22dp</item>
  20.     </style>

  22.     <!-- Tab選項(xiàng)標(biāo)簽字體的樣式 -->
  23.     <style name="MyActionBarTabTextStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabText">        
  24.         <item name="android:textColor">#ff0000</item>
  25.         <item name="android:textSize">12sp</item>   
  26.     </style>

  28.     <!-- 下拉導(dǎo)航外部按鈕的樣式 -->
  29.     <style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner">
  30.         <item name="android:background">@drawable/ad_spinner_background_holo_light</item>
  31.         <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>
  32.         <item name="android:dropDownSelector">@drawable/ad_selectable_background</item>
  33.     </style>
  34.    
  35.      <!-- 下拉導(dǎo)航內(nèi)部按鈕的樣式 -->
  36.      <style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
  37.         <item name="android:listSelector">@drawable/ad_selectable_background</item>
  38.     </style>
  39.    
  40. </resources>
復(fù)制代碼
2、定義好了之后，在AndroidManifest.xml清單文件中使用，可以在application中使用，這樣就會(huì)作用于每一個(gè)Activity，也可以在每一個(gè)單獨(dú)的Activity中使用，AndroidManifest.xml：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas./apk/res/android"
  3.     package="com.yangyu.myactionbar05"
  4.     android:versionCode="1"
  5.     android:versionName="1.0" >

  7.     <uses-sdk
  8.         android:minSdkVersion="11"
  9.         android:targetSdkVersion="14" />

  11.     <application
  12.         android:allowBackup="true"
  13.         android:icon="@drawable/ic_launcher"
  14.         android:label="@string/app_name"
  15.         android:logo="@drawable/xianjian_logo"
  16.         android:theme="@style/CustomTheme" >
  17.         
  18.         <activity
  19.             android:name="com.yangyu.myactionbar05.MainActivity"
  20.             android:label="@string/app_name">
  21.             <intent-filter>
  22.                 <action android:name="android.intent.action.MAIN" />
  23.                 <category android:name="android.intent.category.LAUNCHER" />
  24.             </intent-filter>
  25.         </activity>
  26.         
  27.     </application>

  29. </manifest>
復(fù)制代碼
3、新建一個(gè)drawable文件夾，在文件夾下再定義幾個(gè)資源文件：<1> 用于tab選項(xiàng)標(biāo)簽背景的修改， actionbar_tab_bg.xml：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas./apk/res/android">

  4.     <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/ad_tab_unselected_holo" />
  5.     <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/ad_tab_selected_pressed_holo" />
  6.     <item android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/ad_tab_selected_pressed_holo" />
  7.     <item android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/ad_tab_selected_pressed_holo" />

  9. </selector>

復(fù)制代碼
<2> ActionBar標(biāo)題欄的背景漸變色，actionbar_gradient_bg.xml：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas./apk/res/android"
  3.     android:shape="rectangle" >

  5.     <gradient
  6.         android:angle="270"
  7.         android:endColor="#FFEFEFEF"
  8.         android:startColor="#cc1115"
  9.         android:type="linear" />

  11. </shape>
復(fù)制代碼
<3> 用于下拉列表背景的變換，ad_spinner_background_holo_light.xml：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas./apk/res/android">

  4.     <item android:drawable="@drawable/spinner_disabled_holo_light" android:state_enabled="false"/>
  5.     <item android:drawable="@drawable/ad_spinner_pressed_holo_light" android:state_pressed="true"/>
  6.     <item android:drawable="@drawable/ad_spinner_focused_holo_light" android:state_focused="true" android:state_pressed="false"/>
  7.     <item android:drawable="@drawable/spinner_default_holo_light"/>

  9. </selector>
復(fù)制代碼
<4> ActionBar標(biāo)題欄上的按鈕選中時(shí)的背景顏色切換，selected_background.xml：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas./apk/res/android"
  3.     android:shape="rectangle" >

  5.     <solid android:color="#FFA4C639" />

  7. </shape>
復(fù)制代碼
ad_selectable_background.xml：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas./apk/res/android" android:exitFadeDuration="@android:integer/config_mediumAnimTime">

  4.     <item android:drawable="@drawable/selected_background" android:state_pressed="true"/>
  5.     <item android:drawable="@android:color/transparent"/>

  7. </selector>
復(fù)制代碼
4、菜單的資源文件，main_menu.xml：
  1. <menu xmlns:android="http://schemas./apk/res/android" >

  3.     <!-- 自定義搜索按鈕視圖 -->
  4.     <item
  5.         android:id="@+id/menu_search"
  6.         android:actionViewClass="android.widget.SearchView"
  7.         android:showAsAction="ifRoom"
  8.         android:title="@string/action_label_search"/>

  10.     <!-- 刷新按鈕圖標(biāo) -->
  11.     <item
  12.         android:id="@+id/menu_refresh"
  13.         android:icon="@drawable/ic_menu_refresh_holo_light"
  14.         android:showAsAction="ifRoom"
  15.         android:title="@string/action_label_refresh"/>

  17.     <!-- 收藏按鈕圖標(biāo)加文字 -->        
  18.     <item
  19.         android:id="@+id/menu_collected"
  20.         android:icon="@drawable/ic_menu_star_holo_light"
  21.         android:showAsAction="ifRoom|withText"
  22.         android:title="@string/action_label_collected"/>

  24. </menu>
復(fù)制代碼
這里的資源文件有點(diǎn)多，為了節(jié)省篇幅，講解重點(diǎn)和難點(diǎn)，博主這里就不一一列出來(lái)了，有需要的同學(xué)可以看源碼，一目了然。

5、主Activity程序入口類，MainActivity.java：
  1. package com.yangyu.myactionbar05;

  3. import android.app.ActionBar;
  4. import android.app.Activity;
  5. import android.os.Bundle;
  6. import android.os.Handler;
  7. import android.view.Menu;
  8. import android.view.MenuItem;

  10. /**
  11. * @author yangyu
  12. *        主Activity，程序入口類
  13. */
  14. public class MainActivity extends Activity {
  15.         //定義ActionBar
  16.         private ActionBar actionBar;
  17.        
  18.         //定義Handler對(duì)象
  19.         private final Handler handler = new Handler();

  21.         @Override
  22.         protected void onCreate(Bundle savedInstanceState) {
  23.                 super.onCreate(savedInstanceState);
  24.                 setContentView(R.layout.activity_main);
  25.                
  26.                 initView();
  27.                
  28.                 initData();
  29.         }

  31.         /**
  32.          * 初始化組件
  33.          */
  34.         private void initView(){
  35.                 //得到ActionBar
  36.                 actionBar = getActionBar();
  37.         }
  38.        
  39.         /**
  40.          * 初始化數(shù)據(jù)
  41.          */
  42.         private void initData(){
  43.                 //設(shè)置ActionBar標(biāo)題不顯示
  44.                 actionBar.setDisplayShowTitleEnabled(false);
  45.                
  46.                 //設(shè)置ActionBar的背景
  47.                 actionBar.setBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar_gradient_bg));
  48.                
  49.                 //設(shè)置ActionBar左邊默認(rèn)的圖標(biāo)是否可用
  50.                 actionBar.setDisplayUseLogoEnabled(true);
  51.                
  52.                 //設(shè)置導(dǎo)航模式為Tab選項(xiàng)標(biāo)簽導(dǎo)航模式
  53.                 actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
  54.                
  55.                 //設(shè)置ActinBar添加Tab選項(xiàng)標(biāo)簽
  56.                 actionBar.addTab(actionBar.newTab().setText("TAB1").setTabListener(new MyTabListener<FragmentPage1>(this,FragmentPage1.class)));
  57.                 actionBar.addTab(actionBar.newTab().setText("TAB2").setTabListener(new MyTabListener<FragmentPage2>(this,FragmentPage2.class)));
  58.                 actionBar.addTab(actionBar.newTab().setText("TAB3").setTabListener(new MyTabListener<FragmentPage3>(this,FragmentPage3.class)));
  59.                                
  60.         }
  61.        
  62.         @Override
  63.         public boolean onCreateOptionsMenu(Menu menu) {
  64.                 getMenuInflater().inflate(R.menu.main_menu, menu);       
  65.                 return true;
  66.         }

  68.         @Override
  69.         public boolean onOptionsItemSelected(final MenuItem item) {
  70.                 switch (item.getItemId()) {
  71.                 case R.id.menu_refresh:
  72.                         //選中刷新按鈕后刷新一秒鐘
  73.                         item.setActionView(R.layout.actionbar_progress);
  74.                         handler.postDelayed(new Runnable() {
  75.                                 public void run() {
  76.                                         item.setActionView(null);
  77.                                 }
  78.                         }, 1000);
  79.                         return true;
  80.                 }
  81.                 return super.onOptionsItemSelected(item);
  82.         }
  83.        
  84. }

復(fù)制代碼
6、Tab選項(xiàng)標(biāo)簽監(jiān)聽(tīng)接口類，MyTabListener.java：
  1. package com.yangyu.myactionbar05;

  3. import android.app.ActionBar.Tab;
  4. import android.app.ActionBar.TabListener;
  5. import android.app.Activity;
  6. import android.app.Fragment;
  7. import android.app.FragmentTransaction;

  9. /**
  10. * @author yangyu
  11. *  功能描述：Tab選項(xiàng)標(biāo)簽監(jiān)聽(tīng)接口
  12. */
  13. public class MyTabListener<T extends Fragment> implements TabListener {
  14.         private Fragment fragment;
  15.        
  16.         private final Activity mActivity;
  17.        
  18.         private final Class<T> mClass;
  19.        
  20.         public MyTabListener(Activity activity, Class<T> clz){
  21.                 mActivity = activity;  
  22.                
  23.                 mClass = clz;
  24.         }
  25.        
  26.         @Override
  27.         public void onTabSelected(Tab tab, FragmentTransaction ft) {
  28.                 if(fragment == null){
  29.                         fragment = Fragment.instantiate(mActivity, mClass.getName());
  30.                         ft.add(android.R.id.content, fragment, null);        
  31.                 }
  32.                 ft.attach(fragment);  
  33.         }

  35.         @Override
  36.         public void onTabUnselected(Tab tab, FragmentTransaction ft) {
  37.                 if (fragment != null) {
  38.                         ft.detach(fragment);
  39.                 }
  40.         }

  42.         @Override
  43.         public void onTabReselected(Tab tab, FragmentTransaction ft) {
  44.                
  45.         }
  46. }

復(fù)制代碼
7、Fragment類，用于顯示Tab選項(xiàng)標(biāo)簽的內(nèi)容，列出其中一個(gè)，F(xiàn)ragmentPage1.java：
  1. package com.yangyu.myactionbar05;

  3. import android.app.Fragment;
  4. import android.os.Bundle;
  5. import android.view.LayoutInflater;
  6. import android.view.View;
  7. import android.view.ViewGroup;

  9. public class FragmentPage1 extends Fragment{

  11.         @Override
  12.         public View onCreateView(LayoutInflater inflater, ViewGroup container,
  13.                         Bundle savedInstanceState) {
  14.                
  15.                 return inflater.inflate(R.layout.fragment_1, null);               
  16.         }       
  17. }

復(fù)制代碼
關(guān)于ActionBar的內(nèi)容總結(jié)到這里差不多就要結(jié)束了，今后如果有什么關(guān)于ActionBar好玩好用的東西再拿出來(lái)更大家一起分享、總結(jié)和交流。在這里博主希望大家能積極評(píng)論，指出文中的不足和錯(cuò)誤的地方，博主一定第一時(shí)間改正和完善。謝謝支持！下一篇開(kāi)始會(huì)講解自定義的頂部標(biāo)題欄，敬請(qǐng)期待！ MyActionBar05.zip (7.77 MB, 下載次數(shù): 2013)




    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多