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

zhouanzhuojinjie 2016-09-21

转载请注明出处: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的使用

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

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

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

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

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

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

packagecom.example.viewpagerandtabdemo;


importjava.util.ArrayList;
importjava.util.List;


importandroid.os.Bundle;
importandroid.support.v4.app.Fragment;
importandroid.support.v4.app.FragmentTransaction;
importandroid.support.v4.view.ViewPager;
importandroid.support.v4.view.ViewPager.OnPageChangeListener;


importcom.actionbarsherlock.app.ActionBar;
importcom.actionbarsherlock.app.ActionBar.Tab;
importcom.actionbarsherlock.app.SherlockFragmentActivity;


publicclassMainActivityextendsSherlockFragmentActivityimplementsActionBar.TabListener,OnPageChangeListener{
/**
*顶部Tab的title
*/
privateString[]mTabTitles;


/**
*ViewPager对象的引用
*/
privateViewPagermViewPager;


/**
*装载Fragment的容器,我们的每一个界面都是一个Fragment
*/
privateList<Fragment>mFragmentList;


/**
*ActionBar对象的引用
*/
privateActionBarmActionBar;


@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);


//从资源文件在获取Tab的title
mTabTitles=getResources().getStringArray(R.array.tab_title);
mFragmentList=newArrayList<Fragment>();


mViewPager=(ViewPager)findViewById(R.id.viewPager);
//设置Adapter
mViewPager.setAdapter(newTabPagerAdapter(getSupportFragmentManager(),mFragmentList));
//设置监听
mViewPager.setOnPageChangeListener(this);




//获取Action实例我们使用getSupportActionBar()方法
mActionBar=getSupportActionBar();


//隐藏Title
mActionBar.setDisplayShowTitleEnabled(false);
//隐藏Homelogo
mActionBar.setDisplayShowHomeEnabled(false);
//设置ActionBar的导航模式为Tab
mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);




//为ActionBar添加Tab并设置TabListener
for(inti=0;i<mTabTitles.length;i++){
ActionBar.Tabtab=mActionBar.newTab();
tab.setText(mTabTitles[i]);
tab.setTabListener(this);
mActionBar.addTab(tab,i);
}




//将Fragment加入到List中,并将Tab的title传递给Fragment
for(inti=0;i<mTabTitles.length;i++){
Fragmentfragment=newItemFragment();
Bundleargs=newBundle();
args.putString("arg",mTabTitles[i]);
fragment.setArguments(args);


mFragmentList.add(fragment);
}


}






@Override
publicvoidonTabSelected(Tabtab,FragmentTransactionft){
//点击ActionBarTab的时候切换不同的Fragment界面
mViewPager.setCurrentItem(tab.getPosition());
}


@Override
publicvoidonTabUnselected(Tabtab,FragmentTransactionft){


}


@Override
publicvoidonTabReselected(Tabtab,FragmentTransactionft){


}




@Override
publicvoidonPageScrollStateChanged(intarg0){


}


@Override
publicvoidonPageScrolled(intarg0,floatarg1,intarg2){


}


@Override
publicvoidonPageSelected(intarg0){
//滑动ViewPager的时候设置相对应的ActionBarTab被选中
mActionBar.setSelectedNavigationItem(arg0);
}




}

我们使用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

packagecom.example.viewpagerandtabdemo;


importjava.util.List;


importandroid.support.v4.app.Fragment;
importandroid.support.v4.app.FragmentManager;
importandroid.support.v4.app.FragmentStatePagerAdapter;


publicclassTabPagerAdapterextendsFragmentStatePagerAdapter{
privateList<Fragment>list;


//构造函数
publicTabPagerAdapter(FragmentManagerfm,List<Fragment>list){
super(fm);
this.list=list;
}


@Override
publicFragmentgetItem(intarg0){
returnlist.get(arg0);
}


@Override
publicintgetCount(){
returnlist.size();
}


}

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

packagecom.example.viewpagerandtabdemo;


importandroid.os.Bundle;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.TextView;


importcom.actionbarsherlock.app.SherlockFragment;




publicclassItemFragmentextendsSherlockFragment{


@Override
publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
BundlesavedInstanceState){


ViewcontextView=inflater.inflate(R.layout.fragment_item,container,false);
TextViewmTextView=(TextView)contextView.findViewById(R.id.textview);


//获取Activity传递过来的参数
BundlemBundle=getArguments();
Stringtitle=mBundle.getString("arg");


mTextView.setText(title);


returncontextView;
}


@Override
publicvoidonActivityCreated(BundlesavedInstanceState){
super.onActivityCreated(savedInstanceState);
}


}

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

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

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

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

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

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

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

源码下载,请点击

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

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

相关推荐