2015-05-16 16 views
9

mặc định chuyển hướng các tab của tôi theo mã số của tôi được hiển thị dưới đây,cách thay đổi chế độ xem tab điều hướng mặc định thành chế độ xem tab tùy chỉnh?

default navigation tab

câu hỏi của tôi là: Làm thế nào tôi có thể thay đổi các tab menu trên để các tab bên dưới kèm theo?

custom navigation tab

Làm cách nào để đạt được điều này?

Phiên bản SDK tối thiểu của tôi là 8.

Tôi đã thử rất nhiều, nhưng không thành công. Ai có thể giúp tôi không?

Cảm ơn.

+0

Tôi đề nghị để có một cái nhìn tại [ViewPagerIndicator] (http://viewpagerindicator.com/) – strings95

Trả lời

2

Tải sau hai lớp từ github

SlidingTabLayout.java

SlidingTabStrip.java

sau đó tạo file xml của bạn

<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" /> 

Và intiliaze như thế này trong Hoạt động hoặc đoạn

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

} 
Các vấn đề liên quan