【Android UI设计与开发】第13期：顶部标题栏（四）自定义ActionBar风格和样式

转载请注明出处：http://blog.csdn.net/yangyu20121224/article/details/9087941  

      这篇文章将对ActionBar专题前面几篇学习过的内容做一个总结，顺便运用以前学过的知识实现一个自定义样式的ActionBar标题栏效果。话不多说，进入今天的正题。

一、实现效果图

 

竖屏效果图：最左边是Logo图标，右边是工具栏按钮，点击Menu键显示其余的按钮键，下方是Tab标签选项。

 

横屏效果图：竖屏中的Tab选项标签变成了中间的下拉导航按钮

二、项目结构图

三、编码准备工作

先来学习一下自定义样式的基础知识，以便大家能看懂关于后面的代码。

1、设置操作栏的样式

       如果你对应用程序中的可视构件进行了定制化的设计，那么你可能也会要对操作栏做一些重新设计，以便跟应用程序的设计匹配。要这样做的话，需要使用Android的样式与主题框架中的一些特殊的样式属性来重新设置操作栏的样式。

       注意：改变外观的背景图片依赖与当前按钮的状态（选择、按下、解除选择），因此你使用的可描画的资源必须是一个可描画的状态列表。

       警告：对于你提供的所有可描画的背景，要确保使用NinePatch类型可描画资源，以便允许图片的拉伸。NinePatch类型的图片应该比40像素高30像素宽的图片要小。

2、普通的外观

android:windowActionBarOverlay

      

      这个属性声明了操作栏是否应该覆盖Activity布局，而不是相对Activity的布局位置的偏移。这个属性的默认值是false。

      通常，在屏幕上，操作栏需要它自己的空间，并且把剩下的空间用来填充Activity的布局。当操作栏四覆盖模式时，Activity会使用所有的有效空间，系统会在Activity的上面描画操作栏。如果你想要在操作栏隐藏和显示时，布局中的内容保持固定的尺寸好位置，那么这种覆盖模式是有用的。你也可能只是为了显示效果来使用它，因为你可以给操作栏设置半透明的背景，以便用户依然能够看到操作栏背后的Activity布局。

       注意：默认情况下，Holo主题会用半透明背景来描画操作栏。但是，你能够用自己的样式来修改它，并且默认的情况下，DeviceDefault主题在不同的设备上可能使用不透明的背景。

       覆盖模式被启用时，Activity布局不会感知到操作栏覆盖在它的上面，因此，在操作栏覆盖的区域，最好不要放置一些重要的信息或UI组件。如果适合，你能够引用平台的actionBarSize值来决定操作栏的高度，例如，在XML布局文件中引用这个值。

         你还能够用getHeight()方法在运行时获取操作栏的高度。如果在Activity生存周期的早期调用这个方法，那么在调用时所反映的操作栏的高度可能不包括被堆放的操作栏（因为导航选项标签）。要看如何在运行时判断操作栏总的高度（包括被堆放的操作栏），请看Honeycomb Gallery示例应用中的TitlesFragment类。

3、操作项元素

android:actionButtonStyle 给操作项按钮定义样式资源。 android:actionBarItemBackground  给每个操作项的背景定义可描画资源（被添加在API 级别 14中）。 android:itemBackground  给每个悬浮菜单项的背景定义可描画资源。 android:actionBarDivider 给操作项之间的分隔线定义可描画资源（被添加在API 级别 14中） android:actionMenuTextColor 给显示在操作项中文本定义颜色。 android:actionMenuTextAppearance  给显示在操作项中文本定义样式资源。 android:actionBarWidgetTheme 给作为操作视窗被填充到操作栏中的可视构件定义主题资源（被添加在API级别14中）。

4、导航选项标签

android:actionBarTabStyle  给操作栏中的选项标签定义样式资源。 android:actionBarTabBarStyle 给显示在导航选项标签下方的细条定义样式资源。 android:actionBarTabTextStyle 给导航选项标签中的文本定义样式资源。

5、下拉列表

android:actionDropDownStyle  给下拉导航列表定义样式（如背景和文本样式）。 如，下例XML文件中给操作栏定义了一些定制的样式：

        注意：一定要在

四、详细代码编写

 

1、整个项目中最核心的地方就是在res/values下的styles.xml文件中，这是自定义风格样式的资源文件，styles.xml：

2、定义好了之后，在AndroidManifest.xml清单文件中使用，可以在application中使用，这样就会作用于每一个Activity，也可以在每一个单独的Activity中使用，AndroidManifest.xml：

3、新建一个drawable文件夹，在文件夹下再定义几个资源文件：

<1> 用于tab选项标签背景的修改， actionbar_tab_bg.xml：

<2> ActionBar标题栏的背景渐变色，actionbar_gradient_bg.xml：

<3> 用于下拉列表背景的变换，ad_spinner_background_holo_light.xml：

<4> ActionBar标题栏上的按钮选中时的背景颜色切换，

selected_background.xml：

ad_selectable_background.xml：

4、菜单的资源文件，main_menu.xml：

            这里的资源文件有点多，为了节省篇幅，讲解重点和难点，博主这里就不一一列出来了，有需要的同学可以看源码，一目了然。

5、主Activity程序入口类，MainActivity.java：

package com.yangyu.myactionbar05;

import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.Menu;
import android.view.MenuItem;

/**
 * @author yangyu
 *	主Activity，程序入口类
 */
public class MainActivity extends Activity {
	//定义ActionBar
	private ActionBar actionBar;
	
	//定义Handler对象
	private final Handler handler = new Handler();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		initView();
		
		initData();
	}

	/**
	 * 初始化组件
	 */
	private void initView(){
		//得到ActionBar
		actionBar = getActionBar();
	}
	
	/**
	 * 初始化数据
	 */
	private void initData(){
		//设置ActionBar标题不显示
		actionBar.setDisplayShowTitleEnabled(false);
		
		//设置ActionBar的背景
		actionBar.setBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar_gradient_bg));
		
		//设置ActionBar左边默认的图标是否可用
		actionBar.setDisplayUseLogoEnabled(true);
		
		//设置导航模式为Tab选项标签导航模式
		actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
		
		//设置ActinBar添加Tab选项标签
		actionBar.addTab(actionBar.newTab().setText("TAB1").setTabListener(new MyTabListener(this,FragmentPage1.class)));
		actionBar.addTab(actionBar.newTab().setText("TAB2").setTabListener(new MyTabListener(this,FragmentPage2.class)));
		actionBar.addTab(actionBar.newTab().setText("TAB3").setTabListener(new MyTabListener(this,FragmentPage3.class)));
				
	}
	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main_menu, menu);	
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(final MenuItem item) {
		switch (item.getItemId()) {
		case R.id.menu_refresh:
			//选中刷新按钮后刷新一秒钟
			item.setActionView(R.layout.actionbar_progress);
			handler.postDelayed(new Runnable() {
				public void run() {
					item.setActionView(null);
				}
			}, 1000);
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
	
}

6、Tab选项标签监听接口类，MyTabListener.java：

package com.yangyu.myactionbar05;

import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;

/**
 * @author yangyu
 *  功能描述：Tab选项标签监听接口
 */
public class MyTabListener implements TabListener {
	private Fragment fragment;
	
	private final Activity mActivity;
	
	private final Class mClass;
	
	public MyTabListener(Activity activity, Class clz){
		mActivity = activity;  
		
		mClass = clz; 
	}
	
	@Override
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
		if(fragment == null){
			fragment = Fragment.instantiate(mActivity, mClass.getName());
			ft.add(android.R.id.content, fragment, null); 	
		}
		ft.attach(fragment);  
	}

	@Override
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {
		if (fragment != null) {
			ft.detach(fragment);
		}
	}

	@Override
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
		
	}
}

7、Fragment类，用于显示Tab选项标签的内容，列出其中一个，FragmentPage1.java：

package com.yangyu.myactionbar05;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentPage1 extends Fragment{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		
		return inflater.inflate(R.layout.fragment_1, null);		
	}	
}

       

         关于ActionBar的内容总结到这里差不多就要结束了，今后如果有什么关于ActionBar好玩好用的东西再拿出来更大家一起分享、总结和交流。在这里博主希望大家能积极评论，指出文中的不足和错误的地方，博主一定第一时间改正和完善。谢谢支持！下一篇开始会讲解自定义的顶部标题栏，敬请期待！


源码下载地址