2015-05-16 1 views
9

мои по умолчанию вкладки навигации, как на моих кодов показано ниже,Как изменить вкладку вкладки навигации по умолчанию на настроенное представление вкладки?

default navigation tab

мой вопрос: Как бы я изменить выше вкладку навигации на вкладке ниже прилагается?

custom navigation tab

Как я этого добиться?

Моя минимальная версия SDK является 8.

Я пробовал много, но не было никакого успеха. Может ли кто-нибудь помочь мне?

Спасибо.

+0

Я предлагаю взглянуть на [ViewPagerIndicator] (http://viewpagerindicator.com/) – strings95

ответ

2

Скачать следующие два класса от 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" /> 

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

}