android 闪屏页—>ViewPager引导页—>主页面

ゞ浴缸里的玫瑰 2022-07-26 11:28 307阅读 0赞

效果图介绍：通过旋转、缩放、淡入淡出引入闪屏页后进入引导页，页面滑动时，底部的红点会随之移动（注意不是从一个灰点直接跳到另一个灰点），到达最后一个页面时才显示开始体验按钮，点击进入主页面；当再次登入时，直接由闪屏页进入到主页面（要想显示引导页，可以将app的缓存清除）；

![这里写图片描述][20160410222338145]

1、自定义类BaseActivity继承自Activity：

public class BaseActivity extends Activity { 
         @Override
            protected void onCreate(Bundle savedInstanceState){
                super.onCreate(savedInstanceState);
                //去掉标题栏；
                requestWindowFeature(Window.FEATURE_NO_TITLE);          
            }
    
        //重写startActivity方法； 
        public void startActivity(Context context1, Class<?> context2)
        {
            startActivity(new Intent(context1, context2));      
        }
    }

2、闪屏页的代码SplashActivity ：

public class SplashActivity extends BaseActivity { 
    
       RelativeLayout rlRoot;
    
        @Override
        protected void onCreate(Bundle savedInstanceState){
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_splash);
            rlRoot = (RelativeLayout)findViewById(R.id.rl_root);
    
            startAnimation(); //设置动画；
    
        }
    
        private void startAnimation() 
        {
            AnimationSet set = new AnimationSet(false); //设置动画集合；
    
            //旋转动画,0到360度旋转，自身围绕中心点（0.5f）旋转；
            RotateAnimation rotate = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            rotate.setDuration(1000);                 //旋转事件；
            rotate.setFillAfter(true);                //保持动画状态；
    
            //缩放动画；
            ScaleAnimation scale = new ScaleAnimation(0, 1, 0, 1,                             Animation.RELATIVE_TO_SELF, 0.5f);
            scale.setDuration(1000);
            scale.setFillAfter(true);
    
            //淡入淡出动画；
            AlphaAnimation alpha = new AlphaAnimation(0, 1);
            alpha.setDuration(1000);
            alpha.setFillAfter(true);
    
            set.addAnimation(rotate);
            set.addAnimation(scale);
            set.addAnimation(alpha);
    
            //设置动画监听；
            set.setAnimationListener(new AnimationListener() 
            {           
                @Override
                public void onAnimationStart(Animation animation)
                {               
                }
    
                @Override
                public void onAnimationRepeat(Animation animation) 
                {               
                }
                //动画执行结束；
                @Override
                public void onAnimationEnd(Animation animation) 
                {
                    nextPage();           
                }
            });     
            rlRoot.startAnimation(set); //播放动画；
        }
    
        //不是第一次登陆就直接跳转页面；
        private void nextPage() 
        {
            boolean userGuide = PreUtils.getBoolean(this, "guide_showed", false);       
            if(!userGuide)
            {
                startActivity(SplashActivity.this, GuideActivity.class);
            }
            else
            {
                startActivity(SplashActivity.this, MainActivity.class);
            }
            finish();
        }
    }

3、闪屏页的布局文件activity\_splash：

<?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:id="@+id/rl_root" android:background="@drawable/splash_bg_newyear">
    
        <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/splash_horse_newyear" />    
    
    </RelativeLayout>

4、记录是否第一次登陆的工具类PreUtils：

/* * 当用户第一次登入时显示引导页，并通过SharePreferences记录状态，之后不再显示引导页（将缓存清除会再次显示）； */
    public class PreUtils 
    {
        public static final String PREF_NAME = "config";    //文件名；记录用户是否初次登入；
    
        //根据键key获取value值（false/true）；
        public static boolean getBoolean(Context context, String key, boolean value)
        {
            SharedPreferences sp = context.getSharedPreferences(PREF_NAME, Context.MODE_PRIVATE);
            return sp.getBoolean(key, value);           
        }
    
        //根据键key设置value值（false/true）并且提交；
        public static void setBoolean(Context context, String key, boolean value)
        {
            SharedPreferences sp = context.getSharedPreferences(PREF_NAME, Context.MODE_PRIVATE);
            sp.edit().putBoolean(key, value).commit();  
        }
    }

5、引导页GuideActivity ：

public class GuideActivity extends BaseActivity { 
        private static final int[] mImgIds = new int[]
                {R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
        private ArrayList<ImageView> mImgViewList; //引导页图片集合；
        private ViewPager vpGuide;                 
        private LinearLayout llPointGroup;         //引导页圆点；
        private int mPointWidth;                   //两点间的距离； 
        private View viewRedPoint;                 //底部跟随图片而动的红色point；
        private Button btnStart;                   //开始体验按钮；
    
        @Override
        protected void onCreate(Bundle savedInstanceState) 
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_guide);
    
            vpGuide = (ViewPager)findViewById(R.id.guide_vp);
            llPointGroup = (LinearLayout)findViewById(R.id.guide_ll_point);
            viewRedPoint = (View)findViewById(R.id.view_red_point);
            btnStart = (Button)findViewById(R.id.guide_start_btn);
    
            btnStart.setOnClickListener(new OnClickListener() 
            {           
                @Override
                public void onClick(View v) 
                {
                    PreUtils.setBoolean(GuideActivity.this, "guide_showed", true);//将值设置为true后不再显示引导页；
    
                    startActivity(GuideActivity.this, MainActivity.class);
                    finish();
                }
            });
    
            initViews();                                              //初始化界面；
            vpGuide.setAdapter(new GuideAdapter());                   //设置适配器；
    
            vpGuide.setOnPageChangeListener(new GuidePageListener()); //ViewPager的滑动监听；
        }
    
    
    
        //初始化界面；
        private void initViews()
        {
            mImgViewList = new ArrayList<ImageView>();
            for(int i=0; i<mImgIds.length; i++)
            {
                ImageView img = new ImageView(this);
                img.setBackgroundResource(mImgIds[i]); //设置引导页的背景；
                mImgViewList.add(img);                 //将背景添加进集合中；
            }
    
            //初始化灰色小圆点；
            for(int i=0; i<mImgIds.length; i++)
            {
                View point = new View(this);
                point.setBackgroundResource(R.drawable.shape_point_grey);//设置引导页默认圆点；
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams
                        (DensityUtils.dp2px(this, 10), DensityUtils.dp2px(this, 10)); //设置圆点的大小1；
                if(i>0)
                {
                    params.leftMargin = DensityUtils.dp2px(this, 10);    //设置圆点的间距；
                }
                point.setLayoutParams(params); //设置圆点的大小2；
                llPointGroup.addView(point);   //将圆点添加给线性布局；
            }   
    
            //获取视图树； 当layout执行结束后回调此方法；
            llPointGroup.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() 
            {       
                @Override
                public void onGlobalLayout() 
                {
                    llPointGroup.getViewTreeObserver().removeGlobalOnLayoutListener(this);
    // 使用下行代码代替上行，但要改变版本号为14以上；
    // llPointGroup.getViewTreeObserver().removeOnGlobalFocusChangeListener(this);
    // 获取两个
                    mPointWidth = llPointGroup.getChildAt(1).getLeft() - llPointGroup.getChildAt(0).getLeft();
                }
            }); 
        }
    
        //自定义适配器；
        class GuideAdapter extends PagerAdapter
        {
    
            //获取页卡数量；
            @Override
            public int getCount() 
            {
                return mImgIds.length;
            }
    
            @Override
            public boolean isViewFromObject(View arg0, Object arg1) 
            {
                return arg0 == arg1;
            }
    
            //初始化界面；
            @Override
            public Object instantiateItem(View container, int position) 
            {
                ((ViewGroup) container).addView(mImgViewList.get(position));
                return mImgViewList.get(position);
            }
    
            //移除页卡；
            @Override
            public void destroyItem(View container, int position, Object object) 
            {
                ((ViewPager) container).removeView((View)object);
            }
    
        }
    
        //ViewPager的滑动监听；
        class GuidePageListener implements OnPageChangeListener
        {
    
    
            //滑动状态变化；
            @Override
            public void onPageScrollStateChanged(int arg0) 
            {
    
            }
    
            //滑动事件；1、 当前位置（0,1,2）；2、偏移的百分比；3、偏移的距离；
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) 
            {
                int lenth = (int) (mPointWidth * arg1 + arg0 * mPointWidth);  
                //获取当前红点的布局参数，该view的父布局是relativelayout；
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewRedPoint.getLayoutParams();
                params.leftMargin = lenth;           //实时更新红点与第一个灰点的间距；
                viewRedPoint.setLayoutParams(params);//重新给小红点设置布局参数，效果是可以看到红点在两个灰点之间移动；
            }
    
            //被选中页面，当滑动到最后一个页面时才显示“开始体验”按钮；
            @Override
            public void onPageSelected(int arg0) 
            {
                if(arg0 == mImgIds.length - 1)
                {
                    btnStart.setVisibility(View.VISIBLE);
                }
                else
                {
                    btnStart.setVisibility(View.INVISIBLE);
                }
            }
    
        }
    }

6、引导页的布局文件activity\_guide：

<?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" />
    
        <Button android:id="@+id/guide_start_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="60dp" android:padding="5dp" android:text="开始体验" android:textColor="@drawable/btn_guide_text_selector" android:background="@drawable/btn_guide_selector" android:visibility="invisible" />
    
        <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="20dp" >
             <LinearLayout android:id="@+id/guide_ll_point" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" ></LinearLayout>
    
             <View android:id="@+id/view_red_point" android:layout_width="10dp" android:layout_height="10dp" android:background="@drawable/shape_point_red"/>
        </RelativeLayout>
    
    </RelativeLayout>

7、尺寸适配工具类DensityUtils ：

/* * 尺寸适配；dp = px / 设备密度； */
    public class DensityUtils 
    {
        public static int dp2px(Context ctx, float dp)
        {
            float density = ctx.getResources().getDisplayMetrics().density;
            int px = (int) (dp * density + 0.5f);  
            // 2.8 + 0.5 = 3.3 ——> 3（2.8——3）; 2.2 + 0.5 = 2.7 ——>2（2.2——2）;
            return px;
        }
    
        public static float px2dp(Context ctx, int px)
        {
            float density = ctx.getResources().getDisplayMetrics().density;
            float dp = px / density;        
            return dp;
        }
    }

8、底部灰色小点的xml文件shape\_point\_grey（将8、9、10、11的资源文件放在res/drawable文件夹中）：

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    
        <solid android:color="@android:color/darker_gray" />
    
    </shape>

9、跟随图片滑动的红色小点的xml文件shape\_point\_red：

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    
        <solid android:color="#f00" />
    
    </shape>

10、点击开始按钮背景颜色改变的资源文件btn\_guide\_selector：

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

11、点击“开始体验”按钮文字颜色改变的资源文件btn\_guide\_text\_selector：

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <item android:state_pressed="true" android:color="#000" />
        <item android:color="#fff" />
    
    </selector>

12、主界面MainActivity ：

public class MainActivity extends BaseActivity { 
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            // TODO Auto-generated method stub
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        }
    
    }

这些内容是根据网上下载的视频进行整理的，还真是耗时不少，  
资源代码链接：[http://download.csdn.net/detail/baidu\_32731497/9487810][http_download.csdn.net_detail_baidu_32731497_9487810]

[20160410222338145]: /images/20220724/6652db92a4334f93bf06b18685fc6bb1.png
[http_download.csdn.net_detail_baidu_32731497_9487810]: http://download.csdn.net/detail/baidu_32731497/9487810