【Android】ViewPager左右滑动和小圆点使用

摘要: 在做项目的时候，经常会用到ViewPager的使用，现在的使用方式，结合着ImageView和Fragment的使用时越来越多，那么我就用用一个demo来讲解进本用法，也是算是自己的笔记，供自己以后学习。

前言

ViewPager和ImageView以及Fragment的结合使用，是我们在开发的时候面对复杂一点的界面也能很好的实现，今天以一个demo的形式，记录ViewPager的基本使用法，并配合小圆点显示滑动进度结合使用。

首先我们先看布局如何实现：

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

<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v4.view.ViewPager
android:id="@+id/image_viewpager"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@drawable/icon_1"/>

<RelativeLayout
android:id="@+id/rl"
android:layout_width="wrap_content"
android:layout_height="26dp"
android:layout_gravity="bottom"
android:background="#6f000000"
android:padding="5dp"
android:visibility="visible">

<TextView
android:id="@+id/pic_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:ellipsize="end"
android:lines="1"
android:maxEms="17"
android:text="海淀区全面部署全国文明城区建设"
android:textColor="#FFFFFF"
android:textSize="11sp" />

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_alignParentRight="true"
android:gravity="center_vertical">

<LinearLayout
android:id="@+id/ll_point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="horizontal">
</LinearLayout>

<View
android:id="@+id/view_new_point"
android:layout_width="5dp"
android:layout_height="5dp"
android:layout_centerVertical="true"
android:background="@drawable/icon_dot_entity" />
</RelativeLayout>
</RelativeLayout>

</FrameLayout>
</LinearLayout>

其中我们要有ViewPager和小圆点的显示位置，然后根据ViewPager的滚动来控制小圆点的显示。

在Activity中，要有在ViewPager中的各种监听具体的代码分析在代码中都有清晰的注释，那么我们就直接张贴源代码：
ImageViewActivity.java

/**
* @author :huangxianfeng on 2016/12/20.
* ImageView和ViewPager的使用结合（要有小圆点知识点）
*/
public class ImageViewActivity extends AppCompatActivity {

private int[] imgeId = {R.drawable.icon_1,R.drawable.icon_2,R.drawable.icon_3};
private String[] imgeName = {"火龙果","山竹","菠萝"};
private ViewPager mViewPager;
private RelativeLayout mRl;
private TextView mPicTitle;
private LinearLayout mLLPointGroup;
private View mViewNewPoint;
private int currentPosition;
private int mPointWidth;//小圆点的宽度

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

/**
* 初始化控件
*/
private void init() {
mViewPager = (ViewPager)findViewById(R.id.image_viewpager);
mRl = (RelativeLayout)findViewById(R.id.rl);
mPicTitle = (TextView)findViewById(R.id.pic_title);
mLLPointGroup = (LinearLayout)findViewById(R.id.ll_point_group);
mViewNewPoint = findViewById(R.id.view_new_point);
}

/**
* 初始化控件的监听事件
*/
private void initAction() {

/**
* 对ViewPager设置监听事件
*/
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
*
* @param position 当用手指滑动时，如果手指按在页面上不动，position和当前页面index是一致的。
*                 如果手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的，
*                 只有翻页成功的情况下最后一次调用才会变为目标页面。（向右滑动同理）
* @param positionOffset 是当前页面滑动比例，如果页面向右翻动，这个值不断变大，
*                       最后在趋近1的情况后突变为0。如果页面向左翻动，这个值不断变小，最后变为0。
* @param positionOffsetPixels 是当前页面滑动像素，变化情况和positionOffset一致。
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (imgeId != null && imgeId.length > 0) {
currentPosition = position % imgeId.length;
if (currentPosition != (imgeId.length - 1)) {
int len = (int) ((mPointWidth * positionOffset) + currentPosition * mPointWidth);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mViewNewPoint.getLayoutParams();
params.leftMargin = len;
mViewNewPoint.setLayoutParams(params);
}
}
}

/**
* 根据那个图片被选中，然后设置对应的显示的名称内容
* @param position 代表那个图片被选中
*/
@Override
public void onPageSelected(int position) {
if (imgeId != null && imgeId.length > 0) {
currentPosition = position % imgeId.length;
mPicTitle.setText(imgeName[currentPosition]);//拿到相对于的图片的名字
if (currentPosition == (imgeId.length - 1)) {
int len = currentPosition * mPointWidth;
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mViewNewPoint.getLayoutParams();
params.leftMargin = len;
mViewNewPoint.setLayoutParams(params);
}

}
}

/**
* 当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，手指抬起时，
* 如果发生了滑动（即使很小），这个值会变为2，然后最后变为0 。总共执行这个方法三次。
* 一种特殊情况是手指按下去以后一点滑动也没有发生，这个时候只会调用这个方法两次，state值分别是1,0 。
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {

}
});
initDotLayout();
MyViewPager mYAdapter = new MyViewPager(ImageViewActivity.this,imgeId);
mViewPager.setAdapter(mYAdapter);
}

private void initDotLayout(){
mLLPointGroup.removeAllViews();
for (int i = 0; i < imgeId.length; i++) {
View point = new View(ImageViewActivity.this);
point.setBackgroundResource(R.drawable.icon_dot_empty);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
ScreenUtil.getInstance().dp2Px(UiUtils.getInstance().getContext(), 6),
ScreenUtil.getInstance().dp2Px(UiUtils.getInstance().getContext(), 6));
if (i>0){
params.leftMargin = ScreenUtil.getInstance().dp2Px(UiUtils.getInstance().getContext(), 4);
}
point.setLayoutParams(params);
mLLPointGroup.addView(point);

if (imgeId.length !=1){
mLLPointGroup.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
mLLPointGroup.getViewTreeObserver().removeGlobalOnLayoutListener(this);
mPointWidth = mLLPointGroup.getChildAt(1).getLeft() - mLLPointGroup.getChildAt(0).getLeft();
}
});
}
}
}

/**
* ViewPager的适配器
*/
class MyViewPager extends PagerAdapter{

private LinkedList<ImageView> imageViews = new LinkedList<>();
private Activity mActivity;
private int[] mImageId;

public MyViewPager(Activity mActivity, int[] mImageId) {
this.mActivity = mActivity;
this.mImageId = mImageId;
}

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

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

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//将此对象存储到集合中
imageViews.add((ImageView)object);
container.removeView((ImageView) object);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
// 对ViewPager页号求模取出View列表中要显示的项
currentPosition  = position % mImageId.length;
ImageView mImageView = null;
//进行判断集合数据是否为空,为空时创建新的ImageVIew对象
if (imageViews.size() == 0){
mImageView = new ImageView(mActivity);
mImageView.setScaleType(ImageView.ScaleType.FIT_XY);
}else{
mImageView = imageViews.remove(0);
}

//给ImageView对象设置图片
mImageView.setBackgroundResource(mImageId[currentPosition]);
container.addView(mImageView);
return mImageView;
}
}
}

工具类：
ScreenUtil.java

/**
* 自适应屏幕的高度
* @author huangxianfeng
*
*/
public class ScreenUtil {
private static ScreenUtil instance;
private ScreenUtil(){
}

public static ScreenUtil getInstance(){
if (instance == null){
synchronized (ScreenUtil.class){
if (instance == null){
instance = new ScreenUtil();
}
}
}
return instance;
}

/**
* 把图片的比例传值进来，再测量屏幕的宽度，得出高度值
* @param context
* @param width
* @param height
* @return
*/
@SuppressWarnings("deprecation")
public int getHeight(Context context,int width,int height){
WindowManager windowManager= (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
int scressWidth = windowManager.getDefaultDisplay().getWidth();
if (width != 0) {
return (int) ((height*scressWidth) / (float)width);
}
return 0;
}

/**
* dp转换成像素
* @param context
* @param dp
* @return
*/
public int dp2Px(Context context, float dp) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dp * scale + 0.5f);
}

/**
* 像素转换成dp
* @param context
* @param px
* @return
*/
public int px2Dp(Context context, float px) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (px / scale + 0.5f);
}
}

UiUtils.java

/**
* @author :huangxianfeng on 2016/12/21.
*/
public class UiUtils {

private static UiUtils instance;

private UiUtils() {

}

public static UiUtils getInstance() {
if (instance == null) {
synchronized (UiUtils.class) {
if (instance == null) {
instance = new UiUtils();
}
}
}
return instance;
}

/**
* 进行获取资源类
* @return
*/
private Resources getResources() {
return App.getContextObject().getResources();
}

/**
* 进行获取图片的Drawable
* @param
* @return
*/
public Drawable getDrawable(int drawableId) {
return getResources().getDrawable(drawableId);
}

public static int getDimen(int id) {
return (int) (UiUtils.getInstance().getResources().getDimension(id) + 0.5f);
}

/**
* 进行提供获取Context
*
* @return
*/
public Context getContext() {
return App.getContextObject();
}

/**
* 进行获取Handler
*/
public Handler getHandler() {
return App.getHandler();
}

//    /**
//     * 进行显示信息
//     *
//     * @param msg
//     */
//    public void showToast(final String msg) {
//        runOnUiThread(new Runnable() {
//            @Override
//            public void run() {
//                Toast.makeText(MyApplication.getContextObject(), msg, Toast.LENGTH_SHORT).show();
//            }
//        });
//    }
//
//    /**
//     * 进行获取屏幕的宽度
//     *
//     * @return
//     */
//    @SuppressWarnings("deprecation")
//    public int getDefaultWidth() {
//        WindowManager windowManager = (WindowManager) UiUtils.getInstance().getContext()
//                .getSystemService(Context.WINDOW_SERVICE);
//        return windowManager.getDefaultDisplay().getWidth();
//    }
//
//    /**
//     * 进行获取屏幕的高度
//     *
//     * @return
//     */
//    @SuppressWarnings("deprecation")
//    public int getDefaultHeight() {
//        WindowManager windowManager = (WindowManager) UiUtils.getInstance().getContext()
//                .getSystemService(Context.WINDOW_SERVICE);
//        return windowManager.getDefaultDisplay().getHeight();
//    }
//
//    /**
//     * 进行获取GET_META_DATA的ApplicationInfo
//     * @param packageManager
//     * @param packageName
//     * @return
//     */
//    private Bundle getAppMetaDataBundle(PackageManager packageManager,
//                                        String packageName) {
//        Bundle bundle = null;
//        try {
//            ApplicationInfo ai = packageManager.getApplicationInfo(packageName,
//                    PackageManager.GET_META_DATA);
//            bundle = ai.metaData;
//        } catch (PackageManager.NameNotFoundException e) {
//            e.printStackTrace();
//        }
//        return bundle;
//    }
//
//    /**
//     * 进行获取对应的键的值
//     * @param key
//     * @param defValue
//     * @param packageName
//     * @return
//     */
//    public String getMetaDataStringApplication(String key, String defValue,String packageName) {
//        Bundle bundle = getAppMetaDataBundle(UiUtils.getInstance().getContext().getPackageManager(),packageName);
//        if (bundle != null && bundle.containsKey(key)) {
//            return bundle.getString(key);
//        }
//        return defValue;
//    }
}

以上就是全部内容，欢迎大家留言关注交流。

转载请注明出处：

【定陶黄公子】