Добавление заголовков в ViewPager

Я настроил ViewPager для прокручиваемых вкладок, и теперь я хочу добавить заголовки в верхней части страницы, чтобы указать, какой фрагмент отображается.

этот код до сих пор:

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();
    }
}

это работает, и я могу провести между двумя вкладками, но нет заголовков.

Я хочу в конечном итоге с чем-то вроде этого:

Google play

Я был бы признателен за любую помощь в том, как я мог бы это настроить.

11
android android-viewpager

4 ответов

после PagerTitleStrip, как предложено в комментариях, я сделал следующее:

добавил PagerTitleStrip на 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>

затем в PageAdapter.java я добавил следующий метод:

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

С Поддержкой Android библиотека дизайна 22.2.0, вы можете использовать TabLayout класса. Это очень похоже на PagerTitleStrip, вам просто нужно указать заголовок в ViewPagerAdapter. 

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

и добавьте его в любом месте вашего xml.

<?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>

и, наконец, связать свою ViewPager и TabLayout вместе.

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

на мой взгляд, это выглядит лучше, чем PagerTitleStrip. TabLayout также подходит для Google Play-подобных вкладок. Если вы хотите сделать настройку, как @cjayem13 сказал (изменить цвет вкладки, цвет текста, выбранный цвет и т. д.), это очень легко достичь.. см.официальные документы или руководство CodePath для более подробной информации.

3

основные трики-это вложенный viewpager. Хороший и descrptive обсуждение на viewpager и название. https://github.com/codepath/android_guides/wiki/ViewPager-with-FragmentPagerAdapter

2

вам не нужно реализовывать адаптер самостоятельно. Просто сделайте следующее:

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

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

и ваш макет не хватает PagerTitleStrip, см. Это ссылке

ViewPager является только контейнером. PagerTitleStrip должен быть включен в макет ViewPager, это для заголовка.

-3