【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效果

标签：

原文地址：http://www.cnblogs.com/kingfly13/p/4205044.html