這篇文章是“全棧工程師移動開發實踐”的系列教程的一部分，在講解了服務端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引導頁全部制作完成，大家可以根據需求添加不同的樣式，就是這么簡單哦，附上效果圖：
如果您喜歡我們的文章，點贊就好，您的認可是我分享的最大動力。
