码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2014-05-08 11:20:42      阅读：628      评论：0      收藏：0      [点我收藏+]

标签：android   style   blog   class   code   java   

大家都知道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的使用

 

 

bubuko.com,布布扣

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

 

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

 

bubuko.com,布布扣

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

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

 

[html] view plaincopybubuko.com,布布扣bubuko.com,布布扣
 
  1. <RelativeLayout xmlns: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">  
  6.       
  7.     <android.support.v4.view.ViewPager      
  8.         android:id="@+id/viewPager"      
  9.         android:layout_width="fill_parent"      
  10.         android:layout_height="wrap_content" />     
  11.   
  12. </RelativeLayout>  

 

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

 

[java] view plaincopybubuko.com,布布扣bubuko.com,布布扣
 
  1. package com.example.viewpagerandtabdemo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.os.Bundle;  
  7. import android.support.v4.app.Fragment;  
  8. import android.support.v4.app.FragmentTransaction;  
  9. import android.support.v4.view.ViewPager;  
  10. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  11.   
  12. import com.actionbarsherlock.app.ActionBar;  
  13. import com.actionbarsherlock.app.ActionBar.Tab;  
  14. import com.actionbarsherlock.app.SherlockFragmentActivity;  
  15.   
  16. public class MainActivity extends SherlockFragmentActivity implements ActionBar.TabListener, OnPageChangeListener{  
  17.     /** 
  18.      * 顶部Tab的title 
  19.      */  
  20.     private String [] mTabTitles;  
  21.       
  22.     /** 
  23.      * ViewPager对象的引用 
  24.      */  
  25.     private ViewPager mViewPager;  
  26.       
  27.     /** 
  28.      * 装载Fragment的容器，我们的每一个界面都是一个Fragment 
  29.      */  
  30.     private List<Fragment> mFragmentList;  
  31.       
  32.     /** 
  33.      * ActionBar对象的引用 
  34.      */  
  35.     private ActionBar mActionBar;  
  36.   
  37.     @Override  
  38.     protected void onCreate(Bundle savedInstanceState) {  
  39.         super.onCreate(savedInstanceState);  
  40.         setContentView(R.layout.activity_main);  
  41.           
  42.         //从资源文件在获取Tab的title  
  43.         mTabTitles = getResources().getStringArray(R.array.tab_title);  
  44.         mFragmentList =  new ArrayList<Fragment>();  
  45.           
  46.         mViewPager = (ViewPager) findViewById(R.id.viewPager);  
  47.         //设置Adapter  
  48.         mViewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager(), mFragmentList));  
  49.         //设置监听  
  50.         mViewPager.setOnPageChangeListener(this);  
  51.           
  52.           
  53.         //获取Action实例我们使用getSupportActionBar()方法  
  54.         mActionBar = getSupportActionBar();  
  55.           
  56.         //隐藏Title  
  57.         mActionBar.setDisplayShowTitleEnabled(false);  
  58.         //隐藏Home logo  
  59.         mActionBar.setDisplayShowHomeEnabled(false);  
  60.         //设置ActionBar的导航模式为Tab  
  61.         mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  
  62.           
  63.           
  64.         //为ActionBar添加Tab并设置TabListener  
  65.         for(int i=0; i<mTabTitles.length; i++){  
  66.              ActionBar.Tab tab = mActionBar.newTab();  
  67.              tab.setText(mTabTitles[i]);  
  68.              tab.setTabListener(this);  
  69.              mActionBar.addTab(tab, i);  
  70.         }  
  71.           
  72.           
  73.         //将Fragment加入到List中，并将Tab的title传递给Fragment  
  74.         for(int i=0; i<mTabTitles.length; i++){  
  75.             Fragment fragment = new ItemFragment();  
  76.             Bundle args = new Bundle();  
  77.             args.putString("arg", mTabTitles[i]);  
  78.             fragment.setArguments(args);  
  79.               
  80.             mFragmentList.add(fragment);  
  81.         }  
  82.           
  83.     }  
  84.       
  85.       
  86.   
  87.     @Override  
  88.     public void onTabSelected(Tab tab, FragmentTransaction ft) {  
  89.         //点击ActionBar Tab的时候切换不同的Fragment界面  
  90.         mViewPager.setCurrentItem(tab.getPosition());  
  91.     }  
  92.   
  93.     @Override  
  94.     public void onTabUnselected(Tab tab, FragmentTransaction ft) {  
  95.   
  96.     }  
  97.   
  98.     @Override  
  99.     public void onTabReselected(Tab tab, FragmentTransaction ft) {  
  100.           
  101.     }  
  102.       
  103.       
  104.     @Override  
  105.     public void onPageScrollStateChanged(int arg0) {  
  106.           
  107.     }  
  108.   
  109.     @Override  
  110.     public void onPageScrolled(int arg0, float arg1, int arg2) {  
  111.           
  112.     }  
  113.   
  114.     @Override  
  115.     public void onPageSelected(int arg0) {  
  116.         //滑动ViewPager的时候设置相对应的ActionBar Tab被选中  
  117.         mActionBar.setSelectedNavigationItem(arg0);  
  118.     }  
  119.   
  120.   
  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 plaincopybubuko.com,布布扣bubuko.com,布布扣
 
  1. package com.example.viewpagerandtabdemo;  
  2.   
  3. import java.util.List;  
  4.   
  5. import android.support.v4.app.Fragment;  
  6. import android.support.v4.app.FragmentManager;  
  7. import android.support.v4.app.FragmentStatePagerAdapter;  
  8.   
  9. public class TabPagerAdapter extends FragmentStatePagerAdapter {  
  10.     private List<Fragment> list;  
  11.       
  12.     //构造函数  
  13.     public TabPagerAdapter(FragmentManager fm, List<Fragment> list) {  
  14.         super(fm);  
  15.         this.list = list;  
  16.     }  
  17.   
  18.     @Override  
  19.     public Fragment getItem(int arg0) {  
  20.         return list.get(arg0);  
  21.     }  
  22.   
  23.     @Override  
  24.     public int getCount() {  
  25.         return list.size();  
  26.     }  
  27.   
  28. }  

 

 

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

 

[java] view plaincopybubuko.com,布布扣bubuko.com,布布扣
 
  1. package com.example.viewpagerandtabdemo;  
  2.   
  3. import android.os.Bundle;  
  4. import android.view.LayoutInflater;  
  5. import android.view.View;  
  6. import android.view.ViewGroup;  
  7. import android.widget.TextView;  
  8.   
  9. import com.actionbarsherlock.app.SherlockFragment;  
  10.   
  11.   
  12. public class ItemFragment extends SherlockFragment {  
  13.   
  14.     @Override  
  15.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  16.             Bundle savedInstanceState) {  
  17.           
  18.         View contextView = inflater.inflate(R.layout.fragment_item, container, false);  
  19.         TextView mTextView = (TextView) contextView.findViewById(R.id.textview);  
  20.           
  21.         //获取Activity传递过来的参数  
  22.         Bundle mBundle = getArguments();  
  23.         String title = mBundle.getString("arg");  
  24.           
  25.         mTextView.setText(title);  
  26.           
  27.         return contextView;  
  28.     }  
  29.   
  30.     @Override  
  31.     public void onActivityCreated(Bundle savedInstanceState) {  
  32.         super.onActivityCreated(savedInstanceState);  
  33.     }  
  34.   
  35. }  

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

 

bubuko.com,布布扣bubuko.com,布布扣

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

 

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

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

 

bubuko.com,布布扣

 

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

 源码下载，请点击

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

 

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

 

原文: http://blog.csdn.net/xiaanming/article/details/9971721

Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端,布布扣,bubuko.com

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

标签：android   style   blog   class   code   java   

原文地址：http://www.cnblogs.com/veins/p/3714508.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！