谈谈并实践Android App引导页

　　　　　　　　　　
　　这篇文章是“全栈工程师移动开发实践”的系列教程的一部分，在讲解了服务端spring boot的基本使用后，我们来从头看看一款App开发的来龙去脉。

1.什么是引导页？

　　我们首次安装某个App的时候经常会看到图一的引导页，那么到底什么是引导页呢？所谓的引导页，从字面意思讲就是就是引导用户，目的是让用户学习app的使用方法，明确地指出app能为用户带来哪些价值，从而吸引用户。

2.引导页是不是必要的？

　　很多非专业的互联网公司，通常都会给自己的App设置引导页，对于他们而言，引导页就是标配，没有的话显得很low。事实上不是这样的，引导页应该根据app的人群定位，以及自身功能定位，结合用户体验，来决定是不是设置。目前的技术水平，很难有实现不了的需求，所以良好的用户体验是产品生存的根本所在。大部分优秀的App，基本上学习成本很低，用户看一眼基本就知道该怎么使用。因此，引导页不是每个app必须要做的，除了以下几个方面可以酌情考虑。
（1）App比较新颖，创新性很强，初次接触可能需要花时间去了解。这种情况下，就可以做个引导页，把App的独特之处介绍给用户，同时用简洁的文字或图片向用户介绍其功能，这是非常有必要的。
（2）App改版，使得老用户的使用习惯发生很大改变的情况下，需要像用户说明改动点，让用户更加容易切换到新的App。
（3）一些颠覆传统的操作方式，比如手势，左右手习惯问题，应该向用户交代清楚，以免引起误解，影响用户体验。
　　除了以上场景或者一些特殊情况，引导页对于App并没有多大影响，不要迷恋引导页，因地制宜。

３.手把手教你如何设置引导页

　　首先介绍一下ButterKnife，学习android开发一定使用过findViewById()和setonclicktListener()，尤其是控件对象比较多的时候，一坨一坨的代码真的是够够的了。ButterKnife通过java注解自动生成java代码的形式来完成工作，使用 @Bind注解并传入一个View ID，Butter Knife 就可以找到并且自动地对你的布局中的View进行转换并绑定到类成员上。
举例如下：

class ExampleActivity extends Activity {    @Bind(R.id.title)     TextView title;     @Bind(R.id.subtitle)     TextView subtitle;      @Override public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.example_layout);         ButterKnife.bind(this);     }}

　　其次，设置引导页，一般都会使用到ViewPager。ViewPager是一个允许使用者左右滑动数据页面的布局管理器，可以通过一个PagerAdapter适配器来管理要显示的页面。我们来看看ViewPager的官方api的继承关系：

ViewPager继承自ViewGroup，是个容器类，内部可以嵌套其他View。
有了以上基础，我们开始设置引导页。
（１）添加布局文件：activity_guide.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <LinearLayout        android:id="@+id/indicator"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_gravity="center_horizontal"        android:layout_marginBottom="100dp"        android:orientation="horizontal" /></RelativeLayout>

（2）ViewPager中的视图样式我们默认显示图片，所以定义PagerAdapter显示的样式的xml，activity_guide_item.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/white"    android:orientation="vertical">    <ImageView        android:id="@+id/guide_image"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:scaleType="center" /></LinearLayout>

（3）新建GuideActivity ，设置四张引导页，分别对应guide_1，guide_2，guide_3，guide_4，同时选择当前页，下方的图标显示选中ic_indicators_selected，未选中显示ic_indicators_default。

/** * 引导页 */public class GuideActivity extends BaseActivity  {    private static final String TAG = GuideActivity.class.getSimpleName();    @Bind(R.id.viewpager)    ViewPager viewpager;    @Bind(R.id.indicator)    LinearLayout indicator;    private List<View> viewList;    private ImageView[] indicatorImgs;    private static final int GUIDE_PAGE_COUNT = 4;    private int[] imgResArr = new int[]{R.mipmap.guide_1, R.mipmap.guide_2, R.mipmap.guide_3, R.mipmap.guide_4};    public static void start(Context context) {        Intent intent = new Intent(context, GuideActivity.class);        context.startActivity(intent);    }    @Override    protected void onCreate(Bundle savedInstanceState) {        setContentView(R.layout.activity_guide);        ButterKnife.bind(this);        super.onCreate(savedInstanceState);    }    @Override    public void initData() {        indicatorImgs = new ImageView[GUIDE_PAGE_COUNT];        viewList = new ArrayList<View>(GUIDE_PAGE_COUNT);        for (int i = 0; i < GUIDE_PAGE_COUNT; i++) {            View view = LayoutInflater.from(this).inflate(R.layout.activity_guide_item, null);            view.setBackgroundResource(R.color.white);            ((ImageView) view.findViewById(R.id.guide_image)).setBackgroundResource(imgResArr[i]);            viewList.add(view);            indicatorImgs[i] = new ImageView(this);            if (i == 0) {                indicatorImgs[i].setBackgroundResource(R.mipmap.ic_indicators_selected);            } else {                indicatorImgs[i].setBackgroundResource(R.mipmap.ic_indicators_default);                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(-2, -2);                layoutParams.setMargins(20, 0, 0, 0);                indicatorImgs[i].setLayoutParams(layoutParams);            }            indicator.addView(indicatorImgs[i]);        }    }    @Override    public void initTitle() {    }    public void setListener(){};    @Override    public void initView() {        viewpager.setAdapter(new PagerAdapter() {            @Override            public int getCount() {                return viewList.size();            }            @Override            public boolean isViewFromObject(View view, Object object) {                return view == object;            }            @Override            public void destroyItem(ViewGroup container, int position, Object object) {                container.removeView(viewList.get(position));            }            @Override            public Object instantiateItem(ViewGroup container, int position) {                container.addView(viewList.get(position));                return viewList.get(position);            }        });        viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                setIndicator(position);            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    public void setIndicator(int targetIndex) {        for (int i = 0; i < indicatorImgs.length; i++) {            indicatorImgs[i].setBackgroundResource(R.mipmap.ic_indicators_selected);            if (targetIndex != i) {                indicatorImgs[i].setBackgroundResource(R.mipmap.ic_indicators_default);            }        }    }}

到这里，App引导页全部制作完成，大家可以根据需求添加不同的样式，就是这么简单哦，附上效果图：
　　　　　　　　　
　　如果您喜欢我们的文章，点赞就好，欢迎管制我的公众号“充电实践”您的认可是我分享的最大动力。