首页 > 代码库 > SlidingTutorial-Android

SlidingTutorial-Android

2024-08-13 03:34:21   220人阅读

Cleveroad介绍了滑动教程库为Android


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


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


请阅读我们的 Case Study: Sliding tutorial for Android by Cleveroad  以确保您不会错过任何一个细节


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


所有你需要做的是：

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, shiftcoefficient)
 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("Unknownposition: " + 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("Unknownposition: " + 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(), "Skipbutton 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 - https://github.com/Cleveroad/SlidingTutorial-Android 
	
SlidingTutorial-Android






























        

            
                
                  
                
                

                    联系

                    我们