Android Actionbar学习笔记(三)-----修改Actionbar的样式
2011-08-02 23:04
471 查看
本例几乎涵盖了有关Actionbar的所有操作,由于前面介绍过tabs和item,这里重点介绍Actionbar的样式修改,需要源工程的请在资源里下载styleactionbar。更多请阅读http://android-developers.blogspot.com/2011/04/customizing-action-bar.html
1、首先准备一个RoundedColourFragment,前面介绍过各部分的作用,这里就不赘述。
2、MainActivity.java文件,主要是创建tabs、item、drop down navigation等,以及他们之间相互转换的控制逻辑,一部分内容前面也介绍过。
3、在res/values下的styles.xml文件,这里是本程序讲解的核心,也是actionbar样式转换的核心,java代码如下:
把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改成红色背景,那么我就要找几张红色背景的图片)。
4、2------ad_action_bar_gradient_bak.xml,用于actionbar的颜色渐变,本例是从顶到底颜色逐渐变浅。
至此,这个工程的逻辑介绍完毕。言语介绍肯定不会很明白,需要的同行可看源代码,相信各位精英能很快领悟到其中的技术,应用到自己的工程中去,使actionbar具有各自工程的特色。
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具有各自工程的特色。
相关文章推荐
- Android Actionbar学习笔记(三)-----修改Actionbar的样式
- Android Actionbar学习笔记(三)-----修改Actionbar的样式
- Android Actionbar学习笔记(三)-----修改Actionbar的样式
- Android Actionbar学习笔记(三)-----修改Actionbar的样式
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
- 对Android APP的各种样式统一修改方法(这里列举了通知状态栏StatueBar,标题栏ActionBar,ToolBar和按钮Button的样式修改)
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
- [置顶] Android--(14)--通过安卓选择器来修改actionbar的样式与字体样式
- Android 修改ActionBar样式
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
- Android 开发------------------ 修改 Actionbar 的样式
- Android actionbar在Material主题中修改样式
- android Preference相关样式修改
- 【Android】修改Tablayout中标签文字的样式
- Android下修改SeekBar样式
- [置顶] android 关于封装tabbar,任意修改样式
- Android修改主题,去掉ActionBar、TitleBar
- Android如何不用setCustomView而实现ActionBar的自定义修改
- 修改android 默认密码样式,比如默认是 ... 转换成 ***