Android ViewPager引导页和GifView动态图片加载库的简单使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dpl12/article/details/83019439

前言：

ViewPager，视图翻页工具，提供了多页面切换的效果，ViewPager使用起来就是我们通过创建适配器给它填充多个视图，左右滑动时，切换不同的view.Google官方是建议我们使用片段来填充ViewPager的，这样可以更加方便的生成每个页面，以及管理每个页面的生命周期。

查看层布局：

欢迎页面：activity_welcome.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".WelcomeActivity">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/welcome_android" />
</android.support.constraint.ConstraintLayout>

安装后引导页面：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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".GuideActivity">

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

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_alignParentBottom="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>

引导页面三个VIE页面：

one_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/guide_1" />
</android.support.constraint.ConstraintLayout>

two_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/guide_2" />
</android.support.constraint.ConstraintLayout>

three_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/guide_3" />

    <Button
        android:id="@+id/btn_main"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_marginStart="110dp"
        android:layout_marginLeft="110dp"
        android:layout_marginEnd="110dp"
        android:layout_marginRight="110dp"
        android:background="#3332CD99"
        android:text="@string/main"
        android:textColor="@color/colorPrimary"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.78"
        tools:ignore="MissingConstraints" />

</android.support.constraint.ConstraintLayout>

主页面：activity_main.xml中        添加GIFView.jar包

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".MainActivity">

    <com.ant.liao.GifView
        android:id="@+id/gifView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

控制层的Java代码：

  WelcomeActivity.java

public class WelcomeActivity extends AppCompatActivity {

    private boolean isFirstIn=false;//判定是否是第一次打开
    private static final int TIME=2000;//声明延时的时间
    private static final int GO_HOME=1000;//跳转到Main2Activity的时间
    private static final int GO_GUIDE=1001;//跳转到MainActivity的时间

    //线程分为主线程(主线程又叫UI线程，只能有一个主线程）和子线程（可以有多个）Handler只能在主线程里运行
    //handler是Android给我们提供用来更新UI的一套机制，也是一套消息处理机制，我们可以发消息，也可以通过它处理消息。
    //使用Handler的方式进行延时操作
    @SuppressLint("HandlerLeak")
    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case GO_HOME:
                    goHome();
                    break;
                case GO_GUIDE:
                    goGuide();
                    break;
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);
        init();
    }
    private void init(){
        //获取SharedPreferenced对象,用以存储isFirstIn的当前值
        SharedPreferences preferences=getSharedPreferences("jike",MODE_PRIVATE);
        isFirstIn=preferences.getBoolean("isFirstIn",true);//将isFirstIn获取为true
        if (!isFirstIn){
            handler.sendEmptyMessageDelayed(GO_HOME,TIME);//发送消息
        }else {
            handler.sendEmptyMessageDelayed(GO_GUIDE,TIME);
            SharedPreferences.Editor editor=preferences.edit();//对存储数据进行编辑
            editor.putBoolean("isFirstIn",false);//将isFirstIn存储为false
            editor.commit();//编辑提交
        }
    }
    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();//关掉不用的界面
    }
}

  GuideActivity.java

//点随着view的改变而改变，需要实现改变的监听方法，重写ViewPager.OnPageChangeListener
public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager viewPager;
    private ViewPagerAdapter adapter;
    private List<View> views;//声明view集合
    private ImageView[] dots;//声明图像点的集合
    private int[] ids={R.id.iv1,R.id.iv2,R.id.iv3};//获取点id的集合

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

    private void initViews() {//初始化view
        LayoutInflater inflater=LayoutInflater.from(this);
        views=new ArrayList<>();
        views.add(inflater.inflate(R.layout.one_view,null));
        views.add(inflater.inflate(R.layout.two_view,null));
        views.add(inflater.inflate(R.layout.three_view,null));
        adapter=new ViewPagerAdapter(views,this);
        viewPager=findViewById(R.id.viewPager);
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(this);//viewPager实现监听
        //第三个页面获取id
        views.get(2).findViewById(R.id.btn_main).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent_main2=new Intent(GuideActivity.this, MainActivity.class);
                startActivity(intent_main2);
            }
        });
    }
    private void initDots(){  //初始化点
        dots=new ImageView[views.size()];//实例化对象
        for (int i=0;i<views.size();i++){
            dots[i]=findViewById(ids[i]);//获取id
        }
    }

    //页面被选中时调用
    @Override
    public void onPageSelected(int i) {
        for (int j=0;j<ids.length;j++){
            if (i==j){
                dots[j].setImageResource(R.drawable.login_point_selected);
            }else {
                dots[j].setImageResource(R.drawable.login_point);
            }
        }
    }

    //页面滑动时调用
    @Override
    public void onPageScrolled(int i, float v, int i1) {

    }
    //页面滑动状态改变时调用
    @Override
    public void onPageScrollStateChanged(int i) {

    }
}

引导页适配器：ViewPagerAdapter.java

public class ViewPagerAdapter extends PagerAdapter {

    private List<View> views;//创建显示页面view集合
    private Context context;//创建上下文对象


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

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(views.get(position));//view切换时移除当前页面view
    }


    //加载添加view的方法，类似于ListView中的getView（）
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

    @Override
    public int getCount() {
        return views.size(); //获取view的数量
    }


    //判断当前view是不是需要的对象
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return (view==o);
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private GifView gifView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gifView = findViewById(R.id.gifView);
        gifView.setGifImage(R.drawable.girl);
        gifView.setShowDimension(getWindowManager().getDefaultDisplay().getWidth(),getWindowManager().getDefaultDisplay().getHeight());//获取屏幕的宽高
//        gifView.setGifImageType(GifView.GifImageType.WAIT_FINISH);
        //gifView.setGifImageType(GifView.GifImageType.COVER);
    }

}

运行效果：

 

GitHub源码：https：//github.com/dpl12/ViewPagerDemo