Android学习之Android ViewPager引导页

Android ViewPager引导页

ViewPager实现引导页

//讲解ViewPager的实现,实现左右滑动的效果,掌握ViewPager的使用
//创建GuideActivity引导类
//GuideActivity.java
    public class GuideActivity extends Activity {
        private ViewPager viewPager;
        private ViewPagerAdapter viewPagerAdapter;
        private List<View> views;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.guide);
            initViews();
        }

        private void initViews() {
            LayoutInflater layoutInflater = LayoutInflater.from(this);
            views = new ArrayList<View>();
            views.add(layoutInflater.inflate(R.layout.one, null));
            views.add(layoutInflater.inflate(R.layout.two, null));
            views.add(layoutInflater.inflate(R.layout.three, null));

            viewPagerAdapter = new ViewPagerAdapter(this,views);
            viewPager = (ViewPager) this.findViewById(R.id.viewpager);
            viewPager.setAdapter(viewPagerAdapter);
        }
    }

//创建ViewPagerAdapter扩展自PagerAdapter

    public class ViewPagerAdapter extends PagerAdapter{

        private Context context;
        private List<View> views;

        public ViewPagerAdapter(Context context, List<View> views){
            this.context = context;
            this.views = views;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(views.get(position));
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(views.get(position));
            return views.get(position);
        }

        @Override
        public int getCount() {
            return views.size();
        }

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

    }
//创建guide.xml
<?xml version="1.0" encoding="utf-8"?>
    <?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:orientation="vertical">


        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00000000"></android.support.v4.view.ViewPager>

        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">

        </LinearLayout>
    </RelativeLayout>
//创建3个引导页View 
//one.xml
<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/guide_1"/>

    </LinearLayout>
//two.xml
<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/guide_2"/>

    </LinearLayout>
//three.xml
<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/guide_3"/>

    </LinearLayout>
//修改AndroidManifest.xml
<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <!--<intent-filter>-->
                <!--<action android:name="android.intent.action.MAIN" />-->

                <!--<category android:name="android.intent.category.LAUNCHER" />-->
            <!--</intent-filter>-->
        </activity>
        <activity android:name=".GuideActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

添加导航点

//讲解在ViewPager上添加页面滑动的导航点,用以表示当前ViewPager的索引。掌握如何使用点来标识ViewPager当前在哪一页中。
//修改guide.xml
<?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:orientation="vertical">


        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00000000"></android.support.v4.view.ViewPager>

        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">

            <ImageView
                android:id="@+id/iv1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/login_point_selected" />

            <ImageView
                android:id="@+id/iv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/login_point" />

            <ImageView
                android:id="@+id/iv3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/login_point" />
        </LinearLayout>
    </RelativeLayout>
//修改GuideActivity.java
//初始化导航点
    private ImageView[] imageViews;
    private int[] ids = {R.id.iv1, R.id.iv2, R.id.iv3};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);
        initViews();
        initDots();
    }

    private void initDots(){
        imageViews = new ImageView[views.size()];
        for (int i = 0; i < views.size(); i++){
            imageViews[i] = (ImageView) findViewById(ids[i]);
        }
    }
//实现导航点监听方法
public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener

    //实现OnPageChangeListener方法
    /**
     * 当页面被滑动的时候进行调用
     * @param position
     * @param positionOffset
     * @param positionOffsetPixels
     */
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    /**
     * 当前新的页面被选中的时候调用
     * @param position
     */
    @Override
    public void onPageSelected(int position) {
        for (int i=0;i<ids.length;i++){
            if (position == i){
                imageViews[i].setImageResource(R.drawable.login_point_selected);
            }else {
                imageViews[i].setImageResource(R.drawable.login_point);
            }
        }
    }

    /**
     * 当滑动状态改变的时候进行调用
     * @param state
     */
    @Override
    public void onPageScrollStateChanged(int state) {

    }

添加进入主界面按钮

//讲解了在ViewPager的最后一个页面添加上Button按钮用以提示用户进入程序,掌握如何在最后一个页面添加上Button。

//修改three.xml
<?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:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/guide_3" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

            <Button
                android:id="@+id/start_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="进入" />
        </LinearLayout>

    </RelativeLayout>
//修改GuideActivity.java
private Button startBtn;

    private void initViews() {
        LayoutInflater layoutInflater = LayoutInflater.from(this);
        views = new ArrayList<View>();
        views.add(layoutInflater.inflate(R.layout.one, null));
        views.add(layoutInflater.inflate(R.layout.two, null));
        views.add(layoutInflater.inflate(R.layout.three, null));

        viewPagerAdapter = new ViewPagerAdapter(this, views);
        viewPager = (ViewPager) this.findViewById(R.id.viewpager);
        viewPager.setAdapter(viewPagerAdapter);
        viewPager.setOnPageChangeListener(this);

        startBtn = (Button) views.get(2).findViewById(R.id.start_btn);
        startBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(GuideActivity.this, MainActivity.class);
                startActivity(intent);
                finish();
            }
        });
    }

添加数据储存

//讲解了如何在首次打开程序进入引导页,之后进入主程序。掌握数据存储的使用,通过使用数据储存实现效果。
//新建Activity界面
//WelcomeActivity.java extendsActivity
public class WelcomeActivity extends AppCompatActivity {

        private boolean isFirstIn = true;
        private static final int DELAYED_TIME = 2000;
        private static final int GO_HOME = 1000;
        private static final int GO_GUIDE = 1001;

        private Handler handler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                switch (msg.what){
                    case GO_HOME:
                        goHome();
                        break;
                    case GO_GUIDE:
                        goGuide();
                        break;
                    default:
                        break;
                }
            }
        };

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_welcome);
            init();
        }

        private void init(){
            SharedPreferences sharedPreferences = getSharedPreferences("jike", MODE_PRIVATE);
            isFirstIn = sharedPreferences.getBoolean("isFirstIn", true);
            if (isFirstIn){
                handler.sendEmptyMessageDelayed(GO_GUIDE, DELAYED_TIME);
                SharedPreferences.Editor editor = sharedPreferences.edit();
                editor.putBoolean("isFirstIn", false);
                editor.commit();
            }else {
                handler.sendEmptyMessageDelayed(GO_HOME,DELAYED_TIME);
            }

        }

        private void goHome(){
            Intent intent = new Intent(WelcomeActivity.this, MainActivity.class);
            startActivity(intent);
            finish();
        }
        private void goGuide(){
            Intent intent = new Intent(WelcomeActivity.this, GuideActivity.class);
            startActivity(intent);
            finish();
        }

    }
//activity_welcome.xml
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/welcome_android" />

    </LinearLayout>

//AndroidManifest.xml

    <activity android:name=".WelcomeActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

效果截图

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

源码下载:LearnViewPager

https://github.com/zheng-zy/AndroidStudioProjects.git

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值