Android 使用ViewPager 做的半吊子的图片轮播

时间：2023-03-08 23:28:22
Android 使用ViewPager 做的半吊子的图片轮播

Android 使用ViewPager 做的半吊子的图片轮播

效果图

Android 使用ViewPager 做的半吊子的图片轮播

虽然不咋样，但是最起码的功能是实现了,下面我们来一步步的实现它。

界面

Android 使用ViewPager 做的半吊子的图片轮播

下面我们来分析一下界面的构成

  1. 整体的布局: 因为我们要做出这种，一层叠加一层的效果，就目前开来只有 FrameLayout 布局能够做出来的。
  2. 下面的小点：明显的我们这里用的是RadioButton控件来做的。
  3. 黑色的边框: 为了更好的显示图片轮播的区域，我们用 shape xml 文件，为我们的图片轮播添加了一个边框。
  4. ui的主体:因为我们的图片是要进行轮播的，我们这里用了ViewPager作为了该界面的主体。
<?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:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context="com.example.it.studyimagerecycle.MainActivity">

	<!--用于实现 一层一层效果的帧布局，通过background属性设置了一圈边框-->

    <FrameLayout

        android:id="@+id/img_cycle"

        android:layout_width="match_parent"

        android:layout_height="180dp"

        android:background="@drawable/cycleimg_border">

		<!--用来实现图片轮播的主体-->

        <android.support.v4.view.ViewPager

            android:id="@+id/img_cycle_viewpager"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:layout_margin="2dp">

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

		<!--图片轮播下方的小点，因为比较懒就在布局文件中直接写死了，其实可以再代码中根据要轮播的数量进行生成-->

        <RadioGroup

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_gravity="bottom"

            android:layout_margin="2dp"

            android:gravity="center"

            android:orientation="horizontal">

            <RadioButton

                android:id="@+id/dot1"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:checked="true" />

            <RadioButton

                android:id="@+id/dot2"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content" />

            <RadioButton

                android:id="@+id/dot3"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content" />

        </RadioGroup>

    </FrameLayout>

</RelativeLayout>

代码

代码的分析

  • 我们是要可以滑动的，这一点需要用ViewPager来实现，有ViewPager就要有我们自己实现PagerAdapter
  • 我们需要生成 在ViewPager上显示的图片，所以我们要通过代码来生成一些ImageView控件。
  • 而且我们需要间隔一定的时间来进行图片的切换。
  • 而且随着图片的自动切换，我们下面的RadioButton也要跟着选中
  • 为了更好的用户体验，我们的RadioButton不能手动的选中
成员变量
private RadioButton rb1, rb2, rb3;

private ViewPager imageViewPager;

private List<RadioButton> radiobuttionList;// 图片轮播的点的集合

private List<Integer> drawIdList; //图片id的集合

private List<ImageView> imageViewList; //要在ViewPager上显示的内容

private int pageIndex = 0; //viewpagr页面的索引

private int countDown = 3; //切换页面的倒计时
一些初始化方法
/*

* 获取我们需要的view

* */

private void initFindView() {

    rb1 = (RadioButton) this.findViewById(R.id.dot1);

    rb2 = (RadioButton) this.findViewById(R.id.dot2);

    rb3 = (RadioButton) this.findViewById(R.id.dot3);

    imageViewPager = (ViewPager) this.findViewById(R.id.img_cycle_viewpager);

}

/*

* 将屏幕上的点整合起来

* */

private void initDots() {

    radiobuttionList = new ArrayList<RadioButton>();

    radiobuttionList.add(rb1);

    radiobuttionList.add(rb2);

    radiobuttionList.add(rb3);

	//使RadioButton不能手动选中

    for (RadioButton rb : radiobuttionList) {

        rb.setClickable(false);

    }

}

/*

* 初始化要加载的图片

* */

private void initImage() {

    this.drawIdList = new ArrayList<Integer>();

    drawIdList.add(R.drawable.grape);

    drawIdList.add(R.drawable.strawberry);

    drawIdList.add(R.drawable.watermelon);

}

/*

* 初始化ViewPage所需要的ImageView

* */

private void initImageView() {

    imageViewList = new ArrayList<ImageView>();

    for (int i = 0; i < 3; i++) {

        //初始化ImageView的属性

        ImageView imageView = new ImageView(this);

      	//设置ImageView的属性，使ImageView的大小是填充父窗体的

        ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(-1, -1);

        //让ImageView应用这些属性

      	imageView.setLayoutParams(lp);

      	//使ImageView的图像填充

        imageView.setScaleType(ImageView.ScaleType.FIT_XY);

        this.imageViewList.add(imageView);

    }

}

//在onCrate方法中调用这些初始化

@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    initFindView();

    initDots();

    initImage();

    initImageView();

  	//设置ViewPager page改变的监听

    this.imageViewPager.addOnPageChangeListener(this);

    //为ViewPager设置Adapter

  	this.imageViewPager.setAdapter(new MyPagerAdapter(this, imageViewList, drawIdList));

	//开启线程，一定时间后切换图片

    new Thread(this).start();

}
PagerAdapter
package com.example.it.studyimagerecycle;

import android.content.Context;

import android.support.v4.view.PagerAdapter;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import com.bumptech.glide.Glide;

import java.util.List;

public class MyPagerAdapter extends PagerAdapter {

    private final Context context; //上下文环境

    private final List<Integer> imgList; //在ViewPager中显示的集合

    private final List<ImageView> imageViewList; //图片资源Id的集合

    public MyPagerAdapter(Context context, List<ImageView> imageViewList, List<Integer> imageIdList) {

        this.context = context;

        this.imgList = imageIdList;

        this.imageViewList = imageViewList;

    }

    //释放占用的资源

    @Override

    public void destroyItem(ViewGroup container, int position, Object object) {

        container.removeView(this.imageViewList.get(position));

    }

    //获取可滑动页面的数量

    @Override

    public int getCount() {

        return imageViewList.size();

    }

    @Override

    public boolean isViewFromObject(View view, Object object) {

        return view == object;

    }

    /*

    * 实例化item

    * */

    @Override

    public Object instantiateItem(ViewGroup container, int position) {

        ImageView imageView = this.imageViewList.get(position);

        int id = this.imgList.get(position);

        //加载出指定的图片，这里使用Glide这个开源项目，图片压缩

        Glide.with(this.context).load(id).into(imageView);

        container.addView(imageView);

        return imageView;

    }

}
ViewPager页面改变的事件

因为代码是写在Activity中的，我们要让Activity实现 ViewPager.OnPageChangeListener 接口。

@Override

public void onPageScrolled(int position, float positi

}

/*

* 页面被选中的时候触发

* 我们要在这个页面中处理，当我们手动滑动页面的时候要处理的业务逻辑

* */

@Override

public void onPageSelected(int position) {

 	//获取应该是选中状态的RadioButton

    RadioButton radioButton = radiobuttionList.get(position);

  	//设置radioButton为选中状态

    radioButton.setChecked(true);

    //重置倒计时

    this.countDown = 3;

    //重新设置pageIndex

    this.pageIndex = position;

}

@Override

public void onPageScrollStateChanged(int state) {

}
子线程更新选中的页面
/*

* 倒计时进行图片的切换

* */

@Override

public void run() {

  	//进行图片转换的前提是我们的Activity的资源没有被回收。

    while (MainActivity.this.isDestroyed() == false) {

      	//让线程睡眠一秒，实现倒计时功能

        SystemClock.sleep(1000l);

      	//倒计时减去

        countDown--;

      	//如果倒计时结束那么进行页面的转换

        if (countDown == 0) {

          	//设置该被选中的Page的索引，为原来的所以+1

            this.pageIndex++;

          	//如果是我们的page已经是最后一个了，那么我么的第一个page应该被选中

            if (pageIndex == this.radiobuttionList.size())

                this.pageIndex = 0;

          	//更新ui

            runOnUiThread(new Runnable() {

                @Override

                public void run() {

                    //设置选中项

                    imageViewPager.setCurrentItem(pageIndex);

                }

            });

        }

    }

}

总结

经过以上的这些步骤，我们的图片轮播的效果已经实现了，因为本人水平原因，写的代码。。。，请大家凑活着看吧。

源码下载: https://git.oschina.net/ShareKnowledge/StudyImageCycle

相关文章