实践--ViewPager实现App引导页

• 效果图，这个效果图看着很撇脚，我在我手机上运行就挺合适的，可能是图片和这个模拟器不对付吧，大家凑合看下吧，汗！
  

• 基本功能就是第一次开启程序，我们就加载引导页，当滑倒最后一个引导页，只要我们点击最后一张引导页，就会进入下一个界面了。下次再进入程序，就不会在加载引导页了。

• 我们先来看布局文件，其实这里是应用了FrameLayout的布局特点

• 我们的父布局是一个FrameLayout，这就保证了我们可以重叠覆盖不同的控件
• 我们先放置最底层的登录的空间，
• 然后再在上面覆盖一个ViewPager
• 最后在底部加上引导页的表示划得哪个页面的点的布局，点的个数我们根据引导页页面数在代码中动态的增加

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.lingzhuo.testviewpagerdot01.MainActivity">

    <LinearLayout  android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="20dp" android:orientation="vertical">

        <EditText  android:id="@+id/editText_name" android:layout_width="match_parent" android:layout_height="wrap_content" />

        <EditText  android:id="@+id/editText_password" android:layout_width="match_parent" android:layout_height="wrap_content" />

        <Button  android:id="@+id/button_login" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Log In" />
    </LinearLayout>


    <android.support.v4.view.ViewPager  android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent"></android.support.v4.view.ViewPager>

    <RelativeLayout  android:layout_width="match_parent" android:layout_height="match_parent">

        <LinearLayout  android:id="@+id/linearLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:orientation="horizontal"></LinearLayout>

    </RelativeLayout>
</FrameLayout>

• 这里ViewPager的Adapter的代码我就不再解释了，必要的话，去看我关于ViewPager的博客的讲解。

public class MyAdapter extends PagerAdapter {
    private ImageView[] imageViews;
    private Context context;

    public MyAdapter(ImageView[] imageViews, Context context) {
        this.imageViews = imageViews;
        this.context = context;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(imageViews[position]);
        return imageViews[position];
    }

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

    @Override
    public int getCount() {
        return imageViews.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
}

• 主代码的逻辑就是，当我们第一次打开这个App，就加载引导页，使其覆盖住下面的登录相关的控件等，当我们在最后一个引导页点击或者不是第一次进入，我们就设置viewpager为不可见，下面的登录相关的内容就显示出来了，那么我们怎么判断是不是第一次打开App呢？我们可以用一个sharePreferance记录一个标识位，每次对其进行判断就可以了。
• 代码如下

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {

    private int[] imgsId = {R.mipmap.bg_1_middle, R.mipmap.bg_2_middle, R.mipmap.bg_3_middle, R.mipmap.bg_5_middle};
    private ImageView[] imageViews;
    private ViewPager viewPager;
    private ImageView[] dots;
    private LinearLayout linearLayout;
    private SharedPreferences sharedPreferences_isFirst, sharedPreferences_information;

    private Button button_login;
    private EditText editText_name, editText_password;
    private boolean isFirst;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        if (!isFirst) {
            //不是第一次进入，就设置viewpager不可见
            viewPager.setVisibility(View.INVISIBLE);
            //对应的表示viewpager的小点也不可见就可以了
            linearLayout.setVisibility(View.INVISIBLE);
        } else {
            SharedPreferences.Editor editor = sharedPreferences_isFirst.edit();
            editor.putBoolean("isFirst", false);
            editor.commit();
            MyAdapter adapter = new MyAdapter(imageViews, getApplicationContext());
            viewPager.setAdapter(adapter);
            viewPager.setOnPageChangeListener(this);
        }
        String name = sharedPreferences_information.getString("name", "");
        String password = sharedPreferences_information.getString("password", "");
        if (!TextUtils.isEmpty(name) && !TextUtils.isEmpty(password)) {
            editText_password.setText(password);
            editText_name.setText(name);
        }
    }

    private void init() {
        sharedPreferences_isFirst = getSharedPreferences("isFirst", MODE_PRIVATE);
        isFirst = sharedPreferences_isFirst.getBoolean("isFirst", true);
        sharedPreferences_information = getSharedPreferences("mydata", MODE_PRIVATE);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        linearLayout = (LinearLayout) findViewById(R.id.linearLayout);
        button_login = (Button) findViewById(R.id.button_login);
        button_login.setOnClickListener(this);
        editText_name = (EditText) findViewById(R.id.editText_name);
        editText_password = (EditText) findViewById(R.id.editText_password);
        getImageViews();
        getDotImage();
        //由于是动态的添加，所以使用这种匿名内部类设置点击事件比较简单
        imageViews[imgsId.length-1].setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (viewPager.getCurrentItem()==imgsId.length-1){
                    viewPager.setVisibility(View.INVISIBLE);
                    linearLayout.setVisibility(View.INVISIBLE);
                }
            }
        });
    }

    //通过传入的图片id的数据，加载相应引导页的页面的ImageView
    public void getImageViews() {
        imageViews = new ImageView[imgsId.length];
        for (int i = 0; i < imageViews.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(imgsId[i]);
            imageViews[i] = imageView;
        }
    }

    //同上，动态的加载表示滑动页面表示的小点的代码
    public void getDotImage() {
        dots = new ImageView[imageViews.length];
        for (int i = 0; i < dots.length; i++) {
            ImageView imageView = new ImageView(this);
            dots[i] = imageView;
            //这是将这些小点，添加到相应的布局中，同时设置布局的各种属性，边距，大小等等。
            LinearLayout.LayoutParams layout = new LinearLayout.LayoutParams(50, 50);
            layout.leftMargin = 20;
            layout.rightMargin = 20;
            linearLayout.addView(dots[i], layout);
        }
    }
    //根据ViewPager的位置，动态的更改小点的显示，使其和viewpager的位置对应一致
    public void getDots(int position) {
        for (int i = 0; i < dots.length; i++) {
            if (i == position) {
                dots[i].setImageResource(R.mipmap.find_pic);
            } else {
                dots[i].setImageResource(R.mipmap.find_not_pic);
            }
        }
    }


    //在ViewPager滑动之后，调用小点的动态变化的方法，是二者对应的位置一致
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        getDots(position);
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button_login:
                String name = editText_name.getText().toString();
                String password = editText_password.getText().toString();
                SharedPreferences.Editor editor = sharedPreferences_information.edit();
                if (!TextUtils.isEmpty(name) && !TextUtils.isEmpty(password)) {
                    editor.putString("name", name);
                    editor.putString("password", password);
                    editor.commit();
                } else {
                    Toast.makeText(MainActivity.this, "用户名密码均不能为空", Toast.LENGTH_SHORT).show();
                }
                break;
        }
    }
}