文章结尾有×××。发现很多项目中都有一套属于自己的tab样式和风格。今天,想分享给大家一个自定义tabhost带有匀速滑动的指示器切换fragment的Demo,略显不才,只能分享简单的东西,后面有×××。搞了一个视频和gif,好像这不能传,只能传图片了。不懂怎么排版,好乱的感觉。

Fragment结合nineold包实现滑动tab页_第1张图片

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) {

}


}

                    Fragment结合tabhost实现可滑动指示器Demo源码