文章結尾有源碼下載。發現很多項目中都有一套屬於自己的tab樣式和風格。今天,想分享給大家一個自定義tabhost帶有勻速滑動的指示器切換fragment的Demo,略顯不才,只能分享簡單的東西,後面有源碼下載。搞了一個視頻和gif,好像這不能傳,只能傳圖片了。不懂怎麼排版,好亂的感覺。
public class MainFragment extends Fragment implements TabContentFactory, OnTabChangeListener, OnPageChangeListener{
private TabHost mTabHost;
private ViewPager mPager;
private TextView text;
private int offSet;
private int lastlocation;
private View view;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View layout = inflater.inflate(R.layout.fragment_main, null);
inintTabIndecator(layout); //滑動指示器相關設置
initTab(layout);
initPager(layout);
return layout;
}
/**
* @param layout
*/
private void inintTabIndecator(View layout) {
text = (TextView) layout.findViewById(R.id.text_indicator);
int width =getActivity().getWindowManager().getDefaultDisplay().getWidth();
int height = getActivity().getWindowManager().getDefaultDisplay().getHeight();
offSet = width / 4;//因爲我是4個tab頁,所以得到手機屏幕的寬度除以4來設置我滑動的指示器寬度(offSet)
text.setWidth(offSet);
}
private void initTab(View layout) {
mTabHost = (TabHost) layout.findViewById(android.R.id.tabhost);
mTabHost.setup();// 如果當前類沒有繼承TabActivity,必須調用這個方法初始化
for (int i = 0; i < 4; i++) {
view = getActivity().getLayoutInflater().inflate(R.layout.tab, null);
final ImageView img = (ImageView) view.findViewById(R.id.img_tabitem);
img.setTag(i); //因爲點擊圖標不會改變pager頁數,所以我給他設了值供點擊切換pager
img.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
int tag = (Integer) img.getTag(); //拿到每一個img的控件id設置監聽
mPager.setCurrentItem(tag);
}
});
mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator(view).setContent(this));
}
mTabHost.setOnTabChangedListener(this);
}
private void initPager(View layout) {
mPager = (ViewPager) layout.findViewById(R.id.pager);
// 注意在Fragment中嵌套Fragment,必須使用
// ChildFragmentMananger
FragmentManager fm = getChildFragmentManager();
mPager.setAdapter(new MyPagerAdapter(fm));
mPager.setOnPageChangeListener(this);
mPager.setOffscreenPageLimit(3);
}
class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new Fragment1();//爲了預覽加載數據時是否會卡頓,所以我在4個頁面裏都用了Fragment1,它調用了公司一個接口來實現數據更新
case 1:
return new Fragment1();
case 2:
return new Fragment1();
case 3:
return new Fragment1();
default:
break;
}
return null;
}
@Override
public int getCount() {
return 4;
}
}
@Override
public View createTabContent(String tag) {
TextView tv = new TextView(getActivity());
return tv;
}
@Override
public void onTabChanged(String tabId) {
// 得到激活的tab的position
int position = mTabHost.getCurrentTab();
// 設置ViewPager顯示position位置的item
mPager.setCurrentItem(position);
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mTabHost.setCurrentTab(position);
ObjectAnimator ofFloat = ObjectAnimator.ofFloat(text, "translationX",lastlocation, position * offSet);//這是nineold裏的一個方法
lastlocation = position * offSet;// lastlocation上一次所在位置,position * offSet即將要移動到哪
ofFloat.setInterpolator(new DecelerateInterpolator());//加速度
ofFloat.setDuration(300).start();//時間3秒, 開始
}
@Override
public void onPageScrollStateChanged(int state) {
}
}