2012-12-29 45 views
9

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ị.Thêm tiêu đề vào ViewPager

Đâ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:

Google play

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.

+2

Bạn muốn có http://developer.android.com/reference/android/support/v4/view/PagerTitleStrip.html (google nó cho một hướng dẫn, thật dễ dàng để thiết lập). Có một cái nhìn tại https://github.com/JakeWharton/Android-ViewPagerIndicator nếu bạn muốn một cái gì đó fancier. – Luksprog

Trả lời

27

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

Bất kỳ ý tưởng nào về cách thay đổi màu của tiêu đề? Tôi muốn một màu khác nhau trên mỗi trang và tôi chỉ tìm ra cách áp dụng kiểu thay đổi màu cho tất cả. Cảm ơn. – cjayem13

+0

@ cjayem13 Bạn chỉ có thể sử dụng "setTabIndicatorColor" tôi nghĩ. Thing là, tôi không biết làm thế nào để làm những việc khác với nó, chẳng hạn như làm cho nó trông giống như các ứng dụng liên lạc của Lollipop: http://stackoverflow.com/q/27621425/878126 –

+0

Làm thế nào để bạn thay đổi các tiêu đề cho quan điểm cá nhân? – santafebound

-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 đề.

1

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 ViewPagerTabLayout 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.

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