Fragment結合nineold包實現滑動tab頁

    文章結尾有源碼下載。發現很多項目中都有一套屬於自己的tab樣式和風格。今天,想分享給大家一個自定義tabhost帶有勻速滑動的指示器切換fragment的Demo,略顯不才,只能分享簡單的東西,後面有源碼下載。搞了一個視頻和gif,好像這不能傳,只能傳圖片了。不懂怎麼排版,好亂的感覺。

wKioL1Q3pdHApA7pAAEUkT5-Rxg842.jpg

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源碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章