如何将默认导航选项卡视图更改为自定义选项卡视图？

Question

根据我的代码我的默认导航标签如下所示，

我的问题是：如何将上面的导航标签更改为下面附加的标签？

我将如何实现这一目标？

我的最低SDK版本是8。

我已经尝试了很多，但没有成功。 任何人都可以帮我吗？

谢谢。

Answer 1

从github下载以下两个类

SlidingTabLayout.java

SlidingTabStrip.java

然后创建您的xml文件

<com.emaple.ui.SlidingTabLayout
            android:id="@+id/sliding_tabs_home"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager_home"
            android:layout_width="match_parent"
            android:layout_height="0px"
            android:layout_weight="1"
            android:background="@android:color/white" />

并在Activity或片段中像这样intiliaze

 private void init() {
        viewpagerHome.setAdapter(new SamplePagerAdapter());
        slidingTabsHome.setViewPager(viewpagerHome);
    }

SamplePagerAdapter.java

class SamplePagerAdapter extends PagerAdapter {

/**
 * @return the number of pages to display
 */
@Override
public int getCount() {
    return 10;
}

/**
 * @return true if the value returned from {@link #instantiateItem(ViewGroup, int)} is the
 * same object as the {@link View} added to the {@link ViewPager}.
 */
@Override
public boolean isViewFromObject(View view, Object o) {
    return o == view;
}

/**
 * Return the title of the item at {@code position}. This is important as what this method
 * returns is what is displayed in the {@link SlidingTabLayout}.
 * <p/>
 * Here we construct one using the position value, but for real application the title should
 * refer to the item's contents.
 */
@Override
public CharSequence getPageTitle(int position) {
    return "Item " + (position + 1);
}

/**
 * Instantiate the {@link View} which should be displayed at {@code position}. Here we
 * inflate a layout from the apps resources and then change the text view to signify the position.
 */
@Override
public Object instantiateItem(ViewGroup container, int position) {
    // Inflate a new layout from our resources
    View view = HomeActivity.this.getLayoutInflater().inflate(R.layout.pager_item,
            container, false);
    // Add the newly created View to the ViewPager
    container.addView(view);

    // Retrieve a TextView from the inflated View, and update it's text
    TextView title = (TextView) view.findViewById(R.id.item_title);
    title.setText(String.valueOf(position + 1));

    Log.i(LOG_TAG, "instantiateItem() [position: " + position + "]");

    // Return the View
    return view;
}

/**
 * Destroy the item from the {@link ViewPager}. In our case this is simply removing the
 * {@link View}.
 */
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView((View) object);
    Log.i(LOG_TAG, "destroyItem() [position: " + position + "]");
}

}