Android中图片的左右滑动（带小点点）

来源：互联网发布：制作假营业执照软件编辑：程序博客网时间：2024/05/05 16:30

Android中图片的左右切换随处可见，今天我也试着查阅资料试着做了一下，挺简单的一个小Demo，却也发现了一些问题，话不多说，上代码~：

使用了3个xml文件作为ViewPager的滑动page，布局都是相同的，如下只展示其中之一：

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:layout_width="match_parent" 4     android:layout_height="match_parent" 5     android:orientation="vertical" 6     > 7     <ImageView 8         android:layout_width="match_parent" 9         android:layout_height="match_parent"10         android:scaleType="centerCrop"11         android:src="@mipmap/view1"/>12 13 </LinearLayout>

只是用了一个ImageView作为显示图片的容器

主页面布局：

 1 <?xml version="1.0" encoding="UTF-8"?> 2  3 <RelativeLayout android:orientation="vertical" 4 android:layout_height="match_parent" 5 android:layout_width="match_parent" 6 xmlns:android="http://schemas.android.com/apk/res/android"> 7  8  9 10 11 <!-- 切换卡 -->12 13 14 <android.support.v4.view.ViewPager15     android:layout_height="wrap_content"16     android:layout_width="match_parent"17     android:id="@+id/viewPager"></android.support.v4.view.ViewPager>18 19 <!-- 点点 -->20 21 22 <LinearLayout23     android:orientation="horizontal"24     android:layout_height="wrap_content"25     android:layout_width="fill_parent"26     android:id="@+id/viewGroup"27     android:layout_alignParentBottom="true"28     android:gravity="center_horizontal"29     android:layout_marginBottom="40dp"></LinearLayout>30 </RelativeLayout>

接下来就是主函数的的代码了：

  1 package com.yztc.lx.homework;  2   3 import android.app.Activity;  4 import android.os.Bundle;  5 import android.support.v4.view.PagerAdapter;  6 import android.support.v4.view.ViewPager;  7 import android.view.LayoutInflater;  8 import android.view.ViewGroup.LayoutParams;  9 import android.view.View; 10 import android.view.ViewGroup; 11 import android.widget.ImageView; 12  13 import java.util.ArrayList; 14 import java.util.List; 15  16 /** 17  * Created by Lx on 2016/8/6. 18  */ 19  20 public class Layout1Activity extends Activity { 21     private ViewPager viewPager; 22     private PagerAdapter adapter; 23     private List<View> viewPages = new ArrayList<>(); 24  25     //包裹点点的LinearLayout 26     private ViewGroup group; 27     private ImageView imageView; 28     //定义一个ImageVIew数组，来存放生成的小园点 29     private ImageView[] imageViews; 30  31     @Override 32     protected void onCreate(Bundle savedInstanceState) { 33         super.onCreate(savedInstanceState); 34         setContentView(R.layout.layout1); 35  36         initView(); 37         initPageAdapter(); 38         initPointer(); 39         initEvent(); 40     } 41  42     //为控件绑定事件,绑定适配器 43     private void initEvent() { 44         viewPager.setAdapter(adapter); 45         viewPager.addOnPageChangeListener(new GuidePageChangeListener()); 46     } 47  48     //初始化ViewPager 49     private void initPageAdapter() { 50         /** 51          * 对于这几个想要动态载入的page页面，使用LayoutInflater.inflate()来找到其布局文件，并实例化为View对象 52          */ 53         LayoutInflater inflater = LayoutInflater.from(this); 54         View page1 = inflater.inflate(R.layout.page1, null); 55         View page2 = inflater.inflate(R.layout.page2, null); 56         View page3 = inflater.inflate(R.layout.page3, null); 57  58         //添加到集合中 59         viewPages.add(page1); 60         viewPages.add(page2); 61         viewPages.add(page3); 62  63         adapter = new PagerAdapter() { 64             //获取当前界面个数 65             @Override 66             public int getCount() { 67                 return viewPages.size(); 68             } 69  70             //判断是否由对象生成页面 71             @Override 72             public boolean isViewFromObject(View view, Object object) { 73                 return view == object; 74             } 75  76             @Override 77             public void destroyItem(ViewGroup container, int position, Object object) { 78                 container.removeView(viewPages.get(position)); 79             } 80  81             //返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中 82             @Override 83             public Object instantiateItem(ViewGroup container, int position) { 84                 View view = viewPages.get(position); 85                 container.addView(view); 86                 return view; 87             } 88         }; 89     } 90  91     //绑定控件 92     private void initView() { 93         viewPager = (ViewPager) findViewById(R.id.viewPager); 94         group = (ViewGroup) findViewById(R.id.viewGroup); 95     } 96  97     //初始化下面的小圆点的方法 98     private void initPointer() { 99         //有多少个界面就new多长的数组100         imageViews = new ImageView[viewPages.size()];101         for (int i = 0; i < imageViews.length; i++) {102             imageView = new ImageView(this);103             //设置控件的宽高104             imageView.setLayoutParams(new LayoutParams(25, 25));105             //设置控件的padding属性106             imageView.setPadding(20, 0, 20, 0);107             imageViews[i] = imageView;108             //初始化第一个page页面的图片的原点为选中状态109             if (i == 0) {110                 //表示当前图片111                 imageViews[i].setBackgroundResource(R.mipmap.page_indicator_focused);112                 /**113                  * 在java代码中动态生成ImageView的时候114                  * 要设置其BackgroundResource属性才有效115                  * 设置ImageResource属性无效116                  */117 118             } else {119                 imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);120             }121             group.addView(imageViews[i]);122         }123     }124 125     //ViewPager的onPageChangeListener监听事件，当ViewPager的page页发生变化的时候调用126     public class GuidePageChangeListener implements ViewPager.OnPageChangeListener {127         @Override128         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {129 130         }131 132         //页面滑动完成后执行133         @Override134         public void onPageSelected(int position) {135             //判断当前是在那个page，就把对应下标的ImageView原点设置为选中状态的图片136             for (int i = 0; i < imageViews.length; i++) {137                 imageViews[position].setBackgroundResource(R.mipmap.page_indicator_focused);138                 if (position != i) {139                     imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);140                 }141             }142         }143 144         //监听页面的状态，0--静止  1--滑动   2--滑动完成145         @Override146         public void onPageScrollStateChanged(int state) {147 148         }149     }150 151 }

这样，一个简单地滑动图片的Demo就完成了，需要注意的地方有：在java代码中生成ImageView的时候，如果想为其设置显示的图片，要使用setBackgroundResource()方法而不是setImageResource()方法

0 0