1. 首页
  2. 开发

SlidingTutorial-Android

header.jpg

Cleveroad介绍了滑动教程库为Android

嘿,伙计们,希望你还没有开始开发Android应用教程然而,当我们已经完成了自己的工作的一部分。别担心,我们只从良好的动机行事。我们的目标是帮助您创建在一个快速和简单的方式滑动教程。因此,我们已经做了一些工作,瞧!一个简单的Android滑动教程库为您服务。

本发明是要缓解结构设计问题,但不能在同一时间限制你的想象力的舒展。我们采取了适应性方面的照顾。所以,你的应用程序是不会看其他Android元素之间的外星人。

请阅读我们的 案例分析:由Cleveroad滑动教程为Android 以确保您不会错过任何一个细节

应用视差效果会让你的产品介绍样子谷歌应用程式教程。

所有你需要做的是: 1.您的教程的每个屏幕创建背景设计(与移动设计协助) 2.您的教程的每个屏幕创建图标 3.按照下面的说明

运用 首先,添加依赖的gradle到您的build.gradle:

dependencies { compile ‘com.cleveroad:slidingtutorial:1.0.3’ }

有利用图书馆的两种常见的变种:通过 TutorialPageProvider 并通过 TutorialPageOptionsProvider。

通过教程PageProvider

你必须创建页面片段,每个片段必须从扩大 PageFragment,覆盖 PageFragment#getLayoutResId() 和 PageFragment#getTransformItems()。你也需要创建图像布局的xml文件。

public class FirstCustomPageFragment 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.ivSecondImage, Direction.RIGHT_TO_LEFT, 0.06f),
            TransformItem.create(R.id.ivThirdImage, Direction.LEFT_TO_RIGHT, 0.08f),
            TransformItem.create(R.id.ivFourthImage, Direction.RIGHT_TO_LEFT, 0.1f),
            TransformItem.create(R.id.ivFifthImage, Direction.RIGHT_TO_LEFT, 0.03f),
            TransformItem.create(R.id.ivSixthImage, Direction.RIGHT_TO_LEFT, 0.09f),
            TransformItem.create(R.id.ivSeventhImage, Direction.RIGHT_TO_LEFT, 0.14f),
            TransformItem.create(R.id.ivEighthImage, Direction.RIGHT_TO_LEFT, 0.07f)
    };
}

}

通过 TutorialPageProvider 实例 TutorialOptions.Builder#setTutorialPageProvider(TutorialPageProvider).

public class CustomTutorialFragment extends TutorialFragment {

private static final int TOTAL_PAGES = 3;

private final TutorialPageProvider<Fragment> mTutorialPageProvider = new TutorialPageProvider<Fragment>() {
    @NonNull
    @Override
    public Fragment providePage(int position) {
        switch (position) {
            case 0:
                return new FirstCustomPageFragment();
            case 1:
                return new SecondCustomPageFragment();
            case 2:
                return new ThirdCustomPageFragment();
            default:
                throw new IllegalArgumentException("Unknown position: " + position);
        }
    }
};

@Override
protected TutorialOptions provideTutorialOptions() {
    return newTutorialOptionsBuilder(getContext())
            .setPagesCount(TOTAL_PAGES)
            .setTutorialPageProvider(mTutorialPageProvider)
            .build();
}

}

通过教程页面OptionsProvider

或者你也可以创建 TutorialPageOptionsProvider并将它传递给 TutorialOptions.Builder#setTutorialPageProvider(TutorialPageOptionsProvider)。它会自动提供 PageFragment 实例指定 PageOptions 组态。

public class CustomTutorialFragment extends TutorialFragment {

private static final int TOTAL_PAGES = 3;

private final TutorialPageOptionsProvider mTutorialPageOptionsProvider = 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.ivSecondImage, Direction.RIGHT_TO_LEFT, 0.06f),
                        TransformItem.create(R.id.ivThirdImage, Direction.LEFT_TO_RIGHT, 0.08f),
                        TransformItem.create(R.id.ivFourthImage, Direction.RIGHT_TO_LEFT, 0.1f),
                        TransformItem.create(R.id.ivFifthImage, Direction.RIGHT_TO_LEFT, 0.03f),
                        TransformItem.create(R.id.ivSixthImage, Direction.RIGHT_TO_LEFT, 0.09f),
                        TransformItem.create(R.id.ivSeventhImage, Direction.RIGHT_TO_LEFT, 0.14f),
                        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.ivSecondImage, Direction.LEFT_TO_RIGHT, 0.06f),
                        TransformItem.create(R.id.ivThirdImage, Direction.RIGHT_TO_LEFT, 0.08f),
                        TransformItem.create(R.id.ivFourthImage, Direction.LEFT_TO_RIGHT, 0.1f),
                        TransformItem.create(R.id.ivFifthImage, Direction.LEFT_TO_RIGHT, 0.03f),
                        TransformItem.create(R.id.ivSixthImage, Direction.LEFT_TO_RIGHT, 0.09f),
                        TransformItem.create(R.id.ivSeventhImage, Direction.LEFT_TO_RIGHT, 0.14f),
                        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.ivSecondImage, Direction.LEFT_TO_RIGHT, 0.06f),
                        TransformItem.create(R.id.ivThirdImage, Direction.RIGHT_TO_LEFT, 0.08f),
                        TransformItem.create(R.id.ivFourthImage, Direction.LEFT_TO_RIGHT, 0.1f),
                        TransformItem.create(R.id.ivFifthImage, Direction.LEFT_TO_RIGHT, 0.03f),
                        TransformItem.create(R.id.ivSixthImage, Direction.LEFT_TO_RIGHT, 0.09f),
                        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);
    }
};

@Override
protected TutorialOptions provideTutorialOptions() {
    return newTutorialOptionsBuilder(getContext())
            .setPagesCount(TOTAL_PAGES)
            .setTutorialPageProvider(mTutorialPageOptionsProvider)
            .build();
}

}

与应用程序兼容性库(推荐方式)使用

下面是在代码中使用更改列表 SlidingTutorial 库 AppCompat 图书馆:

  • 您的片段页必须扩展 PageSupportFragment。
  • 您的教程片段必须扩展 TutorialSupportFragment.
  • TutorialPageProvider 必须提供 android.support.v4.app.Fragment 实例。就这样。

**定制

设置跳过按钮点击监听器**

你必须实现 View.OnClickListener 接口,并提供给 TutorialOptions.Builder#setOnSkipClickListener(OnClickListener). 例:

public class CustomTutorialFragment extends TutorialFragment { @Override protected TutorialOptions provideTutorialOptions() { return newTutorialOptionsBuilder(getContext()) .setOnSkipClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getContext(), “Skip button clicked”, Toast.LENGTH_SHORT).show(); } }) // setup other configuration … .build(); } }

设置页面颜色

只需提供颜色值的数组 TutorialOptions.Builder#setPagesColors(int array). 颜色数组的长度必须等于页面数。

public class CustomTutorialFragment extends TutorialFragment {

private static final int TOTAL_PAGES = 3;

private int[] pagesColors = new int[] { Color.RED, Color.BLUE, Color.DKGRAY };

@Override
protected TutorialOptions provideTutorialOptions() {
    return newTutorialOptionsBuilder(getContext())
            .setPagesCount(TOTAL_PAGES)
            .setPagesColors(pagesColors)
            // setup other configuration ...
            .build();
}

}

无限滚动

要循环教程页面已设置 TutorialOptions.Builder#setUseInfiniteScroll(boolean) 至 true

从去年的教程页面滚动到你的内容 – 自动删除片段教程

如果你想提供从去年的教程页面平滑过渡到内容 – 只是设置 TutorialOptions.Builder#setUseAutoRemoveTutorialFragment(boolean) 至 true

指标视图定制

有 IndicatorOptions 类配置指标视图。这里的例子:

public class CustomTutorialFragment extends TutorialFragment { @Override protected TutorialOptions provideTutorialOptions() { return newTutorialOptionsBuilder(getContext()) .setIndicatorOptions(IndicatorOptions.newBuilder(getContext()) .setElementSizeRes(R.dimen.indicator_size) .setElementSpacingRes(R.dimen.indicator_spacing) .setElementColorRes(android.R.color.darker_gray) .setSelectedElementColor(android.R.color.white) .setRenderer(Drawable.create(getContext())) .build()) // setup other configuration … .build(); } }

正如你所看到的,您可以指定元素大小,元间距(即填充),元素的颜色,选择元素颜色和实施 Renderer接口。里面有2默认实现 Renderer.Factory:

  • Renderer.Factory#newCircleRenderer() - 绘制圆形指标
  • Renderer.Factory#newSquareRenderer() - 绘制方形指标

此外样品模块中有两种实现方式:

  • DrawableRenderer - 绘制绘制背景指标
  • RhombusRenderer - 绘制菱形指标

添加OnTutorialPageChangeListener

你可以听的改变页面事件 – 只是实现 OnTutorialPageChangeListener 并通过添加监听器 TutorialFragment#addOnTutorialPageChangeListener(OnTutorialPageChangeListener). 要删除监听器使用 TutorialFragment#removeOnTutorialPageChangeListener(OnTutorialPageChangeListener). 在 OnTutorialPageChangeListener#onPageChanged(int) 方法您将收到一个页面索引每次页面的变化。如果启用 TutorialOptions.Builder#setUseAutoRemoveTutorialFragment(boolean) 至 如此,您将收到 TutorialFragment.EMPTY_FRAGMENT_POSITION (要么 TutorialSupportFragment.EMPTY_FRAGMENT_POSITION 如果您正在使用支持库)的页面索引。

public class CustomTutorialFragment extends TutorialFragment implements OnTutorialPageChangeListener {

private static final String TAG = "CustomTutorialFragment";

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    addOnTutorialPageChangeListener(this);
}

@Override
public void onPageChanged(int position) {
    Log.i(TAG, "onPageChanged: position = " + position);
    if (position == TutorialFragment.EMPTY_FRAGMENT_POSITION) {
        Log.i(TAG, "onPageChanged: Empty fragment is visible");
    }
}

}

GitHub link

收藏

好久不见~有一些格式没有调到位哈~

登录后可以进行评论。没有账号?马上注册