Android简单实现引导页

1. 引言

引导页是App开发中常见的功能之一，它通常会在用户第一次进入App时展示。引导页一般用来介绍App的功能、特点，或者是展示一些美观的图片，使用户对App有更直观的感受。Android的开发者可以利用ViewPager和Fragment来实现引导页的功能。

2. 实现步骤

2.1 在布局文件中添加ViewPager控件

在布局文件中添加一个ViewPager控件，用来展示引导页的内容。设置ViewPager的宽高均为match_parent，以让其占据整个屏幕。

<androidx.viewpager.widget.ViewPager
     android:id="@+id/view_pager"
     android:layout_width="match_parent"
     android:layout_height="match_parent"/>

2.2 编写引导页页面 Fragment

在项目中新建一个Fragment，用来展示引导页的内容。这里我们编写一个GuideFragment类，继承自Fragment，为该类编写布局文件guide_fragment.xml。其中，我们可以在该布局文件中添加一些ImageView控件，用于展示图片。当然，ImageView的数量可以根据需要进行修改。

public class GuideFragment extends Fragment {

     private int mResId;

     public GuideFragment(int resId) {
          mResId = resId;
     }

     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
                              Bundle savedInstanceState) {
          View view = inflater.inflate(R.layout.guide_fragment, null);
          ImageView imageView = view.findViewById(R.id.image_view);
          imageView.setImageResource(mResId);
          return view;
     }
}

在这里，我们定义了一个构造函数，该函数的参数resId为对应的图片资源id。然后，我们重写了onCreateView方法，在方法中将对应的图片资源设置给ImageView控件，并返回该View。需要注意的是，所创建的Fragment在每次滑动ViewPager时，会被销毁并重新创建。因此，我们需要将对应图片的资源id作为参数传进去，并在onCreateView方法中设置图片。

2.3 编写ViewPager的数据适配器

为ViewPager编写自己的数据适配器，将之前的GuideFragment添加到ViewPager中。这里我们通过继承PagerAdapter来实现数据适配器。在PagerAdapter中，我们需要实现getItemCount、getItem、instantiateItem、destroyItem方法。在getItem方法中，我们构造一个新的GuideFragment实例，并将资源id作为参数传入。在instantiateItem方法中，我们需要将新创建的GuideFragment添加到ViewPager中，并返回该视图。需要注意的是，我们需要将生成的所有Fragment的List保存下来，以备之后使用。

public class GuidePagerAdapter extends PagerAdapter {

     private List<GuideFragment> mList;

     public GuidePagerAdapter(Context context) {
          mList = new ArrayList<>();
          mList.add(new GuideFragment(R.drawable.guide1));
          mList.add(new GuideFragment(R.drawable.guide2));
          mList.add(new GuideFragment(R.drawable.guide3));
     }

     @Override
     public int getCount() {
          return mList.size();
     }

     @Override
     public boolean isViewFromObject(View view, Object object) {
          return view == object;
     }

     @Override
     public Object instantiateItem(ViewGroup container, int position) {
          GuideFragment fragment = mList.get(position);
          View view = fragment.onCreateView(LayoutInflater.from(container.getContext()), container, null);
          container.addView(view);
          return view;
     }

     @Override
     public void destroyItem(ViewGroup container, int position, Object object) {
          container.removeView((View) object);
     }

     @Override
     public int getItemPosition(Object object) {
          return super.getItemPosition(object);
     }

     @Override
     public void startUpdate(ViewGroup container) {
          super.startUpdate(container);
     }

     @Override
     public void finishUpdate(ViewGroup container) {
          super.finishUpdate(container);
     }
}

注意，在实现PagerAdapter时，getItemPosition、startUpdate以及finishUpdate这三个方法要重写，但是可以不做任何操作。

2.4 设置ViewPager的滑动监听事件，并在最后一页添加“下一步”跳转按钮

在xml布局文件中，我们可以添加一个简单的按钮用于跳转。并为ViewPager设置滑动监听事件，当滑动到最后一页时，显示该按钮。

<Button
     android:id="@+id/btn_start"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="center_horizontal|bottom"
     android:layout_marginBottom="@dimen/activity_vertical_margin"
     android:text="下一步" />

Java代码实现：

ViewPager viewPager = findViewById(R.id.view_pager);
GuidePagerAdapter adapter = new GuidePagerAdapter(this);
viewPager.setAdapter(adapter);
Button startButton = findViewById(R.id.btn_start);
startButton.setVisibility(View.GONE);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
     @Override
     public void onPageScrolled(int position, float positionOffset,
                                int positionOffsetPixels) {

     }

     @Override
     public void onPageSelected(int position) {
          if (position == adapter.getCount()-1) {
               startButton.setVisibility(View.VISIBLE);
          } else {
               startButton.setVisibility(View.GONE);
          }
     }

     @Override
     public void onPageScrollStateChanged(int state) {

     }
});
startButton.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
          // 点击按钮后完成相应的操作，例如跳转到主页面
     }
});

在滑动ViewPager时，我们需要设置一个滑动监听事件。当滑动到最后一页时，显示按钮并为该按钮添加一个点击监听事件，用于完成跳转操作。

3. 示例

在互联网上有很多实现引导页功能的开源库，下面将介绍两个常用的示例。

3.1 AppIntro

AppIntro是一个非常常用的引导页库，可以实现漂亮的引导页、动画、权限请求等。该库已开源，相关代码可以在Github上找到。

使用AppIntro，我们可以通过以下几步轻松实现自己的引导页。

1.在app的build.gradle中添加以下依赖

dependencies {
     implementation 'com.github.AppIntro:AppIntro:6.1.0'
}

2.定义AppIntroActivity并设置AppIntro的样式

public class MyIntroActivity extends AppIntro {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        addSlide(new Fragment1());
        addSlide(new Fragment2());
        addSlide(new Fragment3());

        showStatusBar(false);
        setBarColor(getResources().getColor(R.color.colorPrimary));
        setSeparatorColor(Color.TRANSPARENT);
        setProgressButtonEnabled(true);
        setSkipButtonVisible();
        setDoneText("Start");
    }

    @Override
    public void onSkipPressed(Fragment currentFragment) {
        super.onSkipPressed(currentFragment);
       // 点击跳过按钮的相应操作
    }

    @Override
    public void onDonePressed(Fragment currentFragment) {
        super.onDonePressed(currentFragment);
        // 点击完成按钮的相应操作
    }
}

在该Activity中，我们可以通过不同的方法设置AppIntro的样式，例如设置底部导航的颜色，设置完成按钮的文字内容等。

3.定义Fragment，并在Fragment中添加需要的内容

public class Fragment1 extends AppIntroFragment {

    @Override
    public int getLayoutId() {
        return R.layout.fragment1;
    }

    @Override
    public void init(Bundle savedInstanceState) {
        ImageView imageView = getView().findViewById(R.id.image_view);
        imageView.setImageResource(R.drawable.guide1);
    }
}

其中，我们可以在Fragment内添加自己需要的内容，例如图片、文字等。

至此，使用AppIntro实现自己的引导页功能已经完成了。

3.2 MaterialIntroView

MaterialIntroView是另一个常用于制作App引导页的库，它能够支持自定义动画效果、镂空效果等。该库同样在Github上开源。

使用MaterialIntroView，我们可以通过以下几步轻松实现自己的引导页。

1.在app的build.gradle中添加以下依赖

dependencies {
     implementation 'com.github.codemybrainsout:materialintro-screen:0.0.5@aar'
     implementation 'com.nineoldandroids:library:2.4.0'
}

2.在需要添加引导效果的View中使用MaterialIntroView

TextView introView = findViewById(R.id.text_view);
new MaterialIntroView.Builder(MainActivity.this)
      .enableDotAnimation(true)
      .setFocusGravity(FocusGravity.CENTER)
      .setFocusType(Focus.ALL)
      .setDelayMillis(500)
      .enableIcon(false)
      .performClick(true)
      .setInfoText("Hello there! Click here to learn more.")
      .setTarget(introView)
      .setUsageId("intro_card1")
      .show();

在使用MaterialIntroView时，我们在需要添加引导效果的View中添加MaterialIntroView，并通过各种方法来控制引导效果的样式。

到这里，使用MaterialIntroView实现自己的引导页功能已经完成了。

4. 结论

通过这篇文章，我们了解了使用ViewPager和Fragment实现引导页的基本原理，并且介绍了两个常用的第三方库AppIntro和MaterialIntroView。通过这些库的使用，我们可以轻松地创造出自己的引导页，并且展示给用户。