Android(安卓)Actionbar学习笔记（三）-----修改Actionbar的样式

Android Actionbar学习笔记（三）-----修改Actionbar的样式

分类：Android 控件 2011-08-02 23:04 193人阅读评论(1) 收藏举报

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

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

view plain

importandroid.app.Fragment;
importandroid.graphics.drawable.GradientDrawable;
importandroid.os.Bundle;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.view.ViewGroup.LayoutParams;
importandroid.widget.LinearLayout;
publicclassRoundedColourFragmentextendsFragment{
privateViewmView;
privateintmColour;
privatefloatmWeight;
privateintmarginLeft,marginRight,marginTop,marginBottom;
//needapublicemptyconstructorforframeworktoinstantiate
publicRoundedColourFragment(){
}
publicRoundedColourFragment(intcolour,floatweight,intmargin_left,
intmargin_right,intmargin_top,intmargin_bottom){
mColour=colour;
mWeight=weight;
marginLeft=margin_left;
marginRight=margin_right;
marginTop=margin_top;
marginBottom=margin_bottom;
}
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
mView=newView(getActivity());
GradientDrawablebackground=(GradientDrawable)getResources()
.getDrawable(R.drawable.rounded_rect);
background.setColor(mColour);
mView.setBackgroundDrawable(background);
LinearLayout.LayoutParamslp=newLinearLayout.LayoutParams(0,
LayoutParams.FILL_PARENT,mWeight);
lp.setMargins(marginLeft,marginTop,marginRight,marginBottom);
mView.setLayoutParams(lp);
}
@Override
publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
BundlesavedInstanceState){
returnmView;
}
}

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

view plain

importandroid.animation.ObjectAnimator;
importandroid.app.ActionBar;
importandroid.app.Activity;
importandroid.app.FragmentTransaction;
importandroid.app.ActionBar.OnNavigationListener;
importandroid.os.Bundle;
importandroid.os.Handler;
importandroid.view.Menu;
importandroid.view.MenuItem;
importandroid.view.MenuItem.OnMenuItemClickListener;
importandroid.widget.ArrayAdapter;
publicclassMainActivityextendsActivityimplementsActionBar.TabListener{
privatefinalHandlerhandler=newHandler();
privateRoundedColourFragmentleftFrag;
privateRoundedColourFragmentrightFrag;
privatebooleanuseLogo=false;
privatebooleanshowHomeUp=false;
/**Calledwhentheactivityisfirstcreated.*/
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
finalActionBarab=getActionBar();
//setdefaultsforlogo&homeup
ab.setDisplayHomeAsUpEnabled(showHomeUp);
ab.setDisplayUseLogoEnabled(useLogo);
//setuptabsnav
for(inti=1;i<4;i++){
ab.addTab(ab.newTab().setText("Tab"+i).setTabListener(this));
}
//setuplistnav
ab.setListNavigationCallbacks(ArrayAdapter
.createFromResource(this,R.array.sections,
android.R.layout.simple_spinner_dropdown_item),
newOnNavigationListener(){
publicbooleanonNavigationItemSelected(intitemPosition,
longitemId){
//FIXMEaddproperimplementation
rotateLeftFrag();
returnfalse;
}
});
//defaulttotabnavigation
showTabsNav();
//createacoupleofsimplefragmentsasplaceholders
finalintMARGIN=16;
leftFrag=newRoundedColourFragment(getResources().getColor(
R.color.android_green),1f,MARGIN,MARGIN/2,MARGIN,MARGIN);
rightFrag=newRoundedColourFragment(getResources().getColor(
R.color.honeycombish_blue),2f,MARGIN/2,MARGIN,MARGIN,
MARGIN);
FragmentTransactionft=getFragmentManager().beginTransaction();
ft.add(R.id.root,leftFrag);
ft.add(R.id.root,rightFrag);
ft.commit();
}
@Override
publicbooleanonCreateOptionsMenu(Menumenu){
getMenuInflater().inflate(R.menu.main_menu,menu);
//setupalistenerfortherefreshitem
finalMenuItemrefresh=(MenuItem)menu.findItem(R.id.menu_refresh);
refresh.setOnMenuItemClickListener(newOnMenuItemClickListener(){
//onselectingshowprogressspinnerfor1s
publicbooleanonMenuItemClick(MenuItemitem){
//item.setActionView(R.layout.progress_action);
handler.postDelayed(newRunnable(){
publicvoidrun(){
refresh.setActionView(null);
}
},1000);
returnfalse;
}
});
returnsuper.onCreateOptionsMenu(menu);
}
@Override
publicbooleanonOptionsItemSelected(MenuItemitem){
switch(item.getItemId()){
caseandroid.R.id.home:
//TODOhandleclickingtheappicon/logo
returnfalse;
caseR.id.menu_refresh:
//switchtoaprogressanimation
item.setActionView(R.layout.indeterminate_progress_action);
returntrue;
caseR.id.menu_both:
//rotationanimationofgreenfragment
rotateLeftFrag();
returntrue;
caseR.id.menu_text:
//alphaanimationofbluefragment
ObjectAnimatoralpha=ObjectAnimator.ofFloat(rightFrag.getView(),
"alpha",1f,0f);
alpha.setRepeatMode(ObjectAnimator.REVERSE);
alpha.setRepeatCount(1);
alpha.setDuration(800);
alpha.start();
returntrue;
caseR.id.menu_logo:
useLogo=!useLogo;
item.setChecked(useLogo);
getActionBar().setDisplayUseLogoEnabled(useLogo);
returntrue;
caseR.id.menu_up:
showHomeUp=!showHomeUp;
item.setChecked(showHomeUp);
getActionBar().setDisplayHomeAsUpEnabled(showHomeUp);
returntrue;
caseR.id.menu_nav_tabs:
item.setChecked(true);
showTabsNav();
returntrue;
caseR.id.menu_nav_label:
item.setChecked(true);
showStandardNav();
returntrue;
caseR.id.menu_nav_drop_down:
item.setChecked(true);
showDropDownNav();
returntrue;
caseR.id.menu_bak_none:
item.setChecked(true);
getActionBar().setBackgroundDrawable(null);
returntrue;
caseR.id.menu_bak_gradient:
item.setChecked(true);
getActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.ad_action_bar_gradient_bak));
returntrue;
default:
returnsuper.onOptionsItemSelected(item);
}
}
privatevoidrotateLeftFrag(){
if(leftFrag!=null){
ObjectAnimator.ofFloat(leftFrag.getView(),"rotationY",0,180)
.setDuration(500).start();
}
}
privatevoidshowStandardNav(){
ActionBarab=getActionBar();
if(ab.getNavigationMode()!=ActionBar.NAVIGATION_MODE_STANDARD){
ab.setDisplayShowTitleEnabled(true);
ab.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
}
}
privatevoidshowDropDownNav(){
ActionBarab=getActionBar();
if(ab.getNavigationMode()!=ActionBar.NAVIGATION_MODE_LIST){
ab.setDisplayShowTitleEnabled(false);
ab.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
}
}
privatevoidshowTabsNav(){
ActionBarab=getActionBar();
if(ab.getNavigationMode()!=ActionBar.NAVIGATION_MODE_TABS){
ab.setDisplayShowTitleEnabled(false);
ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
}
}
publicvoidonTabSelected(ActionBar.Tabtab,FragmentTransactionft){
//FIXMEaddaproperimplementation,fornowjustrotatetheleft
//fragment
rotateLeftFrag();
}
publicvoidonTabUnselected(ActionBar.Tabtab,FragmentTransactionft){
//FIXMEimplementthis
}
publicvoidonTabReselected(ActionBar.Tabtab,FragmentTransactionft){
//FIXMEimplementthis
}
}

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

view plain

<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<stylename="Theme"parent="android:Theme"></style>
<stylename="Theme.AndroidDevelopers"parent="android:style/Theme.Holo.Light">
<itemname="android:selectableItemBackground">@drawable/ad_selectable_background</item>
<itemname="android:popupMenuStyle">@style/MyPopupMenu</item>
<itemname="android:dropDownListViewStyle">@style/MyDropDownListView</item>
<itemname="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
<itemname="android:actionDropDownStyle">@style/MyDropDownNav</item>
<itemname="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
<itemname="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
</style>
<stylename="MyPopupMenu"parent="android:style/Widget.Holo.Light.ListPopupWindow">
<itemname="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>
</style>
<stylename="MyDropDownListView"parent="android:style/Widget.Holo.ListView.DropDown">
<itemname="android:listSelector">@drawable/ad_selectable_background</item>
</style>
<stylename="MyActionBarTabStyle"parent="android:style/Widget.Holo.Light.ActionBarView_TabView">
<itemname="android:background">@drawable/actionbar_tab_bg</item>
<itemname="android:paddingLeft">32dp</item>
<itemname="android:paddingRight">32dp</item>
</style>
<stylename="MyDropDownNav"parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">
<itemname="android:background">@drawable/ad_spinner_background_holo_light</item>
<itemname="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>
<itemname="android:dropDownSelector">@drawable/ad_selectable_background</item>
</style>
<!--thefollowingcanbeusedtostyletheoverflowmenubutton
onlydothisifyouhavean*extremely*goodreasonto!!-->
<!--<stylename="MyOverflowButton"parent="@android:style/Widget.Holo.ActionButton.Overflow">
<itemname="android:src">@android:drawable/ic_menu_view</item>
<itemname="android:background">@drawable/action_button_background</item>
</style>-->
</resources>

把style设置好后，只需在AndroidManifest.xml中application或activity的位置加上<activity android:name=".MainActivity"android:theme="@style/Theme.AndroidDevelopers">即可，作用于一个应用程序或者一个activity。

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

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

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

view plain

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_focused="false"android:state_selected="false"android:state_pressed="false"android:drawable="@drawable/ad_tab_unselected_holo"/>
<itemandroid:state_focused="false"android:state_selected="true"android:state_pressed="false"android:drawable="@drawable/ad_tab_selected_holo"/>
<itemandroid:state_selected="false"android:state_pressed="true"android:drawable="@drawable/ad_tab_selected_pressed_holo"/>
<itemandroid:state_selected="true"android:state_pressed="true"android:drawable="@drawable/ad_tab_selected_pressed_holo"/>
</selector>

4、2------ad_action_bar_gradient_bak.xml，用于actionbar的颜色渐变，本例是从顶到底颜色逐渐变浅。 view plain

<?xmlversion="1.0"encoding="utf-8"?>
<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
<gradient
android:startColor="@color/honeycombish_blue"
android:endColor="@color/background"
android:type="linear"
android:angle="270"/>
</shape>

4、3------ad_btn_check_holo_light.xml，用于单选背景的变换。 view plain

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_checked="true"android:state_window_focused="false"
android:state_enabled="true"android:drawable="@drawable/btn_check_on_holo_light"/>
<itemandroid:state_checked="false"android:state_window_focused="false"
android:state_enabled="true"android:drawable="@drawable/btn_check_off_holo_light"/>
<itemandroid:state_checked="true"android:state_pressed="true"
android:state_enabled="true"android:drawable="@drawable/ad_btn_check_on_pressed_holo_light"/>
<itemandroid:state_checked="false"android:state_pressed="true"
android:state_enabled="true"android:drawable="@drawable/ad_btn_check_off_pressed_holo_light"/>
<!--ignoringfocusedstatesforbrevity
<itemandroid:state_checked="true"android:state_focused="true"
android:state_enabled="true"android:drawable="@drawable/btn_check_on_focused_holo_light"/>
<itemandroid:state_checked="false"android:state_focused="true"
android:state_enabled="true"android:drawable="@drawable/btn_check_off_focused_holo_light"/>
-->
<itemandroid:state_checked="false"android:state_enabled="true"
android:drawable="@drawable/btn_check_off_holo_light"/>
<itemandroid:state_checked="true"android:state_enabled="true"
android:drawable="@drawable/btn_check_on_holo_light"/>
<!--ignoringdisabledstatesforbrevity
<itemandroid:state_checked="true"android:state_window_focused="false"
android:drawable="@drawable/btn_check_on_disabled_holo_light"/>
<itemandroid:state_checked="false"android:state_window_focused="false"
android:drawable="@drawable/btn_check_off_disabled_holo_light"/>
<itemandroid:state_checked="true"android:state_focused="true"
android:drawable="@drawable/btn_check_on_disabled_focused_holo_light"/>
<itemandroid:state_checked="false"android:state_focused="true"
android:drawable="@drawable/btn_check_off_disabled_focused_holo_light"/>
<itemandroid:state_checked="false"
android:drawable="@drawable/btn_check_off_disabled_holo_light"/>
<itemandroid:state_checked="true"
android:drawable="@drawable/btn_check_on_disabled_holo_light"/>
-->
</selector>

4、4------ad_btn_radio_holo_light.xml，用于多选背景的变换。
view plain

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_checked="true"android:state_window_focused="false"
android:state_enabled="true"android:drawable="@drawable/btn_radio_on_holo_light"/>
<itemandroid:state_checked="false"android:state_window_focused="false"
android:state_enabled="true"android:drawable="@drawable/btn_radio_off_holo_light"/>
<itemandroid:state_checked="true"android:state_pressed="true"
android:state_enabled="true"android:drawable="@drawable/ad_btn_radio_on_pressed_holo_light"/>
<itemandroid:state_checked="false"android:state_pressed="true"
android:state_enabled="true"android:drawable="@drawable/ad_btn_radio_off_pressed_holo_light"/>
<!--ignoringfocusedstatesforbrevity
<itemandroid:state_checked="true"android:state_focused="true"
android:state_enabled="true"android:drawable="@drawable/btn_radio_on_focused_holo_light"/>
<itemandroid:state_checked="false"android:state_focused="true"
android:state_enabled="true"android:drawable="@drawable/btn_radio_off_focused_holo_light"/>
-->
<itemandroid:state_checked="false"android:state_enabled="true"
android:drawable="@drawable/btn_radio_off_holo_light"/>
<itemandroid:state_checked="true"android:state_enabled="true"
android:drawable="@drawable/btn_radio_on_holo_light"/>
<!--ignoringdisabledstatesforbrevity
<itemandroid:state_checked="true"android:state_window_focused="false"
android:drawable="@drawable/btn_radio_on_disabled_holo_light"/>
<itemandroid:state_checked="false"android:state_window_focused="false"
android:drawable="@drawable/btn_radio_off_disabled_holo_light"/>
<itemandroid:state_checked="true"android:state_focused="true"
android:drawable="@drawable/btn_radio_on_disabled_focused_holo_light"/>
<itemandroid:state_checked="false"android:state_focused="true"
android:drawable="@drawable/btn_radio_off_disabled_focused_holo_light"/>
<itemandroid:state_checked="false"
android:drawable="@drawable/btn_radio_off_disabled_holo_light"/>
<itemandroid:state_checked="true"
android:drawable="@drawable/btn_radio_on_disabled_holo_light"/>
-->
</selector>

4、5------ad_btn_radio_holo_light.xml，用于item背景的变换，未选中时为透明，选中未绿色。
view plain

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="@android:integer/config_mediumAnimTime">
<itemandroid:state_pressed="true"android:drawable="@drawable/selected_background"/>
<itemandroid:drawable="@android:color/transparent"/>
</selector>

4、6------ad_spinner_background_holo_light.xml，用于下拉列表背景的变换。
view plain

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_enabled="false"
android:drawable="@drawable/spinner_disabled_holo_light"/>
<itemandroid:state_pressed="true"
android:drawable="@drawable/ad_spinner_pressed_holo_light"/>
<itemandroid:state_pressed="false"android:state_focused="true"
android:drawable="@drawable/ad_spinner_focused_holo_light"/>
<itemandroid:drawable="@drawable/spinner_default_holo_light"/>
</selector>

4、7------rounded_rect.xml，用于本例RoundedColourFragment视图的设置。
view plain

<?xmlversion="1.0"encoding="utf-8"?>
<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
<cornersandroid:radius="@dimen/frag_rounding_radius"/>
</shape>

dimens.xml view plain

<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<dimenname="frag_rounding_radius">20dp</dimen>
<dimenname="progress_action_padding">8dp</dimen>
</resources>

至此，这个工程的逻辑介绍完毕。言语介绍肯定不会很明白，需要的同行可看源代码，相信各位精英能很快领悟到其中的技术，应用到自己的工程中去，使actionbar具有各自工程的特色。

Android Actionbar学习笔记（三）-----修改Actionbar的样式

更多相关文章

随机推荐