修改Actionbar的样式

本例几乎涵盖了有关Actionbar的所有操作,由于前面介绍过tabs和item,这里重点介绍Actionbar的样式修改,需要源工程的请在资源里下载styleactionbar。更多请阅读http://android-developers.blogspot.com/2011/04/customizing-action-bar.html

1、首先准备一个RoundedColourFragment,前面介绍过各部分的作用,这里就不赘述。

view plain
  1. import android.app.Fragment;  
  2. import android.graphics.drawable.GradientDrawable;  
  3. import android.os.Bundle;  
  4. import android.view.LayoutInflater;  
  5. import android.view.View;  
  6. import android.view.ViewGroup;  
  7. import android.view.ViewGroup.LayoutParams;  
  8. import android.widget.LinearLayout;  
  9.   
  10. public class RoundedColourFragment extends Fragment {  
  11.   
  12.     private View mView;  
  13.     private int mColour;  
  14.     private float mWeight;  
  15.     private int marginLeft, marginRight, marginTop, marginBottom;  
  16.   
  17.     // need a public empty constructor for framework to instantiate  
  18.     public RoundedColourFragment() {  
  19.           
  20.     }  
  21.       
  22.     public RoundedColourFragment(int colour, float weight, int margin_left,  
  23.             int margin_right, int margin_top, int margin_bottom) {  
  24.         mColour = colour;  
  25.         mWeight = weight;  
  26.         marginLeft = margin_left;  
  27.         marginRight = margin_right;  
  28.         marginTop = margin_top;  
  29.         marginBottom = margin_bottom;  
  30.     }  
  31.   
  32.     @Override  
  33.     public void onCreate(Bundle savedInstanceState) {  
  34.         super.onCreate(savedInstanceState);  
  35.         mView = new View(getActivity());  
  36.   
  37.         GradientDrawable background = (GradientDrawable) getResources()  
  38.                 .getDrawable(R.drawable.rounded_rect);  
  39.         background.setColor(mColour);  
  40.   
  41.         mView.setBackgroundDrawable(background);  
  42.         LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(0,  
  43.                 LayoutParams.FILL_PARENT, mWeight);  
  44.         lp.setMargins(marginLeft, marginTop, marginRight, marginBottom);  
  45.         mView.setLayoutParams(lp);  
  46.     }  
  47.   
  48.     @Override  
  49.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  50.             Bundle savedInstanceState) {  
  51.         return mView;  
  52.     }  
  53.   
  54. }  


2、MainActivity.java文件,主要是创建tabs、item、drop down navigation等,以及他们之间相互转换的控制逻辑,一部分内容前面也介绍过。

view plain
  1. import android.animation.ObjectAnimator;  
  2. import android.app.ActionBar;  
  3. import android.app.Activity;  
  4. import android.app.FragmentTransaction;  
  5. import android.app.ActionBar.OnNavigationListener;  
  6. import android.os.Bundle;  
  7. import android.os.Handler;  
  8. import android.view.Menu;  
  9. import android.view.MenuItem;  
  10. import android.view.MenuItem.OnMenuItemClickListener;  
  11. import android.widget.ArrayAdapter;  
  12.   
  13. public class MainActivity extends Activity implements ActionBar.TabListener {  
  14.   
  15.     private final Handler handler = new Handler();  
  16.     private RoundedColourFragment leftFrag;  
  17.     private RoundedColourFragment rightFrag;  
  18.     private boolean useLogo = false;  
  19.     private boolean showHomeUp = false;  
  20.   
  21.     /** Called when the activity is first created. */  
  22.     @Override  
  23.     public void onCreate(Bundle savedInstanceState) {  
  24.         super.onCreate(savedInstanceState);  
  25.         setContentView(R.layout.main);  
  26.         final ActionBar ab = getActionBar();  
  27.   
  28.         // set defaults for logo & home up  
  29.         ab.setDisplayHomeAsUpEnabled(showHomeUp);  
  30.         ab.setDisplayUseLogoEnabled(useLogo);  
  31.   
  32.         // set up tabs nav  
  33.         for (int i = 1; i < 4; i++) {  
  34.             ab.addTab(ab.newTab().setText("Tab " + i).setTabListener(this));  
  35.         }  
  36.   
  37.         // set up list nav  
  38.         ab.setListNavigationCallbacks(ArrayAdapter  
  39.                 .createFromResource(this, R.array.sections,  
  40.                         android.R.layout.simple_spinner_dropdown_item),  
  41.                 new OnNavigationListener() {  
  42.                     public boolean onNavigationItemSelected(int itemPosition,  
  43.                             long itemId) {  
  44.                         // FIXME add proper implementation  
  45.                         rotateLeftFrag();  
  46.                         return false;  
  47.                     }  
  48.                 });  
  49.   
  50.         // default to tab navigation  
  51.         showTabsNav();  
  52.   
  53.         // create a couple of simple fragments as placeholders  
  54.         final int MARGIN = 16;  
  55.         leftFrag = new RoundedColourFragment(getResources().getColor(  
  56.                 R.color.android_green), 1f, MARGIN, MARGIN / 2, MARGIN, MARGIN);  
  57.         rightFrag = new RoundedColourFragment(getResources().getColor(  
  58.                 R.color.honeycombish_blue), 2f, MARGIN / 2, MARGIN, MARGIN,  
  59.                 MARGIN);  
  60.   
  61.         FragmentTransaction ft = getFragmentManager().beginTransaction();  
  62.         ft.add(R.id.root, leftFrag);  
  63.         ft.add(R.id.root, rightFrag);  
  64.         ft.commit();  
  65.     }  
  66.   
  67.     @Override  
  68.     public boolean onCreateOptionsMenu(Menu menu) {  
  69.         getMenuInflater().inflate(R.menu.main_menu, menu);  
  70.   
  71.         // set up a listener for the refresh item  
  72.         final MenuItem refresh = (MenuItem) menu.findItem(R.id.menu_refresh);  
  73.         refresh.setOnMenuItemClickListener(new OnMenuItemClickListener() {  
  74.             // on selecting show progress spinner for 1s  
  75.             public boolean onMenuItemClick(MenuItem item) {  
  76.                 // item.setActionView(R.layout.progress_action);  
  77.                 handler.postDelayed(new Runnable() {  
  78.                     public void run() {  
  79.                         refresh.setActionView(null);  
  80.                     }  
  81.                 }, 1000);  
  82.                 return false;  
  83.             }  
  84.         });  
  85.         return super.onCreateOptionsMenu(menu);  
  86.     }  
  87.   
  88.     @Override  
  89.     public boolean onOptionsItemSelected(MenuItem item) {  
  90.         switch (item.getItemId()) {  
  91.         case android.R.id.home:  
  92.             // TODO handle clicking the app icon/logo  
  93.             return false;  
  94.         case R.id.menu_refresh:  
  95.             // switch to a progress animation  
  96.             item.setActionView(R.layout.indeterminate_progress_action);  
  97.             return true;  
  98.         case R.id.menu_both:  
  99.             // rotation animation of green fragment  
  100.             rotateLeftFrag();  
  101.             return true;  
  102.         case R.id.menu_text:  
  103.             // alpha animation of blue fragment  
  104.             ObjectAnimator alpha = ObjectAnimator.ofFloat(rightFrag.getView(),  
  105.                     "alpha", 1f, 0f);  
  106.             alpha.setRepeatMode(ObjectAnimator.REVERSE);  
  107.             alpha.setRepeatCount(1);  
  108.             alpha.setDuration(800);  
  109.             alpha.start();  
  110.             return true;  
  111.         case R.id.menu_logo:  
  112.             useLogo = !useLogo;  
  113.             item.setChecked(useLogo);  
  114.             getActionBar().setDisplayUseLogoEnabled(useLogo);  
  115.             return true;  
  116.         case R.id.menu_up:  
  117.             showHomeUp = !showHomeUp;  
  118.             item.setChecked(showHomeUp);  
  119.             getActionBar().setDisplayHomeAsUpEnabled(showHomeUp);  
  120.             return true;  
  121.         case R.id.menu_nav_tabs:  
  122.             item.setChecked(true);  
  123.             showTabsNav();  
  124.             return true;  
  125.         case R.id.menu_nav_label:  
  126.             item.setChecked(true);  
  127.             showStandardNav();  
  128.             return true;  
  129.         case R.id.menu_nav_drop_down:  
  130.             item.setChecked(true);  
  131.             showDropDownNav();  
  132.             return true;  
  133.         case R.id.menu_bak_none:  
  134.             item.setChecked(true);  
  135.             getActionBar().setBackgroundDrawable(null);  
  136.             return true;  
  137.         case R.id.menu_bak_gradient:  
  138.             item.setChecked(true);  
  139.             getActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.ad_action_bar_gradient_bak));  
  140.             return true;  
  141.         default:  
  142.             return super.onOptionsItemSelected(item);  
  143.         }  
  144.     }  
  145.   
  146.     private void rotateLeftFrag() {  
  147.         if (leftFrag != null) {  
  148.             ObjectAnimator.ofFloat(leftFrag.getView(), "rotationY"0180)  
  149.                     .setDuration(500).start();  
  150.         }  
  151.     }  
  152.   
  153.     private void showStandardNav() {  
  154.         ActionBar ab = getActionBar();  
  155.         if (ab.getNavigationMode() != ActionBar.NAVIGATION_MODE_STANDARD) {  
  156.             ab.setDisplayShowTitleEnabled(true);  
  157.             ab.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);  
  158.         }  
  159.     }  
  160.   
  161.     private void showDropDownNav() {  
  162.         ActionBar ab = getActionBar();  
  163.         if (ab.getNavigationMode() != ActionBar.NAVIGATION_MODE_LIST) {  
  164.             ab.setDisplayShowTitleEnabled(false);  
  165.             ab.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);  
  166.         }  
  167.     }  
  168.   
  169.     private void showTabsNav() {  
  170.         ActionBar ab = getActionBar();  
  171.         if (ab.getNavigationMode() != ActionBar.NAVIGATION_MODE_TABS) {  
  172.             ab.setDisplayShowTitleEnabled(false);  
  173.             ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  
  174.         }  
  175.     }  
  176.   
  177.     public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {  
  178.         // FIXME add a proper implementation, for now just rotate the left  
  179.         // fragment  
  180.         rotateLeftFrag();  
  181.     }  
  182.   
  183.     public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {  
  184.         // FIXME implement this  
  185.     }  
  186.   
  187.     public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {  
  188.         // FIXME implement this  
  189.     }  
  190.   
  191. }  


3、在res/values下的styles.xml文件,这里是本程序讲解的核心,也是actionbar样式转换的核心,java代码如下:

view plain
  1. "1.0" encoding="utf-8"?>  
  2.   
  3.   
  4.       
  5.     "Theme" parent="android:Theme">  
  6.   
  7.       
  8.       
  9.     "Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">  
  10.           
  11.         "android:selectableItemBackground">@drawable/ad_selectable_background  
  12.           
  13.         "android:popupMenuStyle">@style/MyPopupMenu  
  14.         "android:dropDownListViewStyle">@style/MyDropDownListView  
  15.         "android:actionBarTabStyle">@style/MyActionBarTabStyle  
  16.         "android:actionDropDownStyle">@style/MyDropDownNav  
  17.         "android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light  
  18.         "android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light  
  19.           
  20.       
  21.       
  22.       
  23.     "MyPopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow">  
  24.         "android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light   
  25.       
  26.       
  27.       
  28.     "MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">  
  29.         "android:listSelector">@drawable/ad_selectable_background  
  30.       
  31.   
  32.       
  33.     "MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBarView_TabView">  
  34.         "android:background">@drawable/actionbar_tab_bg  
  35.         "android:paddingLeft">32dp  
  36.         "android:paddingRight">32dp  
  37.       
  38.       
  39.       
  40.     "MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">  
  41.         "android:background">@drawable/ad_spinner_background_holo_light  
  42.         "android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light  
  43.         "android:dropDownSelector">@drawable/ad_selectable_background  
  44.       
  45.   
  46.       
  47.       
  48.   
  49.   

      把style设置好后,只需在AndroidManifest.xml中application或activity的位置加上

      细心的读者可能会发现,其实以前android的属性拿过来都能用,比如说修改actionbar的高度,,只需把这些属性放在对应的位置,作为一个存在即可。

4、res/drawable下的一些xml文件,即actionbar修改所需的资源。

4、1------actionbar_tab_bg.xml,用于tab的背景修改。曾一度认为只需在系统tab的基础上修改一下颜色即可,其实不然。需另外弄几张图片,(如我想把tab改成红色背景,那么我就要找几张红色背景的图片)。

view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android">  
  3.   
  4.     "false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/ad_tab_unselected_holo" />  
  5.     "false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/ad_tab_selected_holo" />  
  6.     "false" android:state_pressed="true" android:drawable="@drawable/ad_tab_selected_pressed_holo" />  
  7.     "true"  android:state_pressed="true" android:drawable="@drawable/ad_tab_selected_pressed_holo" />  
  8.   
  9.   

4、2------ad_action_bar_gradient_bak.xml,用于actionbar的颜色渐变,本例是从顶到底颜色逐渐变浅。
view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android" android:shape="rectangle">  
  3.     
  4.         android:startColor="@color/honeycombish_blue"  
  5.         android:endColor="@color/background"  
  6.         android:type="linear"  
  7.         android:angle="270" />  
  8.   
4、3------ad_btn_check_holo_light.xml,用于单选背景的变换。
view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android">  
  3.   
  4.       
  5.     "true" android:state_window_focused="false"  
  6.         android:state_enabled="true" android:drawable="@drawable/btn_check_on_holo_light" />  
  7.       
  8.     "false" android:state_window_focused="false"  
  9.         android:state_enabled="true" android:drawable="@drawable/btn_check_off_holo_light" />  
  10.       
  11.     "true" android:state_pressed="true"  
  12.         android:state_enabled="true" android:drawable="@drawable/ad_btn_check_on_pressed_holo_light" />  
  13.       
  14.     "false" android:state_pressed="true"  
  15.         android:state_enabled="true" android:drawable="@drawable/ad_btn_check_off_pressed_holo_light" />  
  16.       
  17.       
  18.       
  19.     "false" android:state_enabled="true"  
  20.         android:drawable="@drawable/btn_check_off_holo_light" />  
  21.       
  22.     "true" android:state_enabled="true"  
  23.         android:drawable="@drawable/btn_check_on_holo_light" />  
  24.       
  25.       
  26.        
  27.   
4、4------ad_btn_radio_holo_light.xml,用于多选背景的变换。
view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android">  
  3.   
  4.       
  5.     "true" android:state_window_focused="false"  
  6.         android:state_enabled="true" android:drawable="@drawable/btn_radio_on_holo_light" />  
  7.       
  8.     "false" android:state_window_focused="false"  
  9.         android:state_enabled="true" android:drawable="@drawable/btn_radio_off_holo_light" />  
  10.       
  11.     "true" android:state_pressed="true"  
  12.         android:state_enabled="true" android:drawable="@drawable/ad_btn_radio_on_pressed_holo_light" />  
  13.       
  14.     "false" android:state_pressed="true"  
  15.         android:state_enabled="true" android:drawable="@drawable/ad_btn_radio_off_pressed_holo_light" />  
  16.       
  17.       
  18.       
  19.     "false" android:state_enabled="true"  
  20.         android:drawable="@drawable/btn_radio_off_holo_light" />  
  21.       
  22.     "true" android:state_enabled="true"  
  23.         android:drawable="@drawable/btn_radio_on_holo_light" />  
  24.       
  25.       
  26.           
  27.   
4、5------ad_btn_radio_holo_light.xml,用于item背景的变换,未选中时为透明,选中未绿色。
view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.           android:exitFadeDuration="@android:integer/config_mediumAnimTime" >  
  4.     "true" android:drawable="@drawable/selected_background" />  
  5.     "@android:color/transparent" />  
  6.   
4、6------ad_spinner_background_holo_light.xml,用于下拉列表背景的变换。
view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android">  
  3.     "false"  
  4.           android:drawable="@drawable/spinner_disabled_holo_light" />  
  5.     "true"  
  6.           android:drawable="@drawable/ad_spinner_pressed_holo_light" />  
  7.     "false" android:state_focused="true"  
  8.           android:drawable="@drawable/ad_spinner_focused_holo_light" />  
  9.     "@drawable/spinner_default_holo_light" />  
  10.   
4、7------rounded_rect.xml,用于本例RoundedColourFragment视图的设置。
view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android" android:shape="rectangle">  
  3.     "@dimen/frag_rounding_radius" />  
  4.   
dimens.xml
view plain
  1. "1.0" encoding="utf-8"?>  
  2.   
  3.     "frag_rounding_radius">20dp  
  4.     "progress_action_padding">8dp  
  5.   

你可能感兴趣的:(Android)