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

 更新时间:2021年04月22日 09:40:30   作者:Fantasychong丶  
这篇文章主要为大家详细介绍了Android实现渐变启动页和带有指示器的引导页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

引导页是项目中很常见的东西了,在用户下载app首次打开后,会进入引导界面,通常都是三四张图片说明,简单介绍下app的功能和使用方法之类,最后一张有着“进入应用”的按钮,点击即可进入主页,之后打开app则不会再次进入启动页,话不多说,以下做个归纳。

效果图:

实现步骤:

1.首先我们做个有渐变动画的启动页面SplashActivity

在onCreate里设置核心方法setAlphaAnimation()

public void setAlphaAnimation(){

   //生成AlphaAnimation的对象

   AlphaAnimation animation= new AlphaAnimation(this);

   //设置动画的持续时间

   animation.setDuration(3000);

   //给要渐变的控件设置动画,比如说imageview,textview,linearLayout之类的

   ll.setAnimation(animation);

   //设置动画监听,结束时跳转到下一个页面(首次打开就是引导页面,反之就是主页)

   animation.setAnimationListener(new Animation.AnimationListener(){

      public void onAnimationStart(Animation animation){ }

      public void onAnimationEnd(Animation animation){ 

         jump2Activity();      

      }

      public void onAnimationRepeat(Animation animation){ }

   });

}

分析一下这个跳转方法jump2Activity(),我们这里使用SharedPeference来判断应用是否首次打开,设变量isFirst默认值为0,进入引导页跳转到主页时再把这个值设为1,这样,每次跳转时判断isFirst的值,如果仍是默认值0则为首次打开进入引导页,反之进入主页。

public void jump2Activity(){

  SharedPreferences sharedPreference= getSharedPreferences("data", MODE_PRIVATE);

  String isFirst= sharedPreferences.getString("isFirst", "0");

  Intent intent= new Intent();  

  if("0".equals(isFirst)){

    intent.setClass(this, GuideActivity.class);

  }else{

    intent.setClass(this. MainActivity.class);

  }

  startActivity(intent);

  finish();

}

2.接下来我们做引导页面

引导页面是由三个控件组成,Viewpager,圆点指示器的线性布局linearlayout, 最后一页的 “进入应用” 按钮。

<?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.support.v4.view.ViewPager
  android:id="@+id/guide_vp"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />
 
 <LinearLayout
  android:id="@+id/guide_ll"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  android:layout_centerHorizontal="true"
  android:layout_marginBottom="100dp"
  android:orientation="horizontal" />
 
 <Button
  android:id="@+id/guide_btn"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_above="@id/guide_ll"
  android:layout_centerHorizontal="true"
  android:text="进入应用"
  android:layout_marginBottom="10dp"
  android:visibility="gone"/>
 
</RelativeLayout>

在GuideActivity中,首先初始化引导图片

/**
 * 初始化图片
 */
private void initImgs() {
 ViewPager.LayoutParams params= new ViewPager.LayoutParams();
 imageViews= new ArrayList<ImageView>();
 for (int i= 0; i< imgs.length; i++){
  ImageView imageView= new ImageView(this);
  imageView.setLayoutParams(params);
  imageView.setImageResource(imgs[i]);
  imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  imageViews.add(imageView);
 }
}

初始化底部圆点指示器,这里值得一提的是我们给各圆点设置相应的点击事件,当点击某个位置的圆点时,viewpager自动切换到相应位置的图片,不过实际应用中这里实用性不是很大,因为圆点太小,可触摸范围有限,点击事件不太好触发。

/**
 * 初始化底部圆点指示器
 */
private void initDots() {
 LinearLayout layout= findViewById(R.id.guide_ll);
 LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(20, 20);
 params.setMargins(10, 0, 10, 0);
 dotViews= new ImageView[imgs.length];
 for (int i= 0; i< imageViews.size(); i++){
  ImageView imageView= new ImageView(this);
  imageView.setLayoutParams(params);
  imageView.setImageResource(R.drawable.dotselector);
  if (i== 0){
   imageView.setSelected(true);
  }else{
   imageView.setSelected(false);
  }
  dotViews[i]= imageView;
  final int finalI = i;
  dotViews[i].setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    vp.setCurrentItem(finalI);
   }
  });
  layout.addView(imageView);
 }
}

设置viewpager的滑动事件

vp.addOnPageChangeListener(this);

生成三个方法,我们主要在onPageSelected()方法中做操作,当某个位置的圆点被选中时,显示选中后的图片,其余圆点显示未选中的图片,这里主要应用selector控制器,至于相应的选中未选中圆点图片需要大家去找。当滑动到最后一个页面时,将 "进入应用" 的按钮显示,反之隐藏。

@Override
public void onPageScrolled(int i, float v, int i1) {}
 
@Override 
public void onPageScrollStateChanged(int i) {}
 
@Override
public void onPageSelected(int arg0) {
 for (int i= 0; i< dotViews.length; i++){
  if (arg0== i){
   dotViews[i].setSelected(true);
  }else {
   dotViews[i].setSelected(false);
  }
 
  if (arg0== dotViews.length- 1){
   btn.setVisibility(View.VISIBLE);
  }else {
   btn.setVisibility(View.GONE);
  }
 }
}

dotSelector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/focus_on" android:state_selected="true"/>
 <item android:drawable="@drawable/focus_nomal" android:state_selected="false"/>
</selector>

在最后一个页面点击 "进入应用" 按钮跳转到主页时,将缓存中的isFirst数据改为1,以后打开应用则不会再进入引导页面了。

@Override
public void onClick(View view) {
 switch (view.getId()){
  case R.id.guide_btn:
   setisFirst();
   Intent intent= new Intent(GuideActivity.this, MainActivity.class);
   startActivity(intent);
   finish();
   break;
 }
}
/**
 * 改变首次打开的状态
 */
private void setisFirst() {
 SharedPreferences.Editor editor= getSharedPreferences("data", MODE_PRIVATE).edit();
 editor.putString("isFirst", "1");
 editor.commit();
}

至此全部完成!demo附上

源码下载

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

相关文章

  • Android动态添加menu菜单的简单方法

    Android动态添加menu菜单的简单方法

    Android动态添加menu菜单的简单方法,需要的朋友可以参考一下
    2013-06-06
  • Android实现粒子中心扩散动画效果

    Android实现粒子中心扩散动画效果

    粒子动画效果相比其他动画来说是非常复杂了的,主要涉及三个方面,粒子初始化、粒子位移、粒子回收等问题,本篇将实现两种动画效果,代码基本相同,只是旋转速度不一样,需要的朋友可以参考下
    2024-02-02
  • 深入浅析 Android Fragment(上篇)

    深入浅析 Android Fragment(上篇)

    本篇文章为大家说明Fragment如何产生,什么是Fragment,Fragment生命周期,如何静态和动态的使用Fragment,Fragment回退栈,Fragment事务;以及Fragment的一些特殊用途。感兴趣的朋友一起跟着小编一起看看吧
    2015-10-10
  • Android神兵利器之Image Asset Studio的实现

    Android神兵利器之Image Asset Studio的实现

    这篇文章主要介绍了Android神兵利器之Image Asset Studio的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Flutter 将Dio请求转发原生网络库的实现方案

    Flutter 将Dio请求转发原生网络库的实现方案

    这篇文章主要介绍了Flutter 将Dio请求转发原生网络库,需要注意添加NativeNetInterceptor,如果有多个拦截器,例如LogInterceptors等等,需要将NativeNetInterceptor放到最后,需要的朋友可以参考下
    2022-05-05
  • Android实现带圆环的圆形头像

    Android实现带圆环的圆形头像

    这篇文章主要为大家详细介绍了Android实现带圆环的圆形头像,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Android获取其他包的Context实例代码

    Android获取其他包的Context实例代码

    这篇文章主要介绍了Android获取其他包的Context实例代码,有需要的朋友可以参考一下
    2014-01-01
  • Android基于ListView实现类似Market分页加载效果示例

    Android基于ListView实现类似Market分页加载效果示例

    这篇文章主要介绍了Android基于ListView实现类似Market分页加载效果,结合完整实例形式分析了ListView的OnScroll方法来实现分页与滚动加载的操作步骤与相关实现技巧,需要的朋友可以参考下
    2016-10-10
  • Flutter实现给图片添加涂鸦功能

    Flutter实现给图片添加涂鸦功能

    这篇文章主要介绍了利用Flutter实现给图片添加涂鸦功能,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01
  • Android学习教程之日历库使用(15)

    Android学习教程之日历库使用(15)

    这篇文章主要为大家详细介绍了Android学习教程之日历库使用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论