XUI 熟练使用之（三） -----------启动页( SimpleGuideBanner的使用)

App 启动页 SimpleGuideBanner 的使用

今天我将和大家一起学习 XUI 中 启动页 的使用，XUI 中的启动页的实现与轮播条基本类似。

下面我们就直接上代码开始演示吧。
在开始之前，需要先将 XUI 引入到你的项目中，你可以查看我的另一篇文章 ：XUI 熟练使用之（一） ----------- 将 XUI 引入项目 。

（1）、首先在 activity_launcher.xml 文件中使用 SimpleGuideBanner

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LauncherActivity">

    <com.xuexiang.xui.widget.banner.widget.banner.SimpleGuideBanner
        android:id="@+id/sgb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:bb_barPaddingLeft="8dp"
        app:bb_isLoopEnable="false" />

</LinearLayout>

（2）、创建 LauncherActivity 作为启动页，并未 启动页控件设置动画效果、页面滚动效果等。

public class LauncherActivity extends AppCompatActivity {

    private SimpleGuideBanner mSimpleGuideBanner;


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

        mSimpleGuideBanner = findViewById(R.id.sgb);

        showSimpleGuideBanner();

    }

    private void showSimpleGuideBanner() {
        mSimpleGuideBanner
                .setIndicatorWidth(6)
                .setIndicatorHeight(6)
                .setIndicatorGap(12)
                .setIndicatorCornerRadius(3.5f)
                .setSelectAnimClass(ZoomInEnter.class)//设置显示器选中动画
                .setTransformerClass(RotateDownTransformer.class)//页面滚动效果
                .barPadding(0, 10, 0, 10)
                .setSource(getUserGuides())//设置图片资源
                .startScroll();

        //点击跳过或者立即体验的监听
        mSimpleGuideBanner.setOnJumpClickListener(new SimpleGuideBanner.OnJumpClickListener() {
            @Override
            public void onJumpClick() {
                //跳转到 MainActivity
                Intent intent = new Intent(LauncherActivity.this,MainActivity.class);
                startActivity(intent);
            }
        });

    }

    private static List<Object> getUserGuides() {
        List<Object> list = new ArrayList<>();
        list.add(R.drawable.guide_img_1);
        list.add(R.drawable.guide_img_2);
        list.add(R.drawable.guide_img_3);
        list.add(R.drawable.guide_img_4);
        return list;
    }
}

(3)、在清单文件中将 LauncherActivity 设置为 LAUNCHER Activity：

<activity android:name=".LauncherActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

（4）、MainActivity 的内容使用默认就可以。

示例效果如下：

在 XUI 中，作者已经为我们提供了以下几种页面切换的动态效果：

DepthTransformer.class  //3D旋转切换
FadeSlideTransformer.class //侧滑逐渐消失切换
FlowTransformer.class  //翻转切换
RotateDownTransformer.class //向下旋转切换
RotateUpTransformer.class //向上旋转切换
ZoomOutSlideTransformer.class //侧滑缩小切换

通过 simpleGuideBanner.setTransformerClass(ZoomOutSlideTransformer.class) 即可。
页面切换效果，我们也可以自己实现，只要继承 ViewPager.PageTransformer 类，并重写 transformPage(@NonNull View page, float position) 方法即可。
XUI 提供的 FadeSlideTransformer 侧滑逐渐消失切换的实现如下：

public class FadeSlideTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(@NonNull View page, float position) {

        page.setTranslationX(0);

        if (position <= -1.0F || position >= 1.0F) {
            page.setAlpha(0.0F);
        } else if (position == 0.0F) {
            page.setAlpha(1.0F);
        } else {
            // position is between -1.0F & 0.0F OR 0.0F & 1.0F
            page.setAlpha(1.0F - Math.abs(position));
        }
    }
}

本次示例代码的项目已托管到github 中，欢迎查阅。
示例代码地址 — 在 userguidemoudle moudle 中。