-
Notifications
You must be signed in to change notification settings - Fork 377
Configure Tutorial Pages
First of all you need to create XML layouts for your tutorial pages. Specify IDs for those views that would be used in the parallax effect. Then there are two ways how you can configure your pages.
This provider will automatically create instances of PageFragment with proper PageOptions configuration. This method will suit to those developers who don't need any additional work inside of PageFragment
such as user input handling, etc.
First, create an instance of TutorialPageOptionsProvider
:
final TutorialPageOptionsProvider tutorialPageOptionsProvider = new TutorialPageOptionsProvider() {
@NonNull
@Override
public PageOptions provide(int position) {
@LayoutRes int pageLayoutResId;
TransformItem[] tutorialItems;
switch (position) {
case 0: {
pageLayoutResId = R.layout.fragment_page_first;
tutorialItems = new TransformItem[]{
TransformItem.create(R.id.ivFirstImage, Direction.LEFT_TO_RIGHT, 0.2f),
...,
TransformItem.create(R.id.ivEighthImage, Direction.RIGHT_TO_LEFT, 0.07f)
};
break;
}
case 1: {
pageLayoutResId = R.layout.fragment_page_second;
tutorialItems = new TransformItem[]{
TransformItem.create(R.id.ivFirstImage, Direction.RIGHT_TO_LEFT, 0.2f),
...,
TransformItem.create(R.id.ivEighthImage, Direction.LEFT_TO_RIGHT, 0.07f)
};
break;
}
case 2: {
pageLayoutResId = R.layout.fragment_page_third;
tutorialItems = new TransformItem[]{
TransformItem.create(R.id.ivFirstImage, Direction.RIGHT_TO_LEFT, 0.2f),
...,
TransformItem.create(R.id.ivSeventhImage, Direction.LEFT_TO_RIGHT, 0.14f)
};
break;
}
default: {
throw new IllegalArgumentException("Unknown position: " + position);
}
}
return PageOptions.create(pageLayoutResId, position, tutorialItems);
}
};
Then pass it to tutorial options builder:
final TutorialOptions tutorialOptions = TutorialFragment.newTutorialOptionsBuilder(context)
...
.setTutorialPageProvider(tutorialPageOptionsProvider)
...
.build();
That's it.
If you need to handle something inside tutorial's page fragment, you need to create your own implementation of PageFragment
and override PageFragment#getLayoutResId() and PageFragment#getTransformItems() methods:
public class FirstPageFragment extends PageFragment {
@Override
protected int getLayoutResId() {
return R.layout.fragment_page_first;
}
@Override
protected TransformItem[] provideTransformItems() {
return new TransformItem[] {
// TransformItem.create(view for transform, moving direction, shift coefficient)
TransformItem.create(R.id.ivFirstImage, Direction.LEFT_TO_RIGHT, 0.2f),
...
TransformItem.create(R.id.ivEighthImage, Direction.RIGHT_TO_LEFT, 0.07f)
};
}
}
Then create an instance of TutorialPageProvider and override providePage(int)
method:
final TutorialPageProvider<Fragment> tutorialPageProvider = new TutorialPageProvider<Fragment>() {
@NonNull
@Override
public Fragment providePage(int position) {
switch (position) {
case 0:
return new FirstPageFragment();
...
default:
throw new IllegalArgumentException("Unknown position: " + position);
}
}
};
and pass it to tutorial options builder:
final TutorialOptions tutorialOptions = TutorialFragment.newTutorialOptionsBuilder(context)
...
.setTutorialPageProvider(tutorialPageProvider)
...
.build();
NOTE: if you're using android.app.Fragment
class for your fragments, you should extend your tutorial pages fragments from PageFragment
class. If you're using android.support.v4.app.Fragment
class, then extend tutorial pages fragments from PageSupportFragment. Don't forget to pass a proper Fragment
type during creation of TutorialPageProvider
instance.