android应用新手引导切换界面-ViewPager与PagerAdapter

最新推荐文章于 2022-10-15 15:55:20 发布

adolph_jun

最新推荐文章于 2022-10-15 15:55:20 发布

阅读量2.8k

点赞数 1

分类专栏： android

本文链接：https://blog.csdn.net/adolph_jun/article/details/53769883

版权

android 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

先看下效果图

图片是可以实现切换的

主要用到的技术：

ViewPager

PagerAdapter

类似于ArrayAdapter与ListView

具体怎么做开代码，注释应该算详细的了

MainActivity.java

package com.example.mynewviewpager;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import java.util.ArrayList;
import java.util.List;

/*
*  Created by WXJ-try on 2016/12/20.
* 1、写一个合适的布局文件，在布局文件中添加ViewPager空间，最好导v4包的
* 2、在MainActivity中准备好图片数据，定义一个int数据存放图片
* 3、定义一个List存放ImageView
* 4、写一个类继承PaperAdapter，并重写里面的方法
* 4.1、getCount()中设置好图片资源的个数
* 4.2、在isViewFromObject(),中设置return view == object;目前不知道为什么
* 4.3、重点重写instantiateItem()方法，在里面完成为ViewPager添加图片
* 4.4、重写destroyItem()方法，container.removeView((View) object);，目前还不知道为什么
* 5、为ViewPager绑定适配器
*
* 存在的问题：
* 1、在instantiateItem()方法中每次都需要重新生成ImageView,耗资源
* 解决办法：
* 1、利用一个数组将第一次新建的ImageView存储起来，下次不再重新生成而是到数组里直接取
*
* 为底部添加对应于图片的小园点
* 1、在drawable中定义shape的布局文件
* */
public class MainActivity extends AppCompatActivity {
    //得到图片
    private int images[] = {R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e};
    private LinearLayout linearLayout;
    private ViewPager viewPager;
    private ImageView lan_imageView;
    private List<ImageView> list;
    private int pointWidth;
    private Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        linearLayout = (LinearLayout) findViewById(R.id.ll);
        viewPager = (ViewPager) findViewById(R.id.vp);
        lan_imageView = (ImageView) findViewById(R.id.lan_iv);
        button = (Button) findViewById(R.id.bt);
        //优化添加代码---
        list = new ArrayList<ImageView>();
        for (int i = 0; i < images.length; i++) {
            ImageView imageView = new ImageView(MainActivity.this);
            list.add(imageView);

            //处理小灰点，将小灰点加到界面上,可以出现对应个数的灰点
            ImageView huiImageView = new ImageView(this);
            huiImageView.setImageResource(R.drawable.bg_hui);
            //调整灰点之间的间距，
            /*
            * LayoutParams作用：用于子控件向父控件提出请求
            * */
            LinearLayout.LayoutParams layoutParams =
                    new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                            LinearLayout.LayoutParams.WRAP_CONTENT);
            huiImageView.setLayoutParams(layoutParams);
            //为小圆点设置边距
            if (i > 0) {
                layoutParams.leftMargin = 20;
            }
            //将小灰点添加到界面上
            linearLayout.addView(huiImageView);
        }
        //---优化添加代码
        /*
        * 获得两个灰点之间的距离，作为小蓝点滑动的参考依据
        * 直接用getWidth()不能得到，因为View组件要在onResume回调后完成
        * 在视图树全部绘制完成时调用
        * */
        lan_imageView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                /*函数解释
                * getChildAt(1)得到linearLayout的对应子控件
                * getLeft() 的到该控件相对于父控件的左距离
                * */
                pointWidth = linearLayout.getChildAt(1).getLeft() - linearLayout.getChildAt(0).getLeft();
            }
        });

        PagerAdapter pagerAdapter = new Myadapter();
        viewPager.setAdapter(pagerAdapter);

        //为ViewPager设置监听器，实现相关的方法
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            /*
            * 当页面在滑动的时候会调用此方法，在滑动被停止之前，此方法回一直得到调用。
            * 其中三个参数的含义分别为：
            * position :当前页面，及你点击滑动的页面
            * positionOffset:当前页面偏移的百分比
            * positionOffsetPixels:当前页面偏移的像素位置
            * */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //完成小蓝点可以根据页面划过的百分百移动相应的百分百
                //要设置小蓝点的位置同样涉及到边距，也要得到layoutParams
                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) lan_imageView.getLayoutParams();
                //这里不好解释
                layoutParams.leftMargin = (int)(pointWidth * positionOffset+ position * pointWidth);
                lan_imageView.setLayoutParams(layoutParams);
            }

            /*此方法是页面跳转完后得到调用，
            * position是你当前选中的页面的Position（位置编号）
            */
            @Override
            public void onPageSelected(int position) {
                if(position == images.length-1){
                    button.setVisibility(View.VISIBLE);
                }else {
                    button.setVisibility(View.GONE);

                }
            }

            /*此方法是在状态改变的时候调用，其中state这个参数有三种状态（0，1，2）。
            * state ==1的时辰默示正在滑动，
            * state==2的时辰默示滑动完毕了，
            * state==0的时辰默示什么都没做。
            * */
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    class Myadapter extends PagerAdapter {
        @Override
        public int getCount() {
            return images.length;
        }

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

        //滑动一次调用一次
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
           /*优化前代码
            ImageView imageView = new  ImageView(MainActivity.this);
            imageView.setImageResource(images[position]);
            container.addView(imageView);*/

            //优化添加代码
            ImageView imageView = list.get(position);
            imageView.setImageResource(images[position]);
            container.addView(imageView);
            //优化添加代码
            return imageView;
        }

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

activity_main.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:background="#fdfdfd"
    tools:context="com.example.mynewviewpager.MainActivity">

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="50dp">
        <!--为四个小灰点占位-->
        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        </LinearLayout>
        <!--小蓝点，直接可以覆盖小灰点-->
        <ImageView
            android:id="@+id/lan_iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/bg_lan"/>
        <Button
            android:id="@+id/bt"
            android:visibility="gone"
            android:background="#5cc2fc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:text="欢迎使用"/>
    </RelativeLayout>

</RelativeLayout>

两种点的设计代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:height="10dp" android:width="10dp"/>
    <solid android:color="#d9d9d9"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="10dp" android:height="10dp"/>
    <solid android:color="#5cc2fc"/>
</shape>

adolph_jun

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
android应用新手引导切换界面-ViewPager与PagerAdapter

先看下效果图图片是可以实现切换的主要用到的技术：ViewPagerPagerAdapter类似于ArrayAdapter与ListView具体怎么做开代码，注释应该算详细的了MainActivity.javapackage com.example.mynewviewpager;import android.support.v4.view.PagerAda
复制链接

扫一扫