APP首頁面Tab實作(三) ViewPagerIndicator+ViewPager實作Tab

3. ViewPagerIndicator+ViewPager

ViewPagerIndicator是一個開源庫，通過ViewPagerIndicator+ViewPager可以實作頁面的點選和滑動效果，與UnderlinePageIndicator結合使用可以實作Tab下面的下劃線滑動效果

3.1 導入ViewPagerIndicator

//在對應module添加即可
implementation 'com.mcxiaoke.viewpagerindicator:library:2.4.1'
           

3.2 主xml布局代碼

<com.viewpagerindicator.TabPageIndicator
        android:id="@+id/ti_updatings"
        android:layout_width="match_parent"
        android:layout_height="35dp">
    </com.viewpagerindicator.TabPageIndicator>

    <com.viewpagerindicator.UnderlinePageIndicator
        android:id="@+id/underline_indicator"
        android:layout_width="fill_parent"
        android:layout_height="3dp"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_updatings"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="6dp"
        android:layout_weight="1"></android.support.v4.view.ViewPager>
           

3.3 建構對應頁面的xml布局檔案

3.4 建立對應頁面的類

public class FragmentUpdatings extends Fragment {

    private View currentView;
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        currentView = inflater.inflate(R.layout.fragment_market_mine_goods_wwc,container,false);
        
        initView...
        initEvent...

        return  currentView;
    }
           

3.5 建立對應的FragmentPagerAdapter類

public class MarketInTabAdapter extends FragmentPagerAdapter {

    public static String[] TITLE_IN_MARKETIN = {"我要購入","我有閑置"};

    public MarketInTabAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
    	//傳回對應建立的Fragment對象
        if(i == 0) {
            FragmentMarketInGR fragmentMarketInGR = new FragmentMarketInGR();
            return fragmentMarketInGR;
        } 
        ...
        return null;
    }

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return TITLE_IN_MARKETIN[position];
    }
}
           

3.6 首頁面中定義ViewPager、TabPageIndicator、UnserlinePageIndicator及對應的Adapter

private ViewPager vp_updatings;
private TabPageIndicator ti_updatings;
private MarketInTabAdapter mTabAdapter;
private UnderlinePageIndicator mUnderlinePageIndicator;
           

3.7 初始化對應的控件

vp_updatings = currentView.findViewById(R.id.vp_updatings);
ti_updatings = currentView.findViewById(R.id.ti_updatings);
mTabAdapter = new UpdatingsTabAdapter(getSupposeFragmentManager());
mUnderlinePageIndicator = currentView.findViewById(R.id.underline_indicator);
           

3.8 控件間連結

vp_updatings.setAdapter(mTabAdapter);//Viewpager設定擴充卡
ti_updatings.setViewPager(vp_updatings, 0);//Tab的初始位置

mUnderlinePageIndicator.setViewPager(vp_updatings);//為UnderIndicator設定ViewPager
mUnderlinePageIndicator.setFades(false);//一直顯示
ti_updatings.setOnPageChangeListener(mUnderlinePageIndicator);//tab改變對應UnderIndicator改變