Заголовки страниц, PagerTitleStrip и PagerTabStrip

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

Для добавления заголовков мы можем использовать элементы PagerTitleStrip и PagerTabStrip. Главная разница между ними заключается в том, что заголовки в PagerTabStrip фактически представляют собой интерактивные вкладки, нажав на которые, мы можем перейти к определенной странице. А на элементе PagerTitleStrip все заголовки просто являются статическим текстом.

Используем PagerTabStrip. Для этого возьмем проект из прошлой темы.

Вначале изменим файл activity_main.xml:

<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

</android.support.v4.view.ViewPager>

Изменим код фрагмента PageFragment, чтобы он мог устанавливать заголовок вкладок:

package com.example.eugene.viewpagerapp;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class PageFragment extends Fragment {

private int pageNumber;

public static PageFragment newInstance(int page) {
PageFragment fragment = new PageFragment();
Bundle args=new Bundle();
args.putInt("num", page);
fragment.setArguments(args);
return fragment;
}

public PageFragment() {
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
pageNumber = getArguments() != null ? getArguments().getInt("num") : 1;
}
static String getTitle(Context context, int position) {
return "Страница № " + String.valueOf(position+1);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View result=inflater.inflate(R.layout.fragment_page, container, false);
TextView pageHeader=(TextView)result.findViewById(R.id.displayText);
pageHeader.setText("Фрагмент " + String.valueOf(pageNumber+1));
return result;
}
}

Здесь добавлен метод getTitle(), задача которого - установка заголовка страницы.

Теперь изменим код адаптера MyAdapter:

package com.example.eugene.viewpagerapp;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyAdapter extends FragmentPagerAdapter {
private Context context = null;

public MyAdapter(Context context, FragmentManager mgr) {
super(mgr);
this.context = context;
}

@Override
public int getCount() {
return (10);
}

@Override
public Fragment getItem(int position) {
return (PageFragment.newInstance(position));
}

@Override
public String getPageTitle(int position) {
return (PageFragment.getTitle(context, position));
}
}

С помощью метода getPageTitle() мы можем возвратить заголовок для вкладки в PagerTabStrip. Фактически в нем мы обращаемся к методу getTitle() фрагмента для установки заголовка.

И в конце немного подредактируем код MainActivity, изменив ее метод onCreate:

package com.example.eugene.viewpagerapp;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

ViewPager pager=(ViewPager)findViewById(R.id.pager);
pager.setAdapter(new MyAdapter(this, getSupportFragmentManager()));
}
}

Все остальное остается без изменений. Запустим проект на выполнение и увидим интерактивные вкладки-заголовки поверх страниц.