Android使用ViewPager实现启动引导页

 更新时间:2021年04月14日 14:32:48   作者:南尘  
这篇文章主要为大家详细介绍了Android使用ViewPager实现第一次启动引导页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等。
一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢。

今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果。/p>

先上图:

下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.
 先上XML. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.example.nanchen.guidepagedemo.GuideActivity">
 
 <android.support.v4.view.ViewPager
 android:id="@+id/guide_vp"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 </android.support.v4.view.ViewPager>
 <LinearLayout
 android:id="@+id/guide_ll_point"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal"
 android:layout_alignParentBottom="true"
 android:layout_marginBottom="40dp"
 android:gravity="center_horizontal">
 </LinearLayout>
 <ImageButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/guide_ib_start"
 android:src="@mipmap/btn_start"
 android:layout_centerHorizontal="true"
 android:layout_above="@+id/guide_ll_point"
 android:background="@null"
 android:visibility="gone"/>
</RelativeLayout>

在准备一个Adapter,这个没什么好说的。 

package com.example.nanchen.guidepagedemo;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;

/**

 * Created by 南尘 on 2016/7/10.

 */
public class GuidePageAdapter extends PagerAdapter {
 private List<View> viewList;
 public GuidePageAdapter(List<View> viewList) {
 this.viewList = viewList;

 }
 /**

 * @return 返回页面的个数

 */

 @Override
 public int getCount() {
 if (viewList != null){
  return viewList.size();
 }
 return 0;
 }

 /**
 * 判断对象是否生成界面
 * @param view
 * @param object
 * @return
 */
 @Override
 public boolean isViewFromObject(View view, Object object) {
 return view == object;

 } 

 /**
 * 初始化position位置的界面
 * @param container
 * @param position
 * @return
 */
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
 container.addView(viewList.get(position));
 return viewList.get(position);

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

 }
}

最后就是我们的Activity了

package com.example.nanchen.guidepagedemo;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
/**

 * 实现首次启动的引导页面

 */
public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{
 
 private ViewPager vp;
 private int []imageIdArray;//图片资源的数组
 private List<View> viewList;//图片资源的集合
 private ViewGroup vg;//放置圆点
//实例化原点View
 private ImageView iv_point;
 private ImageView []ivPointArray;
 //最后一页的按钮
 private ImageButton ib_start;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
 setContentView(R.layout.activity_guide);
 ib_start = (ImageButton) findViewById(R.id.guide_ib_start);
 ib_start.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  startActivity(new Intent(GuideActivity.this,MainActivity.class));
  finish();
  }

 });
 //加载ViewPager
 initViewPager(); 

 //加载底部圆点
 initPoint();
 }
 
 /**
 * 加载底部圆点
 */

 private void initPoint() {

 //这里实例化LinearLayout

 vg = (ViewGroup) findViewById(R.id.guide_ll_point);

 //根据ViewPager的item数量实例化数组

 ivPointArray = new ImageView[viewList.size()];

 //循环新建底部圆点ImageView,将生成的ImageView保存到数组中

 int size = viewList.size();
 for (int i = 0;i<size;i++){
  iv_point = new ImageView(this);
  iv_point.setLayoutParams(new ViewGroup.LayoutParams(20,20));
  iv_point.setPadding(30,0,30,0);//left,top,right,bottom
  ivPointArray[i] = iv_point;
  //第一个页面需要设置为选中状态,这里采用两张不同的图片

  if (i == 0){

  iv_point.setBackgroundResource(R.mipmap.full_holo);

  }else{
  iv_point.setBackgroundResource(R.mipmap.empty_holo);
  }
  //将数组中的ImageView加入到ViewGroup
  vg.addView(ivPointArray[i]);

 }
 }
 /**
 * 加载图片ViewPager
 */
private void initViewPager() {
 vp = (ViewPager) findViewById(R.id.guide_vp);
 //实例化图片资源
 imageIdArray = new int[]{R.mipmap.guide1,R.mipmap.guide2,R.mipmap.guide3};
 viewList = new ArrayList<>();
 //获取一个Layout参数,设置为全屏
 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
  LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);
 //循环创建View并加入到集合中
 int len = imageIdArray.length;
 for (int i = 0;i<len;i++){
  //new ImageView并设置全屏和图片资源
  ImageView imageView = new ImageView(this);
  imageView.setLayoutParams(params);
  imageView.setBackgroundResource(imageIdArray[i]);
  //将ImageView加入到集合中
  viewList.add(imageView);
 }
 //View集合初始化好后,设置Adapter
 vp.setAdapter(new GuidePageAdapter(viewList));
 //设置滑动监听
 vp.setOnPageChangeListener(this);
 }
 @Override
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 }

 /**
 * 滑动后的监听
 * @param position
 */
 @Override
 public void onPageSelected(int position) {
 //循环设置当前页的标记图
 int length = imageIdArray.length;
 for (int i = 0;i<length;i++){
  ivPointArray[position].setBackgroundResource(R.mipmap.full_holo);
  if (position != i){
  ivPointArray[i].setBackgroundResource(R.mipmap.empty_holo);
  }
 }
 //判断是否是最后一页,若是则显示按钮
 if (position == imageIdArray.length - 1){
  ib_start.setVisibility(View.VISIBLE);
 }else {
  ib_start.setVisibility(View.GONE);
 }
 }
 @Override
 public void onPageScrollStateChanged(int state) {
 
 }
} 

总的来说实现流程比较简单。
 1)先加载ViewPager,新建ImageView并添加到View集合中,然后设置Adapter并显示。
 2)然后加载LinearLayout,放置原点图片,同样新建ImageView设置背景后放在圆点图集合中。
 3)最后设置ViewPager的滑动监听事件,在滑动完成的监听OnPageSelected方法中,设置对应的圆点为选中,如果是最后一页,则显示按钮。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android使用ViewDragHelper实现仿QQ6.0侧滑界面(一)

    Android使用ViewDragHelper实现仿QQ6.0侧滑界面(一)

    这篇文章主要介绍了Android使用ViewDragHelper实现仿QQ6.0侧滑界面(一)的相关资料,需要的朋友可以参考下
    2016-02-02
  • 在Android中动态添加Panel框架的实现代码

    在Android中动态添加Panel框架的实现代码

    项目经常会有这种需求,就是想动态的在某个界面上添加一个Panel。比如,有一个按钮,点击后会显示下拉菜单式的界面。这种需求,就属于动态添加一个Panel。需求多了,就要研究是否可以抽象出通用的框架代码,以方便开发,所以就有了以下内容
    2013-05-05
  • Android中协调滚动布局的实现代码

    Android中协调滚动布局的实现代码

    这篇文章主要介绍了Android中协调滚动常用的布局实现,类似这样的协调滚动布局,当底部列表滑动的时候,顶部的布局做响应的动作,我们都可以通过 AppBarLayout 和 MotionLayout 来实现,本文通过实例代码介绍的非常详细,需要的朋友参考下吧
    2022-06-06
  • Android直播系统平台搭建之图片实现阴影效果的方法小结

    Android直播系统平台搭建之图片实现阴影效果的方法小结

    这篇文章主要介绍了Android直播系统平台搭建, 图片实现阴影效果的若干种方法,本文给大家带来三种方法,每种方法通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • Jetpack Compose基础组件之文字组件

    Jetpack Compose基础组件之文字组件

    这篇文章主要为大家介绍了Jetpack Compose基础组件之文字组件使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Android实现图片双指缩放

    Android实现图片双指缩放

    这篇文章主要为大家详细介绍了Android实现图片双指缩放,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Android Theme以及解决启动黑屏的方法详解

    Android Theme以及解决启动黑屏的方法详解

    这篇文章主要给大家介绍了关于Android Theme以及解决启动黑屏的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-08-08
  • Android编程设计模式之中介者模式详解

    Android编程设计模式之中介者模式详解

    这篇文章主要介绍了Android编程设计模式之中介者模式,结合实例形式详细分析了Android中介者模式的概念、原理、使用场景、用法及相关操作注意事项,需要的朋友可以参考下
    2017-12-12
  • Android中Window的管理深入讲解

    Android中Window的管理深入讲解

    这篇文章主要给大家介绍了关于Android中Window管理的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • Android使用Service实现IPC通信的2种方式

    Android使用Service实现IPC通信的2种方式

    这篇文章主要介绍了Android使用Service实现IPC通信的2种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03

最新评论