ViewPageIndicator + ViewPager + Fragment實現類似網易新聞客戶端Tab標簽

ViewPageIndicator + ViewPager + Fragment實現類似網易新聞客戶端Tab標簽

最近生病,腦子不太清楚,今天一哥們問我一個問題,也沒搞明白他在問什麼,後來明白之後我還以為腦子燒壞了呢,記下問題所在,共分享

這哥們看著夏神的博客寫的,附上地址:http://blog.csdn.net/xiaanming/article/details/10766053,他想使用大神博客中說的ViewPageIndicator框架,但是大神繼承的是FragmentActivity,這哥們的繼承自Fragment,可能是不太明白,具體他的問題出現在哪裡,我沒有他的代碼,我也不清楚

開始正題:

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

2.由於這哥們需要的是繼承fragment的,所以就按照他的需求寫的demo

翠花不上菜,只上代碼:

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中就不會出現設置的文字,要想文字出現,必須要重寫這個函數

當然如果上面寫的內容你全部敲完了也就是能實現滑動,那天跟著跑的線,樣式什麼的都沒有,下面你需要繼續敲,這裡是通過改變主題來設置的

這裡主要就是對背景的設置,對背景的設置,是通過選擇器實現的

這樣就能實現你想要的滑動了,主要要改變配置文件中的主題(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,先到這