Android 開源框架ActionBarSherlock 和 ViewPager 仿網易新聞客戶端

時間  2019-12-12
標籤 android 開源 框架 actionbarsherlock viewpager 網易 客戶端 欄目 Android 简体版
原文   原文鏈接

轉載請註明出處：http://blog.csdn.net/xiaanming/article/details/9971721html

你們都知道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的使用java


把紅色框框標記的文件導入Eclipse裏面，咱們能夠先看下例子，來了解下ActionBar的一些使用狀況android

  • 咱們新建一個Android工程，叫ViewPagerAndTab，而後指定ActionBarSherlock爲ViewPagerAndTab的庫工程，右鍵工程--->Properties


經過上面的幾步咱們就指定ActionBarSherlock爲ViewPagerAndTab的庫工程，接下來咱們就能在3.0如下使用ActionBar，我這裏使用的是ActionBar  Tab和ViewPager仿網易新聞，咱們看看主要代碼的編寫git

1.先看佈局文件，裏面一個ViewPager，很是簡單github

[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.     <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 Tabapp

[java] view plain copy 在CODE上查看代碼片 派生到個人代碼片
  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而不是PagerAdapteride

[java] view plain copy 在CODE上查看代碼片 派生到個人代碼片
  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 plain copy 在CODE上查看代碼片 派生到個人代碼片
  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" 運行項目看看效果，下圖一是項目的效果，圖二是網易的效果


是否是相差很大呢？人家下面的指示條是紅色的，咱們作出來的是藍色的，人家選中Tab的字體顏色是紅色，咱們的不變色等等，那麼咱們要怎麼才能作出網易新聞的那樣子的效果，咱們須要改變其style,改變以下佈局

[html] view plain copy 在CODE上查看代碼片 派生到個人代碼片
  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運行效果



好了，今天的講解到此結束，有疑問的朋友請在下面留言,有興趣的能夠看看 開源框架ViewPageIndicator 和 ViewPager 仿網易新聞客戶端Tab標籤

 源碼下載，請點擊

不少朋友說本身在4.1上面怎麼設置style沒效果，首先這個庫是在2.X的機器上面使用ActionBar,3.0之後就是使用Andriod自帶的ActionBar,因此在3.0以上的系統使用的style爲android自帶的style，因此咱們要將style文件作下修改，以下

[html] view plain copy 在CODE上查看代碼片 派生到個人代碼片
  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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程