首页 > 代码库 > 【Android界面实现】使用ScrollingTabsView实现有滑动标签的ViewPager效果

【Android界面实现】使用ScrollingTabsView实现有滑动标签的ViewPager效果

转载自:http://blog.csdn.net/zhaokaiqiang1992/article/details/40378285

    在前面的文章中,我们使用支持包里面的PagerTabStrip实现了有滑动标签的viewPager效果,今天,再给大家介绍另外一种开源项目,来实现类似的效果。

    在这篇文章中,我们将使用第三方开源项目ViewPagerExtensions实现。

    先看效果

技术分享

    ViewPagerExtensions的github地址:https://github.com/astuetz/ViewPagerExtensions

    首先给出整个项目的目录结构

技术分享

 

    在这个demo之中,我直接把资源文件全部放在了项目之中,方便使用。

    首先,我们看一下布局文件activity_main.xml。

 

[html] view plaincopy技术分享技术分享
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     xmlns:app="http://schemas.android.com/com.heli17.tradeshowcloud"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     android:orientation="vertical" >  
  8.   
  9.     <com.astuetz.viewpager.extensions.ScrollingTabsView  
  10.         android:id="@+id/scrolling_tabs"  
  11.         android:layout_width="fill_parent"  
  12.         android:layout_height="38dp"  
  13.         android:background="@drawable/tab_unselected_holo"  
  14.         app:dividerDrawable="@android:color/white" />  
  15.   
  16.     <android.support.v4.view.ViewPager  
  17.         android:id="@+id/pager"  
  18.         android:layout_width="fill_parent"  
  19.         android:layout_height="fill_parent" />  
  20.   
  21. </LinearLayout>  

    我们在布局文件中,添加了一个scrollingTabsView控件,这个就是上面指示器的自定义控件。

 

    布局写好了之后,我们就可以在代码里面设置适配器了。

    代码如下:

 

[java] view plaincopy技术分享技术分享
 
  1. package com.example.scrollingtabsdemo;  
  2.   
  3. import java.util.ArrayList;  
  4.   
  5. import android.app.Activity;  
  6. import android.os.Bundle;  
  7. import android.support.v4.app.Fragment;  
  8. import android.support.v4.app.FragmentActivity;  
  9. import android.support.v4.app.FragmentManager;  
  10. import android.support.v4.app.FragmentStatePagerAdapter;  
  11. import android.support.v4.view.ViewPager;  
  12. import android.view.View;  
  13. import android.widget.Button;  
  14.   
  15. import com.astuetz.viewpager.extensions.ScrollingTabsView;  
  16. import com.astuetz.viewpager.extensions.TabsAdapter;  
  17.   
  18. public class MainActivity extends FragmentActivity {  
  19.   
  20.     private ViewPager viewPager;  
  21.     private ScrollingTabsAdapter scrollingTabsAdapter;  
  22.     private ScrollingTabsView scrollingTabs;  
  23.     private FragsAdapter pagerAdapter;  
  24.   
  25.     @Override  
  26.     protected void onCreate(Bundle savedInstanceState) {  
  27.         super.onCreate(savedInstanceState);  
  28.         setContentView(R.layout.activity_main);  
  29.   
  30.         viewPager = (ViewPager) findViewById(R.id.pager);  
  31.         // 设置适配器  
  32.         pagerAdapter = new FragsAdapter(getSupportFragmentManager());  
  33.         viewPager.setAdapter(pagerAdapter);  
  34.   
  35.         // 设置缓存fragment的数量  
  36.         viewPager.setOffscreenPageLimit(2);  
  37.         viewPager.setCurrentItem(0);  
  38.         viewPager.setPageMargin(4);  
  39.   
  40.         scrollingTabsAdapter = new ScrollingTabsAdapter(this);  
  41.         // 设置滑动标签的适配器和宿主ViewPager  
  42.         scrollingTabs = (ScrollingTabsView) findViewById(R.id.scrolling_tabs);  
  43.         scrollingTabs.setAdapter(scrollingTabsAdapter);  
  44.         scrollingTabs.setViewPager(viewPager);  
  45.   
  46.     }  
  47.   
  48.     /** 
  49.      * ViewPager适配器 
  50.      *  
  51.      * @author zhaokaiqiang 
  52.      *  
  53.      */  
  54.     private class FragsAdapter extends FragmentStatePagerAdapter {  
  55.   
  56.         private ArrayList<Fragment> fragments;  
  57.   
  58.         public FragsAdapter(FragmentManager fm) {  
  59.             super(fm);  
  60.   
  61.             fragments = new ArrayList<Fragment>();  
  62.             for (int i = 0; i < scrollingTabsAdapter.mTitles.length; i++) {  
  63.                 fragments.add(new MyFragment(i));  
  64.             }  
  65.   
  66.         }  
  67.   
  68.         @Override  
  69.         public int getCount() {  
  70.             return fragments.size();  
  71.         }  
  72.   
  73.         @Override  
  74.         public Fragment getItem(int position) {  
  75.             return fragments.get(position);  
  76.         }  
  77.     }  
  78.   
  79.     /** 
  80.      * 滑动标签适配器 
  81.      *  
  82.      * @author zhaokaiqiang 
  83.      *  
  84.      */  
  85.     private class ScrollingTabsAdapter implements TabsAdapter {  
  86.   
  87.         private Activity mContext;  
  88.         public String[] mTitles = { "首页", "推荐", "最新", "娱乐", "设置" };  
  89.   
  90.         public ScrollingTabsAdapter(Activity ctx) {  
  91.             this.mContext = ctx;  
  92.         }  
  93.   
  94.         @Override  
  95.         public View getView(int position) {  
  96.   
  97.             Button tab = (Button) mContext.getLayoutInflater().inflate(  
  98.                     R.layout.tab_scrolling, null);  
  99.             tab.setText(mTitles[position]);  
  100.             return tab;  
  101.         }  
  102.   
  103.     }  
  104.   
  105. }  

    在代码里面,我们需要设置两个适配器,一个是ViewPager的,用来更换显示的fragment,另外一个就是上面滑动的tab布局的,用来控制每一个tab显示的布局,在getView方法里面返回。

 

    这里的R.layout.tab_scrolling是自定义的一个布局,代码如下:

 

[html] view plaincopy技术分享技术分享
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <Button xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="0dp"  
  4.     android:layout_height="wrap_content"  
  5.     android:background="@drawable/tab_holo"  
  6.     android:gravity="center"  
  7.     android:paddingBottom="8dp"  
  8.     android:paddingLeft="30dip"  
  9.     android:paddingRight="30dip"  
  10.     android:paddingTop="8dp"  
  11.     android:textColor="@android:color/holo_blue_light"  
  12.     android:textSize="16sp" />  

    大家可以根据自己的需求进行更改。

 

    这种滑动的tab适合界面比较多的情况,所以在Viewpagr的适配器的选择上使用的是FragmentPagerStateAdapter,如果滑动的界面在3个或者3个以下,推荐使用FixedTabsView,使用方法和这个完全一样,另外,ViewPager的适配器换成FragmentPagerAdapter比较合适。

    这个项目的demo的github地址:https://github.com/ZhaoKaiQiang/ScrollingTabsDemo

【Android界面实现】使用ScrollingTabsView实现有滑动标签的ViewPager效果