Thêm tiêu đề vào ViewPager

Question

Tôi đã thiết lập một ViewPager cho các tab có thể vuốt và bây giờ tôi muốn thêm tiêu đề ở đầu trang để cho biết phần nào đang được hiển thị.

Đây là mã cho đến nay:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" > 

    <android.support.v4.view.ViewPager 
     android:id="@+android:id/viewpager" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" /> 

</LinearLayout> 

MainActivity.java

public class MainActivity extends FragmentActivity { 

    private PagerAdapter mPagerAdapter; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     super.setContentView(R.layout.activity_main); 

     this.initialisePaging(); 
    } 

    private void initialisePaging() { 

     List<Fragment> fragments = new Vector<Fragment>(); 

     // Add fragments here 
     fragments.add(Fragment.instantiate(this, PickerFragment.class.getName())); 
     fragments.add(Fragment.instantiate(this, DisplayFragment.class.getName())); 

     this.mPagerAdapter = new PageAdapter(super.getSupportFragmentManager(), fragments); 
     ViewPager pager = (ViewPager)super.findViewById(R.id.viewpager); 
     pager.setAdapter(this.mPagerAdapter); 
    } 

} 

PageAdapter.java

public class PageAdapter extends FragmentPagerAdapter { 

    private List<Fragment> fragments; 

    public PageAdapter(FragmentManager fm, List<Fragment> fragments) { 
     super(fm); 
     this.fragments = fragments; 
    } 

    @Override 
    public Fragment getItem(int position) { 
     return this.fragments.get(position); 
    } 

    @Override 
    public int getCount() { 
     return this.fragments.size(); 
    } 
} 

Tác phẩm này và tôi có thể vuốt giữa hai tab nhưng không có tiêu đề.

Tôi muốn kết thúc với cái gì đó trông như thế này:

tôi sẽ đánh giá cao bất kỳ giúp đỡ về làm thế nào tôi có thể thiết lập này.

Answer 1

Sau khi xem PagerTitleStrip, như đề xuất trong các ý kiến, tôi đã làm như sau:

Tôi đã thêm một PagerTitleStrip trong activity_main.xml:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" > 

    <android.support.v4.view.ViewPager 
     android:id="@+android:id/viewpager" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" > 

     <android.support.v4.view.PagerTitleStrip 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="top" /> 
    </android.support.v4.view.ViewPager> 

</LinearLayout> 

Sau đó, trong PageAdapter.java Tôi đã thêm phương thức sau:

@Override 
public CharSequence getPageTitle(int position) { 
    return "Title Here"; 
} 

Answer 2

Bạn không cần tự mình triển khai bộ điều hợp. Đơn giản làm như sau:

mPagerAdapter = new PageAdapter(super.getSupportFragmentManager()); 

mPagerAdapter.addFragment(Fragment.instantiate(this, "Title that you want"); 

Và bố trí của bạn được thiếu PagerTitleStrip, thấy điều này Link

Các ViewPager chỉ là container. PagerTitleStrip nên được bao gồm trong bố cục ViewPager, đó là tiêu đề cho tiêu đề.

Answer 3

Trics chính là viewpager lồng nhau. Một cuộc thảo luận tốt và hấp dẫn về người xem và tiêu đề. https://github.com/codepath/android_guides/wiki/ViewPager-with-FragmentPagerAdapter

Answer 4

Vì hỗ trợ Android Design library 22.2.0, bạn có thể sử dụng lớp TabLayout. Nó rất giống với PagerTitleStrip, bạn chỉ cần chỉ định tiêu đề trên ViewPagerAdapter.

@Override 
public CharSequence getPageTitle(int position) { 
    return titleList.get(position); 
} 

và thêm nó vào bất kỳ vị trí nào trong xml của bạn.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <android.support.design.widget.TabLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 
</LinearLayout> 

và cuối cùng, buộc ViewPager và TabLayout cùng nhau.

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); 
tabLayout.setupWithViewPager(viewPager); 

Theo ý kiến ​​của tôi, nó trông đẹp hơn PagerTitleStrip. TabLayout cũng thích hợp cho các tab tương tự trên Google Play. Nếu bạn muốn làm tùy biến như @ cjayem13 cho biết (thay đổi màu tab, màu văn bản, màu sắc được lựa chọn vv), nó rất dễ dàng để đạt được .. xem official docs hoặc CodePath's guide để biết thêm chi tiết.