Android简单实现引导页

本文实例为大家分享了Android简单实现引导页的具体代码,供大家参考,具体内容如下

一.思路

我们选择ViewPager + View + ImageView 来实现引导页效果,ViewPager用来实现滑动,View则是用来显示每页的图像,而ImageView则是用来实现下面的小红点。

二.XML代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 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"
   android:background="#000000"/>

  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:orientation="horizontal"
   android:layout_alignParentBottom="true">

   <ImageView
    android:id="@+id/image1"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_margin="10dp"/>

   <ImageView
    android:id="@+id/image2"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_margin="10dp"/>

   <ImageView
    android:id="@+id/image3"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_margin="10dp"/>

   <ImageView
    android:id="@+id/image4"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_margin="10dp"/>

  </LinearLayout>

</RelativeLayout>

有多少个页面就写多少个ImageView,这里用相对布局的主要原因是为了能让小红点位于父布局的底部。

三.实现代码

1.自定义ViewPagerAdapter

class ViewPagerAdapter extends PagerAdapter {

  @Override
  public int getCount() {
   return list.size(); // List<View> list = new ArrayList<>();
  }

  @Override
  public boolean isViewFromObject(View p1, Object p2) {
   return p1 == p2; // 判断当前对象是否对应相应的视图 并返回一个布尔值
  }

  @Override
  public Object instantiateItem(ViewGroup container, int position) {
   container.addView(list.get(position)); // 添加一个View
   return list.get(position); // 返回一个View
  }

  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
   container.removeView((View)object); // 销毁一个View 因为是Object类型所以需要转型为View
  }
 }

2.自定义setImageView用来实现下方的红点显示

private void setImageView(boolean bool1, boolean bool2, boolean bool3, boolean bool4){
  if(bool1){
   image1.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool2){
   image2.setBackgroundColor(Color.RED);
   image1.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool3){
   image3.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image1.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool4){
   image4.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image1.setBackgroundColor(Color.WHITE);
  }
 }

这里很好理解,有几个页面就传入几个参数,参数类型都是布尔型,当在第一个页面是就应该第一个参数是true后面都为false,后面的原理都一样,然后就是ImageView的显示,可以直接用两张图片来设置,而我没有图片就直接用的颜色。

3.设置ViewPager监听

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener(){

    @Override
    public void onPageScrolled(int p1, float p2, int p3) {
    }

    @Override
    public void onPageSelected(int p1) {
     switch(p1){
      case 0:
       setImageView(true,false,false,false);
       break;
      case 1:
       setImageView(false,true,false,false);
       break;
      case 2:
       setImageView(false,false,true,false);
       break;
      case 3:
       setImageView(false,false,false,true);
       break;
     }
    }

    @Override
    public void onPageScrollStateChanged(int p1) {
    }
   });

在onPageSelected里面写了一个switch是为了获取当前对应的页面并让下方的小红点跟随变化。

4.完整代码

public class MainActivity extends AppCompatActivity {

 ViewPager viewPager;
 List<View> list = new ArrayList<>();
 View view1, view2, view3, view4;
 ImageView image1, image2, image3, image4;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  initView();
 }

 private void initView(){
  view1 = View.inflate(this, R.layout.view1, null);
  view2 = View.inflate(this, R.layout.view2, null);
  view3 = View.inflate(this, R.layout.view3, null);
  view4 = View.inflate(this, R.layout.view4, null);

  image1 = findViewById(R.id.image1);
  image2 = findViewById(R.id.image2);
  image3 = findViewById(R.id.image3);
  image4 = findViewById(R.id.image4);

  viewPager = findViewById(R.id.viewPager);

  list.add(view1);
  list.add(view2);
  list.add(view3);
  list.add(view4);

  viewPager.setAdapter(new ViewPagerAdapter());
  setImageView(true,false,false,false);
  viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener(){

    @Override
    public void onPageScrolled(int p1, float p2, int p3) {
    }

    @Override
    public void onPageSelected(int p1) {
     switch(p1){
      case 0:
       setImageView(true,false,false,false);
       break;
      case 1:
       setImageView(false,true,false,false);
       break;
      case 2:
       setImageView(false,false,true,false);
       break;
      case 3:
       setImageView(false,false,false,true);
       break;
     }
    }

    @Override
    public void onPageScrollStateChanged(int p1) {
    }
   });

 }

 private void setImageView(boolean bool1, boolean bool2, boolean bool3, boolean bool4){
  if(bool1){
   image1.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool2){
   image2.setBackgroundColor(Color.RED);
   image1.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool3){
   image3.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image1.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool4){
   image4.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image1.setBackgroundColor(Color.WHITE);
  }
 }

 class ViewPagerAdapter extends PagerAdapter {

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

  @Override
  public boolean isViewFromObject(View p1, Object p2) {
   return p1 == p2;
  }

  @Override
  public Object instantiateItem(ViewGroup container, int position) {
   container.addView(list.get(position));
   return list.get(position);
  }

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

四.总结

我们使用了ViewPager + View + ImageView简单的实现了引导页效果,当然我们也可以使用ViewPager + Fragment + ImageView也可以,这个看个人习惯罢了,引导页的实现并不难我们只要能熟练掌握ViewPager的使用方法就行。

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

(0)

相关推荐

  • Android开发实现的ViewPager引导页功能(动态加载指示器)详解

    本文实例讲述了Android开发实现的ViewPager引导页功能(动态加载指示器).分享给大家供大家参考,具体如下: 先看效果图咯~ 现在几乎每个App都会有引导页,是不是感觉很炫很厉害,所以就想做出来一个学习一下~让自己的App看起来更加的美观~ 现在来分析一下: 这个引导页可以分为俩部分~ 1.小红点--来提醒这是第几页了~ 2."开始体验"这个Button--可以进入主界面,但是要控制这个Button只能在最后一页出现 布局的话使用相对布局~ 那现在来看看布局吧: activi

  • Android自定义控件打造绚丽平行空间引导页

    本文实例为大家分享了Android自定义控件打造平行空间引导页的具体代码,供大家参考,具体内容如下 先上图,动图太大传不上来,在项目中有动图 点击查看动图 首先解释下工程的主要部分. 首先谷歌的百分比布局做了部分修改,因为我设置的宽高都是相对于屏幕的宽度,而谷歌的百分比布局不能实现,只需要修改一部分代码就可以实现.下面贴出修改的部分代码 public static class PercentLayoutInfo { private enum BASEMODE { BASE_WIDTH, BASE

  • Android启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果. 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0" enco

  • Android引导页面的简单实现

    第一次进入应用的时候,都会有一个引导页面,引导页面的实现起来也很简单,实现的方式也有很多,下面是自己写的一个引导页面的效果,大致的实现思路为: 最外层是一个FragmentActivity,里面包含4个fragment,在fragment中给ViewPager开一个循环,这样实现了图片播,其实效果就是在FragmentActivity中几个fragment滑动切换, fragment中ViewPager无限轮播和滑动切换: 下面为代码实现: public class MainActivity e

  • Android开发实战之漂亮的ViewPager引导页

    目前很多软件安装时都会出现引导页面,用户体验很好. 下面就来DIY下: 因为视频上传很麻烦,所以截图了. 首先看看效果图: 点击小点可自由切换,滑动也可以自由切换,最后一个导航页添加了点击跳转. 开始实现引导页: 一.采集需要的图片放入drawable文件里 二.初始化每个导航页的视图 import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.suppo

  • Android实现过渡动画、引导页 Android判断是否第一次启动App

    目前的App在安装后,第一次打开,都会显示两秒左右的logo,然后进入引导页.如果关闭App,再重新打开,则只会显示logo,然后直接进入主页. 最近写了这个,记录一下. 首先是过渡动画,因为它不论App是否第一次启动都会显示. 这里我使用了Handler的postDelayed()方法.把过渡动画的Activity设为默认启动的Activity.在当前Activity中,执行postDelayed()方法,把延时的时长设为两秒即可. 过渡页面如下:transition_view.xml <?x

  • Android实现绕球心旋转的引导页效果

    现在很多APP都会出现Android实现绕球心旋转的引导页效果,一个类似小车一直在往前开的旋转式动画效果. 先看一下预览效果: 嗯,整体效果还算理想,基本实现了页面绕屏幕底部中心旋转. 这里我们用到了Android系统的一个组件ViewFlipper,该控件的主要作用是为其中的View切换提供动画效果,主要的方法如下: setInAnimation:设置View进入屏幕时的动画. setOutAnimation:设置View退出屏幕时的动画. showNext:调用该方法可以显示下一个View.

  • RxJava两步打造华丽的Android引导页

    前言 之前的一篇文章:基于RxJava实现酷炫启动页 中,我们尝试了用RxJava实现酷炫的启动页,今天我们在此基础上加入首次使用APP时的引导页功能. 效果如下图: 思路:思路其实很简单,就是在WelcomeActivity 中setContentView()之前判断是否是首次打开APP,若是,则去启动引导页(WelcomeGuideActivity)并return:若不是,则直接setContentView(),然后启动动画再启动MainActivity. 一.WelcomeActivity

  • Android控件ViewPager实现带有动画的引导页

    ViewPager实现带有动画的引导页,供大家参考,具体内容如下 好了,又到我们学习基础控件的时候了,其实引导页很简单,就是五张图片而已 一.ViewPager实现传统的引导页 传统的ViewPager实现引导页和ListView是一样道理的,只是把ListView的Item换成图片,把BaseAdapter换成PagerAdapter,我们先来看下传统引导页的效果图 步骤一:编写xml文件 既然用到的是ViewPager,那么xml文件就必须要有ViewPager,细心的你,可能会发现最后一页

  • Android实现渐变启动页和带有指示器的引导页

    引导页是项目中很常见的东西了,在用户下载app首次打开后,会进入引导界面,通常都是三四张图片说明,简单介绍下app的功能和使用方法之类,最后一张有着"进入应用"的按钮,点击即可进入主页,之后打开app则不会再次进入启动页,话不多说,以下做个归纳. 效果图: 实现步骤: 1.首先我们做个有渐变动画的启动页面SplashActivity 在onCreate里设置核心方法setAlphaAnimation() public void setAlphaAnimation(){ //生成Alph

随机推荐