Android Actionbar学习笔记(三)-----修改Actionbar的样式

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

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

import android.app.Fragment;
import android.graphics.drawable.GradientDrawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;

public class RoundedColourFragment extends Fragment {

	private View mView;
	private int mColour;
	private float mWeight;
	private int marginLeft, marginRight, marginTop, marginBottom;

	// need a public empty constructor for framework to instantiate
	public RoundedColourFragment() {
		
	}
	
	public RoundedColourFragment(int colour, float weight, int margin_left,
			int margin_right, int margin_top, int margin_bottom) {
		mColour = colour;
		mWeight = weight;
		marginLeft = margin_left;
		marginRight = margin_right;
		marginTop = margin_top;
		marginBottom = margin_bottom;
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		mView = new View(getActivity());

		GradientDrawable background = (GradientDrawable) getResources()
				.getDrawable(R.drawable.rounded_rect);
		background.setColor(mColour);

		mView.setBackgroundDrawable(background);
		LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(0,
				LayoutParams.FILL_PARENT, mWeight);
		lp.setMargins(marginLeft, marginTop, marginRight, marginBottom);
		mView.setLayoutParams(lp);
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return mView;
	}

}


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

import android.animation.ObjectAnimator;
import android.app.ActionBar;
import android.app.Activity;
import android.app.FragmentTransaction;
import android.app.ActionBar.OnNavigationListener;
import android.os.Bundle;
import android.os.Handler;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MenuItem.OnMenuItemClickListener;
import android.widget.ArrayAdapter;

public class MainActivity extends Activity implements ActionBar.TabListener {

	private final Handler handler = new Handler();
	private RoundedColourFragment leftFrag;
	private RoundedColourFragment rightFrag;
	private boolean useLogo = false;
	private boolean showHomeUp = false;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		final ActionBar ab = getActionBar();

		// set defaults for logo & home up
		ab.setDisplayHomeAsUpEnabled(showHomeUp);
		ab.setDisplayUseLogoEnabled(useLogo);

		// set up tabs nav
		for (int i = 1; i < 4; i++) {
			ab.addTab(ab.newTab().setText("Tab " + i).setTabListener(this));
		}

		// set up list nav
		ab.setListNavigationCallbacks(ArrayAdapter
				.createFromResource(this, R.array.sections,
						android.R.layout.simple_spinner_dropdown_item),
				new OnNavigationListener() {
					public boolean onNavigationItemSelected(int itemPosition,
							long itemId) {
						// FIXME add proper implementation
						rotateLeftFrag();
						return false;
					}
				});

		// default to tab navigation
		showTabsNav();

		// create a couple of simple fragments as placeholders
		final int MARGIN = 16;
		leftFrag = new RoundedColourFragment(getResources().getColor(
				R.color.android_green), 1f, MARGIN, MARGIN / 2, MARGIN, MARGIN);
		rightFrag = new RoundedColourFragment(getResources().getColor(
				R.color.honeycombish_blue), 2f, MARGIN / 2, MARGIN, MARGIN,
				MARGIN);

		FragmentTransaction ft = getFragmentManager().beginTransaction();
		ft.add(R.id.root, leftFrag);
		ft.add(R.id.root, rightFrag);
		ft.commit();
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main_menu, menu);

		// set up a listener for the refresh item
		final MenuItem refresh = (MenuItem) menu.findItem(R.id.menu_refresh);
		refresh.setOnMenuItemClickListener(new OnMenuItemClickListener() {
			// on selecting show progress spinner for 1s
			public boolean onMenuItemClick(MenuItem item) {
				// item.setActionView(R.layout.progress_action);
				handler.postDelayed(new Runnable() {
					public void run() {
						refresh.setActionView(null);
					}
				}, 1000);
				return false;
			}
		});
		return super.onCreateOptionsMenu(menu);
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case android.R.id.home:
			// TODO handle clicking the app icon/logo
			return false;
		case R.id.menu_refresh:
			// switch to a progress animation
			item.setActionView(R.layout.indeterminate_progress_action);
			return true;
		case R.id.menu_both:
			// rotation animation of green fragment
			rotateLeftFrag();
			return true;
		case R.id.menu_text:
			// alpha animation of blue fragment
			ObjectAnimator alpha = ObjectAnimator.ofFloat(rightFrag.getView(),
					"alpha", 1f, 0f);
			alpha.setRepeatMode(ObjectAnimator.REVERSE);
			alpha.setRepeatCount(1);
			alpha.setDuration(800);
			alpha.start();
			return true;
		case R.id.menu_logo:
			useLogo = !useLogo;
			item.setChecked(useLogo);
			getActionBar().setDisplayUseLogoEnabled(useLogo);
			return true;
		case R.id.menu_up:
			showHomeUp = !showHomeUp;
			item.setChecked(showHomeUp);
			getActionBar().setDisplayHomeAsUpEnabled(showHomeUp);
			return true;
		case R.id.menu_nav_tabs:
			item.setChecked(true);
			showTabsNav();
			return true;
		case R.id.menu_nav_label:
			item.setChecked(true);
			showStandardNav();
			return true;
		case R.id.menu_nav_drop_down:
			item.setChecked(true);
			showDropDownNav();
			return true;
		case R.id.menu_bak_none:
			item.setChecked(true);
			getActionBar().setBackgroundDrawable(null);
			return true;
		case R.id.menu_bak_gradient:
			item.setChecked(true);
			getActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.ad_action_bar_gradient_bak));
			return true;
		default:
			return super.onOptionsItemSelected(item);
		}
	}

	private void rotateLeftFrag() {
		if (leftFrag != null) {
			ObjectAnimator.ofFloat(leftFrag.getView(), "rotationY", 0, 180)
					.setDuration(500).start();
		}
	}

	private void showStandardNav() {
		ActionBar ab = getActionBar();
		if (ab.getNavigationMode() != ActionBar.NAVIGATION_MODE_STANDARD) {
			ab.setDisplayShowTitleEnabled(true);
			ab.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
		}
	}

	private void showDropDownNav() {
		ActionBar ab = getActionBar();
		if (ab.getNavigationMode() != ActionBar.NAVIGATION_MODE_LIST) {
			ab.setDisplayShowTitleEnabled(false);
			ab.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
		}
	}

	private void showTabsNav() {
		ActionBar ab = getActionBar();
		if (ab.getNavigationMode() != ActionBar.NAVIGATION_MODE_TABS) {
			ab.setDisplayShowTitleEnabled(false);
			ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
		}
	}

	public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
		// FIXME add a proper implementation, for now just rotate the left
		// fragment
		rotateLeftFrag();
	}

	public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
		// FIXME implement this
	}

	public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
		// FIXME implement this
	}

}


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

<?xml version="1.0" encoding="utf-8"?>
<resources>

	<!-- Base application theme is the default theme. -->
	<style name="Theme" parent="android:Theme"></style>

	<!-- Variation on the Holo Light theme that styles the Action Bar -->
	<!-- style的名字是Theme.AndroidDevelopers,父类为Theme.Holo.Light,即白底黑字(如果是Theme.Holo,则为黑底白字)-->
	<style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
		<!-- 这是items的颜色变化,未选中时为白色,选中时为绿色,逻辑请见ad_selectable_background.xml -->
		<item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
		<!-- 其他部分的颜色变化跟上面类似 -->
		<item name="android:popupMenuStyle">@style/MyPopupMenu</item>
		<item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
        <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
        <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
        <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
        <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
		<!--<item name="android:actionOverflowButtonStyle">@style/MyOverflowButton</item>-->
	</style>
	
	<!-- style the overflow menu -->
	<style name="MyPopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow">
		<item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>	
	</style>
	
	<!-- style the items within the overflow menu -->
	<style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
		<item name="android:listSelector">@drawable/ad_selectable_background</item>
	</style>

    <!-- style for the tabs -->
    <style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBarView_TabView">
        <item name="android:background">@drawable/actionbar_tab_bg</item>
        <item name="android:paddingLeft">32dp</item>
        <item name="android:paddingRight">32dp</item>
    </style>
	
	<!-- style the list navigation -->
	<style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">
		<item name="android:background">@drawable/ad_spinner_background_holo_light</item>
		<item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>
		<item name="android:dropDownSelector">@drawable/ad_selectable_background</item>
	</style>

	<!-- the following can be used to style the overflow menu button
	     only do this if you have an *extremely* good reason to!! -->
	<!--<style name="MyOverflowButton" parent="@android:style/Widget.Holo.ActionButton.Overflow">
		<item name="android:src">@android:drawable/ic_menu_view</item>
		<item name="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改成红色背景,那么我就要找几张红色背景的图片)。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/ad_tab_unselected_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/ad_tab_selected_holo" />
    <item android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/ad_tab_selected_pressed_holo" />
    <item android: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的颜色渐变,本例是从顶到底颜色逐渐变浅。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns: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,用于单选背景的变换。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

	<!-- Enabled states -->
	<item android:state_checked="true" android:state_window_focused="false"
		android:state_enabled="true" android:drawable="@drawable/btn_check_on_holo_light" />
	
	<item android:state_checked="false" android:state_window_focused="false"
		android:state_enabled="true" android:drawable="@drawable/btn_check_off_holo_light" />
	
	<item android:state_checked="true" android:state_pressed="true"
		android:state_enabled="true" android:drawable="@drawable/ad_btn_check_on_pressed_holo_light" />
	
	<item android:state_checked="false" android:state_pressed="true"
		android:state_enabled="true" android:drawable="@drawable/ad_btn_check_off_pressed_holo_light" />
	
	<!-- ignoring focused states for brevity 
	<item android:state_checked="true" android:state_focused="true"
		android:state_enabled="true" android:drawable="@drawable/btn_check_on_focused_holo_light" />
	
	<item android:state_checked="false" android:state_focused="true"
		android:state_enabled="true" android:drawable="@drawable/btn_check_off_focused_holo_light" />
	-->
	
	<item android:state_checked="false" android:state_enabled="true"
		android:drawable="@drawable/btn_check_off_holo_light" />
	
	<item android:state_checked="true" android:state_enabled="true"
		android:drawable="@drawable/btn_check_on_holo_light" />
	
	<!-- ignoring disabled states for brevity
	<item android:state_checked="true" android:state_window_focused="false"
		android:drawable="@drawable/btn_check_on_disabled_holo_light" />
	
	<item android:state_checked="false" android:state_window_focused="false"
		android:drawable="@drawable/btn_check_off_disabled_holo_light" />
	
	<item android:state_checked="true" android:state_focused="true"
		android:drawable="@drawable/btn_check_on_disabled_focused_holo_light" />
	
	<item android:state_checked="false" android:state_focused="true"
		android:drawable="@drawable/btn_check_off_disabled_focused_holo_light" />
	
	<item android:state_checked="false"
		android:drawable="@drawable/btn_check_off_disabled_holo_light" />
	
	<item android:state_checked="true"
		android:drawable="@drawable/btn_check_on_disabled_holo_light" />
	 -->
	 
</selector>
4、4------ad_btn_radio_holo_light.xml,用于多选背景的变换。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

	<!-- Enabled states -->
	<item android:state_checked="true" android:state_window_focused="false"
		android:state_enabled="true" android:drawable="@drawable/btn_radio_on_holo_light" />
	
	<item android:state_checked="false" android:state_window_focused="false"
		android:state_enabled="true" android:drawable="@drawable/btn_radio_off_holo_light" />
	
	<item android:state_checked="true" android:state_pressed="true"
		android:state_enabled="true" android:drawable="@drawable/ad_btn_radio_on_pressed_holo_light" />
	
	<item android:state_checked="false" android:state_pressed="true"
		android:state_enabled="true" android:drawable="@drawable/ad_btn_radio_off_pressed_holo_light" />
	
	<!-- ignoring focused states for brevity 
	<item android:state_checked="true" android:state_focused="true"
		android:state_enabled="true" android:drawable="@drawable/btn_radio_on_focused_holo_light" />
	
	<item android:state_checked="false" android:state_focused="true"
		android:state_enabled="true" android:drawable="@drawable/btn_radio_off_focused_holo_light" />
	-->
	
	<item android:state_checked="false" android:state_enabled="true"
		android:drawable="@drawable/btn_radio_off_holo_light" />
	
	<item android:state_checked="true" android:state_enabled="true"
		android:drawable="@drawable/btn_radio_on_holo_light" />
	
	<!-- ignoring disabled states for brevity
	<item android:state_checked="true" android:state_window_focused="false"
		android:drawable="@drawable/btn_radio_on_disabled_holo_light" />
	
	<item android:state_checked="false" android:state_window_focused="false"
		android:drawable="@drawable/btn_radio_off_disabled_holo_light" />
	
	<item android:state_checked="true" android:state_focused="true"
		android:drawable="@drawable/btn_radio_on_disabled_focused_holo_light" />
	
	<item android:state_checked="false" android:state_focused="true"
		android:drawable="@drawable/btn_radio_off_disabled_focused_holo_light" />
	
	<item android:state_checked="false"
		android:drawable="@drawable/btn_radio_off_disabled_holo_light" />
	
	<item android:state_checked="true"
		android:drawable="@drawable/btn_radio_on_disabled_holo_light" />
	-->
		
</selector>
4、5------ad_btn_radio_holo_light.xml,用于item背景的变换,未选中时为透明,选中未绿色。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
		  android:exitFadeDuration="@android:integer/config_mediumAnimTime" >
	<item android:state_pressed="true" android:drawable="@drawable/selected_background" />
	<item android:drawable="@android:color/transparent" />
</selector>
4、6------ad_spinner_background_holo_light.xml,用于下拉列表背景的变换。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false"
          android:drawable="@drawable/spinner_disabled_holo_light" />
    <item android:state_pressed="true"
          android:drawable="@drawable/ad_spinner_pressed_holo_light" />
    <item android:state_pressed="false" android:state_focused="true"
          android:drawable="@drawable/ad_spinner_focused_holo_light" />
    <item android:drawable="@drawable/spinner_default_holo_light" />
</selector>
4、7------rounded_rect.xml,用于本例RoundedColourFragment视图的设置。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="@dimen/frag_rounding_radius" />
</shape>
dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="frag_rounding_radius">20dp</dimen>
    <dimen name="progress_action_padding">8dp</dimen>
</resources>

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

  • 0
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值