Android引导页面的设计

男娘i 2022-09-28 13:05 150阅读 0赞

# Android引导页面的设计 #

大部分的引导界面基本上都是千篇一律的，只要熟练掌握了一个，基本上也就没什么好说的了，要想实现应用程序只启动一次引导界面这样的效果，要使用SharedPreferences类。

# 一．引导页面的基本知识 #

## （一）程序页面启动顺序 ##

一般程序第一次启动：启动页面–>引导页面–>主页面  
其他情况启动：启动页面->主页面

## （二）引导页面的实现方法 ##

因为引导页面并不是每次都会显示，所以要在主页面中的onCreate方法中判断是否是第一次启动，如果是第一次启动程序，就显示引导页面。  
这里实现方式和启动页面的实现方式有些类似。

### 1.在onCreate方法中跳转到引导页面GuideActivity，引导完成后关闭打开的GuideActivity，显示主页面 ###

### 2.在onCreate方法中编写方法showView，这里弹出全屏的对话框View，但是这里的View是ViewPager，之后再取消对话框，显示主页面。 ###

### 3.在主页面的布局文件中使用一个相对布局覆盖画面，相对布局中有ViewPager，引导完成后隐藏这个表面上的相对布局，就可以显示主页面。 ###

第一种和第二中移植性比较好，下面的示例程序使用的是第一种方法设计。

## （三）引导页面是否显示的关键，SharedPreferences ##

> SharedPreferences正是Android中用于实现这中存储方式的技术，基本用法：  
> 1.使用Activity类的getSharedPreferences方法获得SharedPreferences对象，其中存储key-value的文件的名称由getSharedPreferences方法的第一个参数指定；  
> 2.使用SharedPreferences接口的edit获得SharedPreferences.Editor对象；  
> 3.通过SharedPreferences.Editor接口的putXxx方法保存key-value对。其中Xxx表示不同的数据类型。例如：字符串类型的value需要用putString方法；  
> 4.通过SharedPreferences.Editor接口的commit方法保存key-value对。commit方法相当于数据库事务中的提交（commit）操作。

## （四）使用SharedPreferences的主要代码 ##

打开Preferences，名称为setting，如果存在则打开它，否则创建新的Preferences

SharedPreferences settings =getSharedPreferences(“setting”, 0);
    Boolean isFirstLogin = settings.getBoolean(“isFirstLogin ”,”默认值”);
    if(isFirstLogin){ 
    //做显示引导页面的操作。。。（这里省略），并设置isFirstLogin=false;
    //让setting处于编辑状态
    SharedPreferences.Editor editor = settings.edit();
    
    //存放数据，完成提交
    
    editor.putString(“isFirstLogin”,false).commit();
    
    
    }

## （五）应用页面的页面显示主要是ViewPager的使用 ##

ViewPager与ListView用法类似，我们也需要一个适配器PagerAdapter。  
这里不详细解释ViewPager，如果想详细了解可以看我之前的博客：  
[http://blog.csdn.net/wenzhi20102321/article/details/53584344\#comments][http_blog.csdn.net_wenzhi20102321_article_details_53584344_comments]

# 二．引导页面的一个程序示例 #

效果：  
![z][]  
说明：这里要完全看完引导页面并且点击最后一页的“开始体验”才算第一次正常启动程序，否则还会显示引导页面（这个程序员可以根据实际情况设定），第二次正常启动程序是不会显示引导页面的。

## （一）GuideActivity设计 ##

package com.example.guide;
    
    
    import android.app.Activity;
    import android.content.Context;
    import android.content.SharedPreferences;
    import android.os.Bundle;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.util.Log;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.Button;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * 引导页面
     * 如果没有到最后一页，并点击“体验”，而直接退出，那么下次启动程序还是会显示引导页面
     */
    
    public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener {
        
    
        //布局中的对象
        ViewPager vp;
        LinearLayout ll;
        Button btn;
    
        //数据源,8张图片
        int[] images = {R.mipmap.a1, R.mipmap.a2, R.mipmap.a3, R.mipmap.a4, R.mipmap.a5};
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_guide);
            btn = (Button) findViewById(R.id.main_btn);
    
            initPoints();//初始化小圆点
            initView();//初始化数据
    
        }
        /**
         * 实现小圆点的添加，
         * 找到线性布局动态的向线性布局内添加小圆，并添加drawable选择的效果
         */
        private void initPoints() {
            //实例化线性布局
            ll = (LinearLayout) findViewById(R.id.main_ll);
            //绘制和图片对应的圆点的数量
            for (int i = 0; i < images.length; i++) {
                View view = new View(this);
                //设置圆点的大小
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(30, 30);
                //设置间距
                params.setMargins(10, 10, 10, 10);
                //设置图片的自定义效果
                view.setBackgroundResource(R.drawable.start_selsect);
                //把设置好的视图属性设置到View中
                view.setLayoutParams(params);
                //把创建好的View添加到线性布局中
                ll.addView(view);
            }
            Log.e("TAG", ":" + ll.getChildCount());
            //设置选中线性布局中的第一个
            ll.getChildAt(0).setSelected(true);
        }
    
        /**
         * 初始化数据
         */
        private void initView() {
            //实例化ViewPager
            vp = (ViewPager) findViewById(R.id.main_vp);
            //创建适配器对象
            Myadapter adapter = new Myadapter();
            //给视图ViewPager添加适配器
            vp.setAdapter(adapter);
            //给ViewPager添加监听事件
            //这个监听事件设置不是点击的，也不是选中的，使用添加页面改变的监听
            vp.addOnPageChangeListener(this);
            //设置图片开始的位置
            vp.setCurrentItem(0);
        }
    
        //定义一个集合用来存放视图的View对象
        List<View> listOfView = new ArrayList<>();
    
    
        /**
         * 下面三个方法是，实现ViewPager监听页面改变时要实现的方法
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            //页面滑动时触发
        }
    
    
        int index = 0;//设置一个游标值记录当前的显示页面
    
        @Override
        //页面选中时的回调方法
        public void onPageSelected(int position) {
            //对小圆点的设置
            //取消前一个视图的选中
            ll.getChildAt(index).setSelected(false);
            //选中下一个显示的视图
            ll.getChildAt(position % images.length).setSelected(true);
            //更新游标的值
            index = position % images.length;
            //当显示最后一个页面时，可以实现跳转
            if (index == (images.length-1)) {
                ll.setVisibility(View.INVISIBLE);
                btn.setVisibility(View.VISIBLE);
                btn.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // Toast.makeText(MainActivity.this, "点击了按钮", Toast.LENGTHRT).show();
    
                        SharedPreferences settings =getSharedPreferences("setting", Context.MODE_PRIVATE);
                        //让setting处于编辑状态
                        SharedPreferences.Editor editor = settings.edit();
    
                        //存放数据,完成提交
                        editor.putInt("loginMainTime",1).commit();
                        setResult(22);//如果引导页面显示完毕，这里设置返回码为22
                        //关闭原来界面
                        finish();
    
                    }
                });
            } else {
                ll.setVisibility(View.VISIBLE);
                btn.setVisibility(View.INVISIBLE);
            }
    
        }
    
        //页面状态改变时的回调方法
        @Override
        public void onPageScrollStateChanged(int state) {
    
        }
    
    
    
        /**
         * 在类内创建Adapter对象，
         * 这里ViewPager要对应的Adapter是PagerAdapter
         */
        class Myadapter extends PagerAdapter {
    
            //可滑动的页面的数量
            @Override
            public int getCount() {
                return listOfView.size();//实现只能滑动一遍图片的效果
                // return Integer.MAX_VALUE;//实现无限滑动的效果
            }
    
            //判断两页的地址是否相同
            @Override
            public boolean isViewFromObject(View view, Object object) {
                //这是google要求的写法
                return view == object;
            }
    
    
            //重写构造方法，当创建实例时，把数据添加到集合中
            public Myadapter() {
                for (int i = 0; i < images.length; i++) {
                    //创建ImageView存放图片
                    ImageView iv = new ImageView(getApplicationContext());
                    iv.setScaleType(ImageView.ScaleType.FIT_XY);
                    iv.setImageResource(images[i]);
                    //把图片添加到集合zhong
                    listOfView.add(iv);
                }
            }
    
            //下面的两个方法也是必须重写的
    
            //这里要返回的是View的视图对象
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                //添加一个item 显示
                //Toast.makeText(getBaseContext(), position + "页", Toast.LENGTH_SHORT).show();
                container.addView(listOfView.get(position %images.length));
                return listOfView.get(position %images.length);
            }
    
            //销毁一个View的对象
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(listOfView.get(position % images.length));
            }
        }
    
    }

## （二）activity\_guide.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:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    
        <android.support.v4.view.ViewPager
            android:id="@+id/main_vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
        <LinearLayout
            android:id="@+id/main_ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="20dp"
            android:gravity="center"
            android:orientation="horizontal" />
        <Button
            android:id="@+id/main_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_margin="20dp"
            android:text="点击马上体验！"
            android:visibility="invisible" />
    </RelativeLayout>

## （三）start\_selected.xml文件（在文件夹drawable下） ##

这是每个小圆点的选择器的资源文件设计

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

## （四）MainActivity的设计 ##

package com.example.guide;
    
    
    import android.content.Context;
    import android.content.Intent;
    import android.content.SharedPreferences;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.util.Log;
    
    
    /**
     * 测试引导页面
     */
    
    public class MainActivity extends AppCompatActivity {
        
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            SharedPreferences settings =getSharedPreferences("setting", Context.MODE_PRIVATE);
    
            int loginMainTime=settings.getInt("loginMainTime",0);
            if(loginMainTime==0){
                //这个操作都在引导页面的最后一步操作！
    //        //让setting处于编辑状态
    //            SharedPreferences.Editor editor = settings.edit();
    //        //存放数据,完成提交
    //                editor.putInt("loginTimes",1).commit();
    
            //做显示引导页面的操作
                startActivityForResult(new Intent(this,GuideActivity.class),11);//跳转到引导页面
            }
    
            setContentView(R.layout.activity_main);
    
        }
    
    
    
    
        @Override
        protected void onActivityResult(int requestCode, int resultCode, Intent data) {
            super.onActivityResult(requestCode, resultCode, data);
            Log.e("TAG","requestCode="+requestCode+",resultCode="+resultCode);
            if (requestCode==11&&resultCode!=22){
       //这里定义22为正常显示完毕引导页面
                finish();//如果没有显示完引导页面进入，就直接关闭程序
            }
    
        }
    }

## （五）其他 ##

这里activity\_main.xml就不展示了，里面就一个TextVIew。  
还有AndroidManifest.xml文件中要注册GuideActivity

到这里一个完整的程序引导页面的设计已经完成了。

# 其实引导页面设计里面就两个最主要的内容： #

## 1.存储方式SharePreferences的使用 ##

我之前有详细的使用总结：[http://blog.csdn.net/wenzhi20102321/article/details/53065311][http_blog.csdn.net_wenzhi20102321_article_details_53065311]

## 2.ViewPager的使用 ##

详细的使用总结：[http://blog.csdn.net/wenzhi20102321/article/details/53584344][http_blog.csdn.net_wenzhi20102321_article_details_53584344]  
如果每个滑动页面有勾选或很多其他操作，每个引导页面也可以做成Fragment页面。  
Fragment的超详细总结：[http://blog.csdn.net/wenzhi20102321/article/details/53572610][http_blog.csdn.net_wenzhi20102321_article_details_53572610]

[http_blog.csdn.net_wenzhi20102321_article_details_53584344_comments]: http://blog.csdn.net/wenzhi20102321/article/details/53584344#comments
[z]: /images/20220708/312dd6d3cbd349009a74a95a2fa60e16.png
[http_blog.csdn.net_wenzhi20102321_article_details_53065311]: http://blog.csdn.net/wenzhi20102321/article/details/53065311
[http_blog.csdn.net_wenzhi20102321_article_details_53584344]: http://blog.csdn.net/wenzhi20102321/article/details/53584344
[http_blog.csdn.net_wenzhi20102321_article_details_53572610]: http://blog.csdn.net/wenzhi20102321/article/details/53572610