制作APP从启动引导页开始 - 图翼网() - 优秀UI设计师互动平台
制作APP从启动引导页开始
&原创佳作分享推荐&&&&&&版权：
“在移动互联网的产品的设计中，新手引导的设计则是在用户初次使用该移动产品时，给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式。”启动引导页面设计对APP来说非常重要，简洁的3-5个页面传递给用户APP更新的重要功能、引导用户体验、重大活动推出等等。设计师该如何设计呢？本文精选了22个APP启动引导页，供大家参考。陌陌百度地图QQ2014QQ手机QQ浏览器 糯米高德地图易信2014猫眼电影高德地图 2013圣诞节马蜂窝来往3.8淘宝生活节2013天猫双十一活动微博微视v2.2.1聚美优品One豆瓣当当百度文库QQ电影片
设计元素分类：
不要瞎找了，最牛x的设计网站&神器我都给你整理好了！！
为设计师量身定做的屏幕截图兼注释工具Teampaper Snap
教你用Hype3做APP原型的基础过场
3+3法则 六步创造几何感设计
原文：/articles/11800.html
设计师必备软件神器
SetAPP 上百个 Mac APP 免费使用
Sketch一键导出切片并压缩ImageOptim
Sketch一键对齐像素Pixel Perfecter
Sketch快速选择保留并移除重复元件Merge Duplicate Symbols
Sketch解锁所有图层Unlock All Layers
Sketch快速定位插件Search Everywhere
微信扫码抢海量福利
图翼网（）是一家专为设计师打造的交流平台。我们希望借助互联网的力量为设计师做最好的服务，提高设计行业价值！
反馈意见： 客服QQ：
关注图翼网官方微博每日获取最新学习资料
关注图翼网微信公众号每日获取最新学习资料
加入设计师学习交流群不断在这里成长Android进阶（4）
我们首次下载一个APP的时候，一般都会有一个可以滑动的引导页面用于介绍该APP的一些基本信息，通常我们都会用ViewPager来实现，本篇文章就对引导页面做了一个简单的封装，以便于开发中的复用。（效果图就不放了，大家应该都知道。。。）
ViewPager viewPager
ViewGroup viewGroup
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//构造方法传入ViewPager
AppStartUtils appStartUtils = new AppStartUtils(this,viewPager,viewGroup,new Intent(this,MainActivity.class))
//设置指示器的图标（0 为选中 1 为为选中）
appStartUtils.setIconResources(new int[]{R.mipmap.ic_launcher,R.mipmap.ic_launcher_round})
//设置引导页图片（可以本地也可以传url）
appStartUtils.setImageResources(new int[]{R.mipmap.ic_launcher_round,R.mipmap.ic_launcher_round,R.mipmap.ic_launcher_round})
appStartUtils.setImageResources(new String[]{"url","url","url"})
appStartUtils.start()
这里是基本的使用方法，你也可以继续封装源码这里：
想要实现此功能，一般情况下分三步：
1、创建一个ViewPager
2、创建对应的PagerAdapter
3、创建指示器ViewGroup
接下来我们依次实现上述步骤：
先上xml文件
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
xmlns:tools="/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.project.lx.mystartapp.MainActivity"&
android:id="@+id/vp_appstart_welcome"
android:layout_width="match_parent"
android:layout_height="match_parent" /&
android:id="@+id/view_appstart_indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40dp"
android:gravity="center_horizontal"
android:orientation="horizontal"/&
android:id="@+id/btn_appstart_skip"
android:layout_width="wrap_content"
android:text="点我跳转"
android:textSize="36sp"
android:layout_centerInParent="true"
android:layout_height="wrap_content" /&
这里很简单，就是放了一个ViewPager一个LinearLayout还有一个可以省略的Button
ViewPager是用来显示我们的导航图片的，我们要在封装类中动态去添加View；
LinearLayout是指示器，显示我们一共多少页面以及当前页面所在位置；
Button是用于末页点击跳转的按钮，我这里封装了末页继续滑动跳转，所以这个按钮也可以根据你的具体需求选择添加。
下面我们开始着手写封装类：
private ViewPager viewP
private ViewGroup viewG
private List&View&
private ImageView imageV
private ImageView[] imageV
private int currentP
private int[] imageR
private String[] imageU
private int[] iconR
private GestureDetector gestureD
private int
private int iconPx = 60;
private int padding = 80;
* 设置指示器大小
public void setIconPx(int iconPx) {
this.iconPx = iconPx;
* 设置指示器间距
public void setPadding(int padding) {
this.padding =
* 设置跳转按钮
public void setButton(Button button) {
this.button =
* 设置指示器图标资源
* iconResources
public void setIconResources(int[] iconResources) {
this.iconResources = iconR
* 设置导航页面图片资源
* imageResources
public void setImageResources(int[] imageResources) {
this.imageResources = imageR
* 设置导航页面图片资源
* imageUrls
public void setImageResources(String[] imageUrls) {
this.imageUrls = imageU
* viewPager
* indicator 指示器容器
public AppStartUtils(Context context, ViewPager viewPager, ViewGroup indicator) {
this.context =
this.viewPager = viewP
this.viewGroup =
* viewPager
* indicator
public AppStartUtils(Context context, ViewPager viewPager, ViewGroup indicator, Intent intent) {
this.context =
this.viewPager = viewP
this.viewGroup =
this.intent =
public void start() {
initData();
initListener();
* 初始化数据
private void initData() {
list = new ArrayList&&();
len = imageResources == null ? imageUrls == null ? 0 : imageUrls.length : imageResources.
for (int i = 0; i & i++) {
imageView = new ImageView(context);
imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
if (imageResources != null){
imageView.setImageResource(imageResources[i]);
if (imageUrls != null){
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
list.add(imageView);
imageViews = new ImageView[list.size()];
for (int i = 0; i & imageViews. i++) {
imageView = new ImageView(context);
imageView.setLayoutParams(new ViewGroup.LayoutParams(iconPx, iconPx));
imageView.setPadding(padding, 0, padding, 0);
imageViews[i] = imageV
if (i == 0) {
imageViews[i].setBackgroundResource(iconResources[0]);
imageViews[i].setBackgroundResource(iconResources[1]);
viewGroup.addView(imageViews[i]);
GuidePageAdapter guidePageAdapter = new GuidePageAdapter();
viewPager.setAdapter(guidePageAdapter);
* 初始化接口
public void initListener() {
GuidPageChangeListener guidPageChangeListener = new GuidPageChangeListener();
viewPager.addOnPageChangeListener(guidPageChangeListener);
gestureDetector = new GestureDetector(context, new IGestureDetectorListener());
viewPager.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
return gestureDetector.onTouchEvent(event);
这里我代码中的注释很详细，大家应该都能看懂，主要就是通过构造方法传入对应的ViewPager，ViewGroup和一个Intent用于跳转。
里面有设置图片资源、设置指示器图标资源、设置指示器图标大小，设置指示器间距等方法。
下面我们需要写一个对应的PagerAdapter
* PagerAdapter类
class GuidePageAdapter extends PagerAdapter {
public int getCount() {
return list.size();
public boolean isViewFromObject(View view, Object object) {
return view ==
public Object instantiateItem(ViewGroup container, int position) {
View view = list.get(position);
container.addView(view);
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
这里没什么好说的，简单的PagerAdapter；
接下来是对ViewPager的页面改变进行监听，和对手势操作进行监听
* 对ViewPager的页面改变进行监听
class GuidPageChangeListener implements ViewPager.OnPageChangeListener {
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
public void onPageSelected(int position) {
currentPage =
for (int i = 0; i & imageViews. i++) {
imageViews[position].setBackgroundResource(iconResources[0]);
if (position != i) {
imageViews[i].setBackgroundResource(iconResources[1]);
if (button != null){
if (position == len - 1){
button.setVisibility(View.VISIBLE);
button.setVisibility(View.GONE);
public void onPageScrollStateChanged(int state) {
* 对手势操作监听
class IGestureDetectorListener implements GestureDetector.OnGestureListener {
public boolean onDown(MotionEvent e) {
return false;
public void onShowPress(MotionEvent e) {
public boolean onSingleTapUp(MotionEvent e) {
return false;
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
return false;
public void onLongPress(MotionEvent e) {
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (button != null){
return false;
if (currentPage == list.size() - 1) {
if ((e1.getX() - e2.getX()) & 0) {
if (intent != null) {
context.startActivity(intent);
((Activity) context).finish();
return false;
手势操作这里我进行了判断是否有按钮，有了点击按钮跳转，没有则滑动跳转。
自此封装已经完成，别的项目中只需要把此类拷贝过去，直接用就可以了。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：24720次
排名：千里之外
原创：25篇
(1)(3)(2)(3)(9)(1)(6)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'褰撳墠浣嶇疆:
闃呰?姝ｆ枃
杩欎釜闂??涓