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

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

默认导航选项卡

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

自定义导航标签

我将如何实现这一目标?

我的最低SDK版本是8。

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

谢谢。

    从github下载以下两个类

    SlidingTabLayout.java

    SlidingTabStrip.java

    然后创建您的xml文件

      

    并在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}. * 

    * 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 + "]"); } }