ActionBarSherlock与Viewpager及Fragment结合实现仿新闻客户端顶部滑动切换效果

ActionBarSherlock与Fragment的结合使用非常广泛，再加上Viewpager的滑动效果，可以实现很多很炫的效果。


MainActivity.java:

[java] view plain copy 在CODE上查看代码片派生到我的代码片
  1. public class MainActivity extends SherlockFragmentActivity implements TabListener,OnPageChangeListener{  
  2.   
  3.     /*定义顶部Tab的title*/  
  4.     private String[] mTabTitles;  
  5.     /*ViewPager对象的引用*/  
  6.     private ViewPager mViewpager;  
  7.     /*装载Fragment的容器，每一个界面都是一个Fragment*/  
  8.     private List<Fragment> mFragment;  
  9.     /*ActionBar对象的引用*/  
  10.     private ActionBar mActionBar;  
  11.       
  12.     @Override  
  13.     protected void onCreate(Bundle savedInstanceState) {  
  14.         super.onCreate(savedInstanceState);  
  15.         setContentView(R.layout.activity_main);  
  16.           
  17.         /*从资源文件中获取Tab的体title*/  
  18.         mTabTitles = this.getResources().getStringArray(R.array.tab_title);  
  19.           
  20.         /*创建一个Fragment集合*/  
  21.         mFragment = new ArrayList<Fragment>();  
  22.           
  23.         /*获取Viewpager对象*/  
  24.         mViewpager = (ViewPager) this.findViewById(R.id.viewPager);  
  25.           
  26.         /*设置Adapter*/  
  27.         mViewpager.setAdapter(new TabPagerAdapter(this.getSupportFragmentManager(), mFragment));  
  28.           
  29.         /*设置viewPager切换的监听*/  
  30.         mViewpager.setOnPageChangeListener(this);  
  31.         /*获取ActionBar*/  
  32.         mActionBar = this.getSupportActionBar();  
  33.         /*设置不隐藏title*/  
  34.         mActionBar.setDisplayShowTitleEnabled(false);  
  35.         /*设置不隐藏Home Logo*/  
  36.         mActionBar.setDisplayHomeAsUpEnabled(false);  
  37.         /*设置ActionBar的导航模式为Tab*/  
  38.         mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  
  39.           
  40.         /*为ActionBar添加Tab并设置TabListener*/  
  41.         for (int i=0; i<mTabTitles.length; i++){  
  42.               
  43.             ActionBar.Tab tab = mActionBar.newTab();  
  44.             tab.setText(mTabTitles[i]);  
  45.             tab.setTabListener(this);  
  46.             mActionBar.addTab(tab, i);  
  47.         }  
  48.           
  49.         /*将Fragment加入到List中，并将Tab的title传递给Fragment*/  
  50.         for (int i=0; i<mTabTitles.length; i++){  
  51.             Fragment fragment = new ItemFreagment();  
  52.             Bundle args = new Bundle();  
  53.             args.putString("arg", mTabTitles[i]);  
  54.             fragment.setArguments(args);  
  55.               
  56.             mFragment.add(fragment);  
  57.         }  
  58.     }  
  59.   
  60.       
  61.   
  62.     public boolean onCreateOptionsMenu(com.actionbarsherlock.view.Menu menu) {  
  63.   
  64.         getSupportMenuInflater().inflate(R.menu.main, menu);  
  65.         return true;  
  66.     }  
  67.   
  68.     @Override  
  69.     public void onPageScrollStateChanged(int arg0) {  
  70.         // TODO Auto-generated method stub  
  71.           
  72.     }  
  73.   
  74.     @Override  
  75.     public void onPageScrolled(int arg0, float arg1, int arg2) {  
  76.         // TODO Auto-generated method stub  
  77.           
  78.     }  
  79.   
  80.     @Override  
  81.     public void onPageSelected(int arg0) {  
  82.       
  83.         /*滑动ViewPager的时候设置相对应的ActionBar Tab被选中*/  
  84.         mActionBar.setSelectedNavigationItem(arg0);  
  85.           
  86.     }  
  87.   
  88.     @Override  
  89.     public void onTabSelected(Tab tab, FragmentTransaction ft) {  
  90.         /*设置当前选中*/  
  91.         mViewpager.setCurrentItem(tab.getPosition());  
  92.           
  93.     }  
  94.   
  95.     @Override  
  96.     public void onTabUnselected(Tab tab, FragmentTransaction ft) {  
  97.         // TODO Auto-generated method stub  
  98.           
  99.     }  
  100.   
  101.     @Override  
  102.     public void onTabReselected(Tab tab, FragmentTransaction ft) {  
  103.         // TODO Auto-generated method stub  
  104.           
  105.     }  
  106.   
  107. }  

适配器TabPagerAdapter.java:

[java] view plain copy 在CODE上查看代码片派生到我的代码片
  1. public class TabPagerAdapter extends FragmentStatePagerAdapter {  
  2.   
  3.     /*定义一个Fragment的集合*/  
  4.     private List<Fragment> list;  
  5.       
  6.     /*构造函数*/  
  7.     public TabPagerAdapter(FragmentManager fm,List<Fragment> list) {  
  8.         super(fm);  
  9.         this.list = list;  
  10.           
  11.     }  
  12.   
  13.     @Override  
  14.     public Fragment getItem(int arg0) {  
  15.           
  16.         return list.get(arg0);  
  17.     }  
  18.   
  19.     @Override  
  20.     public int getCount() {  
  21.       
  22.         return list.size();  
  23.     }  
  24.   
  25. }  


ItemFragment.java:

[java] view plain copy 在CODE上查看代码片派生到我的代码片
  1. public class ItemFreagment extends SherlockFragment {  
  2.   
  3.     @Override  
  4.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
  5.   
  6.         View rootView =inflater.inflate(R.layout.fragment_item, container, false);  
  7.         TextView mTextView = (TextView) rootView.findViewById(R.id.textview);  
  8.           
  9.         /*获取Activity传过来的参数*/  
  10.         Bundle mBundle = getArguments();  
  11.         String title = mBundle.getString("arg");  
  12.           
  13.         mTextView.setText(title);  
  14.           
  15.           
  16.         return rootView;  
  17.     }  
  18.       
  19.     @Override  
  20.     public void onActivityCreated(Bundle savedInstanceState) {  
  21.         // TODO Auto-generated method stub  
  22.         super.onActivityCreated(savedInstanceState);  
  23.     }  
  24.       
  25.     @Override  
  26.     public void onPause() {  
  27.         // TODO Auto-generated method stub  
  28.         super.onPause();  
  29.     }  
  30. }  


activity_main.xml:

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  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.   
  8.   <android.support.v4.view.ViewPager  
  9.       android:id="@+id/viewPager"  
  10.       android:layout_width="fill_parent"  
  11.       android:layout_height="wrap_content"/>  
  12.   
  13. </RelativeLayout>  

fragment_item.xml:
[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.       
  6.     <TextView   
  7.         android:id="@+id/textview"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="fill_parent"  
  10.         android:textColor="@android:color/background_dark"  
  11.         android:textSize="18sp"  
  12.         android:gravity="center"/>  
  13.   
  14. </RelativeLayout>  


values/styles.xml:

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <resources>  
  2.   
  3.     <!--  
  4.         Base application theme, dependent on API level. This theme is replaced  
  5.         by AppBaseTheme from res/values-vXX/styles.xml on newer devices.  
  6.     -->  
  7.     <style name="AppBaseTheme" parent="android:Theme.Light">  
  8.         <!--  
  9.             Theme customizations available in newer API levels can go in  
  10.             res/values-vXX/styles.xml, while customizations related to  
  11.             backward-compatibility can go here.  
  12.         -->  
  13.     </style>  
  14.   
  15.     <!-- Application theme. -->  
  16.     <style name="AppTheme" parent="AppBaseTheme">  
  17.         <!-- All customizations that are NOT specific to a particular API-level can go here. -->  
  18.     </style>  
  19.       
  20.     <style name="Theme.ActionBarTab" parent="@style/Theme.Sherlock">  
  21.           
  22.         <!-- 去除ActionBar的Divider分割线   
  23.         <item name="actionBarDivider">@null</item>-->  
  24.           
  25.         <!-- 设置ActionBar Tab的高度 -->  
  26.         <item name="actionBarSize">45dp</item>  
  27.           
  28.           <!-- 设置ActionBar Tab字体的样式 -->  
  29.         <item name="actionBarTabTextStyle">@style/Widget.Sherlock.ActionBar.TabText</item>  
  30.           
  31.         <!-- 设置ActionBar Tab的样式,例如下面的红色指引，Tab之间的间隙等等 -->  
  32.         <item name="actionBarTabStyle">@style/Widget.Sherlock.ActionBar.TabView</item>  
  33.           
  34.         <!-- 设置ActionBar的样式，这里简单的设置了ActionBar的背景 -->  
  35.         <item name="actionBarStyle">@style/Widget.Slider.ActionBar</item>  
  36.           
  37.           
  38.     </style>  
  39.   
  40.       
  41.      <style name="Widget.Slider.ActionBar" parent="@style/Widget.Sherlock.ActionBar">    
  42.         <item name="backgroundStacked">@drawable/base_action_bar_bg</item>  
  43.     </style>  
  44.   
  45.     <style name="Widget.Sherlock.ActionBar.TabText" parent="android:Widget.Holo.ActionBar.TabText">  
  46.         <item name="android:textColor">@drawable/selector_tabtext</item>  
  47.         <item name="android:textSize">15sp</item>  
  48.     </style>  
  49.   
  50.     <style name="Widget.Sherlock.ActionBar.TabView" parent="Widget">  
  51.         <item name="android:background">@drawable/tab_indicator</item>  
  52.         <item name="android:paddingLeft">8dip</item>  
  53.         <item name="android:paddingRight">8dip</item>  
  54.     </style>   
  55. </resources>  


另外不要忘记修改主题样式！


demo效果展示：



demo下载：http://download.csdn.net/detail/lzm1340458776/7320867

posted @ 2016-11-05 16:00  天涯海角路  阅读(154)  评论(0)    收藏  举报