Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端

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

大家都知道Android的ActionBar是在3.0以上才有的，那么在3.0以下呢，google并没有给我提供在3.0以下支持ActionBar的包，但是外国的大牛JakeWharton实现了在3.0以下使用ActionBar,JakeWharton这位大牛是ActionBarSherlock，Android-ViewPagerIndicator ，NineOldAndroids的作者，非常厉害的一个人，Github的关注量超过2.6K，我左侧的友情链接里面有他的Github的主页链接，有兴趣的朋友可以去follow下他，今天我们使用的是他的开源框架ActionBarSherlock，ActionBarSherlock是让Action Bar功能支持2.X后的所有平台，而且他会自动的判断是调用原生Action Bar还是使用扩展ActionBar，很多知名的应用也使用这个库，我之前对ActionBar也不了解，所以就去下了ActionBarSherlock来好好的了解了解ActionBar的使用

• 我们先从Github上面先下载这个库，下载地址https://github.com/JakeWharton/ActionBarSherlock，下载好了解压如图

把红色框框标记的文件导入Eclipse里面，我们可以先看下例子，来了解下ActionBar的一些使用情况

• 我们新建一个Android工程，叫ViewPagerAndTab，然后指定ActionBarSherlock为ViewPagerAndTab的库工程，右键工程--->Properties

通过上面的几步我们就指定ActionBarSherlock为ViewPagerAndTab的库工程，接下来我们就能在3.0以下使用ActionBar，我这里使用的是ActionBar Tab和ViewPager仿网易新闻，我们看看主要代码的编写

1.先看布局文件，里面一个ViewPager，非常简单

[html] view plain copy

1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="@android:color/white">
7. <android.support.v4.view.ViewPager
8. android:id="@+id/viewPager"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"/>
12. </RelativeLayout>

2.MainActivity代码，点击ActionBar的Tab，ViewPager切换不同的Fragment，滑动ViewPager，选中相对应的ActiionBar Tab

[java] view plain copy

1. packagecom.example.viewpagerandtabdemo;
3. importjava.util.ArrayList;
4. importjava.util.List;
6. importandroid.os.Bundle;
7. importandroid.support.v4.app.Fragment;
8. importandroid.support.v4.app.FragmentTransaction;
9. importandroid.support.v4.view.ViewPager;
10. importandroid.support.v4.view.ViewPager.OnPageChangeListener;
12. importcom.actionbarsherlock.app.ActionBar;
13. importcom.actionbarsherlock.app.ActionBar.Tab;
14. importcom.actionbarsherlock.app.SherlockFragmentActivity;
16. publicclassMainActivityextendsSherlockFragmentActivityimplementsActionBar.TabListener,OnPageChangeListener{
17. /**
18. *顶部Tab的title
19. */
20. privateString[]mTabTitles;
22. /**
23. *ViewPager对象的引用
24. */
25. privateViewPagermViewPager;
27. /**
28. *装载Fragment的容器，我们的每一个界面都是一个Fragment
29. */
30. privateList<Fragment>mFragmentList;
32. /**
33. *ActionBar对象的引用
34. */
35. privateActionBarmActionBar;
37. @Override
38. protectedvoidonCreate(BundlesavedInstanceState){
39. super.onCreate(savedInstanceState);
40. setContentView(R.layout.activity_main);
42. //从资源文件在获取Tab的title
43. mTabTitles=getResources().getStringArray(R.array.tab_title);
44. mFragmentList=newArrayList<Fragment>();
46. mViewPager=(ViewPager)findViewById(R.id.viewPager);
47. //设置Adapter
48. mViewPager.setAdapter(newTabPagerAdapter(getSupportFragmentManager(),mFragmentList));
49. //设置监听
50. mViewPager.setOnPageChangeListener(this);
53. //获取Action实例我们使用getSupportActionBar()方法
54. mActionBar=getSupportActionBar();
56. //隐藏Title
57. mActionBar.setDisplayShowTitleEnabled(false);
58. //隐藏Homelogo
59. mActionBar.setDisplayShowHomeEnabled(false);
60. //设置ActionBar的导航模式为Tab
61. mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
64. //为ActionBar添加Tab并设置TabListener
65. for(inti=0;i<mTabTitles.length;i++){
66. ActionBar.Tabtab=mActionBar.newTab();
67. tab.setText(mTabTitles[i]);
68. tab.setTabListener(this);
69. mActionBar.addTab(tab,i);
70. }
73. //将Fragment加入到List中，并将Tab的title传递给Fragment
74. for(inti=0;i<mTabTitles.length;i++){
75. Fragmentfragment=newItemFragment();
76. Bundleargs=newBundle();
77. args.putString("arg",mTabTitles[i]);
78. fragment.setArguments(args);
80. mFragmentList.add(fragment);
81. }
83. }
87. @Override
88. publicvoidonTabSelected(Tabtab,FragmentTransactionft){
89. //点击ActionBarTab的时候切换不同的Fragment界面
90. mViewPager.setCurrentItem(tab.getPosition());
91. }
93. @Override
94. publicvoidonTabUnselected(Tabtab,FragmentTransactionft){
96. }
98. @Override
99. publicvoidonTabReselected(Tabtab,FragmentTransactionft){
101. }
104. @Override
105. publicvoidonPageScrollStateChanged(intarg0){
107. }
109. @Override
110. publicvoidonPageScrolled(intarg0,floatarg1,intarg2){
112. }
114. @Override
115. publicvoidonPageSelected(intarg0){
116. //滑动ViewPager的时候设置相对应的ActionBarTab被选中
117. mActionBar.setSelectedNavigationItem(arg0);
118. }
121. }

我们使用ActionBarSherlock的时候不再是继承Activity，而是继承SherlockActivity，SherlockDialogFragment，SherlockFragmentActivity等等，我这里用到Fragment,所以继承SherlockFragmentActivity，我们不能随便设置Activity的theme,以后我们要全屏显示的时候直接设置android:theme="@android:style/Theme.Black.NoTitleBar"，我们使用ActionBar就不能这样设置了，并且不能随便设置他的Theme，必须是Theme.Sherlock, Theme.Sherlock.Light, Theme.Sherlock.Light.DarkActionBar,或者是他们的子样式，不然就会出java.lang.IllegalStateException异常，所以为了自定义ActionBar的Tab，我们必须修改其style

注意：我们还必须删除ViewPagerAndTab工程libs下面的android-support-v4.jar包，因为在ActionBarSherlock已经包含android-support-v4.jar

3.ViewPager的适配器TabPagerAdapter，因为我们用到Fragment，所以我们继承FragmentStatePagerAdapter而不是PagerAdapter

[java] view plain copy

1. packagecom.example.viewpagerandtabdemo;
3. importjava.util.List;
5. importandroid.support.v4.app.Fragment;
6. importandroid.support.v4.app.FragmentManager;
7. importandroid.support.v4.app.FragmentStatePagerAdapter;
9. publicclassTabPagerAdapterextendsFragmentStatePagerAdapter{
10. privateList<Fragment>list;
12. //构造函数
13. publicTabPagerAdapter(FragmentManagerfm,List<Fragment>list){
14. super(fm);
15. this.list=list;
16. }
18. @Override
19. publicFragmentgetItem(intarg0){
20. returnlist.get(arg0);
21. }
23. @Override
24. publicintgetCount(){
25. returnlist.size();
26. }
28. }

4.ItemFragment 继承SherlockFragment，也可以直接继承Fragment，里面的的布局比较简单，一个TextView用来显示从Activity传递过来的ActionBar Tab的title

[java] view plain copy

1. packagecom.example.viewpagerandtabdemo;
3. importandroid.os.Bundle;
4. importandroid.view.LayoutInflater;
5. importandroid.view.View;
6. importandroid.view.ViewGroup;
7. importandroid.widget.TextView;
9. importcom.actionbarsherlock.app.SherlockFragment;
12. publicclassItemFragmentextendsSherlockFragment{
14. @Override
15. publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
16. BundlesavedInstanceState){
18. ViewcontextView=inflater.inflate(R.layout.fragment_item,container,false);
19. TextViewmTextView=(TextView)contextView.findViewById(R.id.textview);
21. //获取Activity传递过来的参数
22. BundlemBundle=getArguments();
23. Stringtitle=mBundle.getString("arg");
25. mTextView.setText(title);
27. returncontextView;
28. }
30. @Override
31. publicvoidonActivityCreated(BundlesavedInstanceState){
32. super.onActivityCreated(savedInstanceState);
33. }
35. }

然后我们将上面的Activity的theme设置成android:theme="@style/Theme.Sherlock.Light.DarkActionBar" 运行项目看看效果，下图一是项目的效果，图二是网易的效果

是不是相差很大呢？人家下面的指示条是红色的，我们做出来的是蓝色的，人家选中Tab的字体颜色是红色，我们的不变色等等，那么我们要怎么才能做出网易新闻的那样子的效果，我们需要改变其style,改变如下

[html] view plain copy

1. <stylename="Themes.ActionBarTab"parent="@style/Theme.Sherlock">
2. <!--去除ActionBar的Divider-->
3. <itemname="actionBarDivider">@null</item>
5. <!--设置ActionBarTab的高度-->
6. <itemname="actionBarSize">45dip</item>
8. <!--设置ActionBarTab字体的样式-->
9. <itemname="actionBarTabTextStyle">@style/Widget.Sherlock.ActionBar.TabText</item>
11. <!--设置ActionBarTab的样式,例如下面的红色指引，Tab之间的间隙等等-->
12. <itemname="actionBarTabStyle">@style/Widget.Sherlock.ActionBar.TabView</item>
14. <!--设置ActionBar的样式，这里简单的设置了ActionBar的背景-->
15. <itemname="actionBarStyle">@style/Widget.Slider.ActionBar</item>
16. </style>
19. <stylename="Widget.Slider.ActionBar"parent="@style/Widget.Sherlock.ActionBar">
20. <itemname="backgroundStacked">@drawable/base_action_bar_bg</item>
21. </style>
23. <stylename="Widget.Sherlock.ActionBar.TabText"parent="android:Widget.Holo.ActionBar.TabText">
24. <itemname="android:textColor">@drawable/selector_tabtext</item>
25. <itemname="android:textSize">15sp</item>
26. </style>
28. <stylename="Widget.Sherlock.ActionBar.TabView"parent="Widget">
29. <itemname="android:background">@drawable/tab_indicator</item>
30. <itemname="android:paddingLeft">8dip</item>
31. <itemname="android:paddingRight">8dip</item>
32. </style>

还有一些图片，selector我没有贴出来，可以去下载代码看看效果，改变style运行效果

 

好了，今天的讲解到此结束，有疑问的朋友请在下面留言,有兴趣的可以看看开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签

源码下载，请点击

很多朋友说自己在4.1上面怎么设置style没效果，首先这个库是在2.X的机器上面使用ActionBar,3.0以后就是使用Andriod自带的ActionBar,所以在3.0以上的系统使用的style为android自带的style，所以我们要将style文件做下修改，如下

[html] view plain copy

1. <stylename="Themes.ActionBarTab"parent="@style/Theme.Sherlock">
2. <!--去除ActionBar的Divider-->
3. <itemname="actionBarDivider">@null</item>
4. <itemname="android:actionBarDivider">@null</item>
6. <!--设置ActionBarTab的高度-->
7. <itemname="actionBarSize">45dip</item>
8. <itemname="android:actionBarSize">45dip</item>
10. <!--设置ActionBarTab字体的样式-->
11. <itemname="actionBarTabTextStyle">@style/Widget.Sherlock.ActionBar.TabText</item>
12. <itemname="android:actionBarTabTextStyle">@style/Widget.Sherlock.ActionBar.TabText</item>
14. <!--设置ActionBarTab的样式,例如下面的红色指引，Tab之间的间隙等等-->
15. <itemname="actionBarTabStyle">@style/Widget.Sherlock.ActionBar.TabView</item>
16. <itemname="android:actionBarTabStyle">@style/Widget.Sherlock.ActionBar.TabView</item>
18. <!--设置ActionBar的样式，这里简单的设置了ActionBar的背景-->
19. <itemname="actionBarStyle">@style/Widget.Slider.ActionBar</item>
20. <itemname="android:actionBarStyle">@style/Widget.Slider.ActionBar</item>
21. </style>
24. <stylename="Widget.Slider.ActionBar"parent="@style/Widget.Sherlock.ActionBar">
25. <itemname="backgroundStacked">@drawable/base_action_bar_bg</item>
26. <itemname="android:backgroundStacked">@drawable/base_action_bar_bg</item>
27. </style>
29. <stylename="Widget.Sherlock.ActionBar.TabText"parent="android:Widget.Holo.ActionBar.TabText">
30. <itemname="android:textColor">@drawable/selector_tabtext</item>
31. <itemname="android:textSize">15sp</item>
32. </style>
34. <stylename="Widget.Sherlock.ActionBar.TabView"parent="Widget">
35. <itemname="android:background">@drawable/tab_indicator</item>
36. <itemname="android:paddingLeft">8dip</item>
37. <itemname="android:paddingRight">8dip</item>
38. </style>