ViewPageIndicator + ViewPager + Fragment实现类似网易新闻客户端Tab标签

1,要想使用ViewPageIndicator框架,需要先从github上下载源码,源码地址:https://github.com/JakeWharton/Android-ViewPagerIndicator,把library引入项目中

 package com.sdufe.thea.guo;

 import com.sdufe.thea.guo.fragment.IndexFragment;

 import android.os.Bundle;
 import android.app.Activity;
 import android.support.v4.app.FragmentActivity;
 import android.view.Menu;
 import android.view.Window;
 import android.widget.LinearLayout;

 public class MainActivity extends FragmentActivity {

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);

         requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.activity_main);

         getSupportFragmentManager().beginTransaction()
                 .add(R.id.ll, new IndexFragment()).commit();
     }

     @Override
     public boolean onCreateOptionsMenu(Menu menu) {
         getMenuInflater().inflate(R.menu.main, menu);
         return true;
     }

 }

上面的代码就是在activity里面放入一个fragment,很简单啦,就不解释了.

下面主要就是对于框架的使用了:

 package com.sdufe.thea.guo.fragment;

 import com.sdufe.thea.guo.R;
 import com.sdufe.thea.guo.adapter.TabPageIndicatorAdapter;
 import com.viewpagerindicator.TabPageIndicator;

 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.support.v4.view.ViewPager;
 import android.support.v4.view.ViewPager.OnPageChangeListener;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.Toast;

 public class IndexFragment extends Fragment {

     private static String[] title = { "呵呵", "哈哈", "嘿嘿", "嗷嗷" };
     private ViewPager viewPager;
     private TabPageIndicator indicator;
     private TabPageIndicatorAdapter adapter;

     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
             Bundle savedInstanceState) {
         View view = inflater.inflate(R.layout.fragment_index, null);
         viewPager = (ViewPager) view.findViewById(R.id.pager);
         indicator = (TabPageIndicator) view.findViewById(R.id.indicator);
         adapter = new TabPageIndicatorAdapter(getFragmentManager(), title);

         viewPager.setAdapter(adapter);
         indicator.setViewPager(viewPager);

         indicator.setOnPageChangeListener(new OnPageChangeListener() {

             @Override
             public void onPageSelected(int arg0) {
                 Toast.makeText(getActivity(), title[arg0], Toast.LENGTH_LONG)
                         .show();
             }

             @Override
             public void onPageScrolled(int arg0, float arg1, int arg2) {

             }

             @Override
             public void onPageScrollStateChanged(int arg0) {

             }
         });
         return view;
     }
 }

用起来很简单,毕竟都是大神们写的框架,方便我们小菜们使用,主要思路就是初始化viewPager和TabPageIndicator,给viewpager设置适配器.TabPageIndicator跟随viewPager一起滑动,顺便为其设置监听

下面贴一下适配器的代码:

 package com.sdufe.thea.guo.adapter;

 import com.sdufe.thea.guo.fragment.ItemFragment;

 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentManager;
 import android.support.v4.app.FragmentPagerAdapter;

 public class TabPageIndicatorAdapter extends FragmentPagerAdapter {

     private  String[] title;

     public TabPageIndicatorAdapter(FragmentManager fm, String[] title) {
         super(fm);
         this.title = title;
     }

     @Override
     public Fragment getItem(int arg0) {
         Fragment fragment=new ItemFragment();
         Bundle bundle=new Bundle();
         bundle.putString("arg", title[arg0]);
         fragment.setArguments(bundle);
         return fragment;
     }

     @Override
     public int getCount() {
         return title.length;
     }

     @Override
     public CharSequence getPageTitle(int position) {
         return title[position%title.length];
     }

 }

看着很熟悉吧,前面一片文章已经写过viewPager的使用了,这里主要说一下getPageTitle(int position)这个函数,如果你不重写这个函数,tab中就不会出现设置的文字,要想文字出现,必须要重写这个函数

当然如果上面写的内容你全部敲完了也就是能实现滑动,那天跟着跑的线,样式什么的都没有,下面你需要继续敲,这里是通过改变主题来设置的

 <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
         <item name="android:background">@drawable/tab_indicator</item>
         <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
         <item name="android:textSize">14sp</item>
         <item name="android:dividerPadding">8dp</item>
         <item name="android:showDividers">middle</item>
         <item name="android:paddingLeft">10dp</item>
         <item name="android:paddingRight">10dp</item>
         <item name="android:fadingEdge">horizontal</item>
         <item name="android:fadingEdgeLength">8dp</item>
     </style>

     <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
         <item name="android:typeface">monospace</item>
         <item name="android:textColor">@drawable/selector_tabtext</item>
     </style>

这里主要就是对背景的设置,对背景的设置,是通过选择器实现的

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">

     <item android:drawable="@android:color/transparent" android:state_pressed="false" android:state_selected="false"></item>
     <item android:drawable="@android:color/transparent" android:state_pressed="true" android:state_selected="false"></item>
     <item android:drawable="@drawable/base_tabpager_indicator_selected" android:state_pressed="false" android:state_selected="true"></item>
     <item android:drawable="@drawable/base_tabpager_indicator_selected" android:state_pressed="true" android:state_selected="true"></item>

 </selector>

这样就能实现你想要的滑动了,主要要改变配置文件中的主题(application中的主题作用于整个app,不是只针对于某个acticity)

注:代码是通过夏神代码改编,开始已附上地址

代码下载地址:http://download.csdn.net/detail/elinavampire/8171355

...................................................................................简单看一下源代码...............................................................................................................

首先看一下TabPageIndicator,继承自HorizontalScrollView,也就是说tab是可以实现横向滑屏

 public class TabPageIndicator extends HorizontalScrollView implements PageIndicator

继续看里面的代码

 private final OnClickListener mTabClickListener = new OnClickListener() {
         public void onClick(View view) {
             TabView tabView = (TabView)view;
             final int oldSelected = mViewPager.getCurrentItem();
             final int newSelected = tabView.getIndex();
             mViewPager.setCurrentItem(newSelected);
             if (oldSelected == newSelected && mTabReselectedListener != null) {
                 mTabReselectedListener.onTabReselected(newSelected);
             }
         }
     };

也就是说它本身就实现了点击功能,它不仅仅是实现滑动,其余的就跟实现自定义控件的内容有些相似了

我们使用的方法中还有setViewPager(viewPager)和setOnPageChangeListener()方法,就简单看一下这部分代码

void setViewPager(ViewPager view);和 void setOnPageChangeListener(ViewPager.OnPageChangeListener listener);是接口PageIndicator的方法,TabPageIndicator在自己的类里面实现了接口里面的方法

 @Override
    public void setViewPager(ViewPager view) {
        if (mViewPager == view) {
            return;
        }
        if (mViewPager != null) {
            mViewPager.setOnPageChangeListener(null);
        }
        final PagerAdapter adapter = view.getAdapter();
        if (adapter == null) {
            throw new IllegalStateException("ViewPager does not have adapter instance.");
        }
        mViewPager = view;
        view.setOnPageChangeListener(this);
        notifyDataSetChanged();
    }

这个方法是为了Bind the indicator to a ViewPager.

 @Override
     public void setOnPageChangeListener(OnPageChangeListener listener) {
         mListener = listener;
     }

这个主要就是使用viewPager的监听事件了,其实TabPageIndicator就是一个自定义控件

ok,先到这