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, 最后一页的 “进入应用” 按钮。



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

/*** 初始化图片*/
private void initImgs() {ViewPager.LayoutParams params= new ViewPager.LayoutParams();imageViews= new ArrayList();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() {@Overridepublic 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



在最后一个页面点击 "进入应用" 按钮跳转到主页时,将缓存中的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附上

源码下载


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部