首页 > 代码库 > Android ViewPager实现多个图片水平滚动

Android ViewPager实现多个图片水平滚动

1.示意图

 技术分享          技术分享

技术分享          技术分享

2.实现分析

(1).xml配置

<!-- 配置container和pager的clipChildren=false, 并且指定marginLeft 和 marginRight 的值-->  <LinearLayout      android:id="@+id/container"      android:layout_width="match_parent"      android:layout_height="100dp"      android:clipChildren="false"      android:gravity="center_horizontal"      android:layerType="software"      android:orientation="horizontal" >        <android.support.v4.view.ViewPager          android:id="@+id/viewpager"          android:layout_width="match_parent"          android:layout_height="match_parent"          android:layout_marginLeft="110dp"          android:layout_marginRight="110dp"          android:clipChildren="false" >      </android.support.v4.view.ViewPager>  </LinearLayout>  

(2).java代码

// 1.设置幕后item的缓存数目  viewPager.setOffscreenPageLimit(3);   // 2.设置页与页之间的间距  viewPager.setPageMargin(10);  // 3.将父类的touch事件分发至viewPgaer,否则只能滑动中间的一个view对象  container.setOnTouchListener(new View.OnTouchListener() {      @Override      public boolean onTouch(View v, MotionEvent event) {          return viewPager.dispatchTouchEvent(event);      }  });  

3.代码实现

/**  * MainActivity.java  *   * @author http://blog.csdn.net/zimo2013  *   */  public class MainActivity extends Activity implements OnPageChangeListener {        private ViewPager viewPager;      private List<View> views = new ArrayList<View>();        private LinearLayout container;      private TextView tvTitle;      private LayoutInflater inflater;        private String dir;        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);            inflater = getLayoutInflater();          container = (LinearLayout) findViewById(R.id.container);          viewPager = (ViewPager) findViewById(R.id.viewpager);          tvTitle = (TextView) findViewById(R.id.title);            //这里预先在sdcard准备一些轮播图片资源          dir = Environment.getExternalStorageDirectory().getAbsolutePath();          // 得到views集合          views = new ArrayList<View>();          //此处可以根据需要自由设定,这里只是简单的测试          for (int i = 1; i <= 12; i++) {              View view = inflater.inflate(R.layout.guide_item, null);              views.add(view);          }                    /////////////////////主要配置//////////////////////////////////////                    // 1.设置幕后item的缓存数目          viewPager.setOffscreenPageLimit(3);           // 2.设置页与页之间的间距          viewPager.setPageMargin(10);          // 3.将父类的touch事件分发至viewPgaer,否则只能滑动中间的一个view对象          container.setOnTouchListener(new View.OnTouchListener() {              @Override              public boolean onTouch(View v, MotionEvent event) {                  return viewPager.dispatchTouchEvent(event);              }          });            ////////////////////////////////////////////////////////////////          viewPager.setAdapter(new MyAdapter()); // 为viewpager设置adapter          viewPager.setOnPageChangeListener(this);// 设置监听器      }        // PagerAdapter是object的子类      class MyAdapter extends PagerAdapter {            /**          * PagerAdapter管理数据大小          */          @Override          public int getCount() {              return views.size();          }            /**          * 关联key 与 obj是否相等,即是否为同一个对象          */          @Override          public boolean isViewFromObject(View view, Object obj) {              return view == obj; // key          }            /**          * 销毁当前page的相隔2个及2个以上的item时调用          */          @Override          public void destroyItem(ViewGroup container, int position, Object object) {              container.removeView((View) object); // 将view 类型 的object熊容器中移除,根据key          }            /**          * 当前的page的前一页和后一页也会被调用,如果还没有调用或者已经调用了destroyItem          */          @Override          public Object instantiateItem(ViewGroup container, int position) {              System.out.println("pos:" + position);              View view = views.get(position);              // 如果访问网络下载图片,此处可以进行异步加载              ImageView img = (ImageView) view.findViewById(R.id.icon);              img.setImageBitmap(BitmapFactory.decodeFile(dir + getFile(position)));              container.addView(view);              return views.get(position); // 返回该view对象,作为key          }      }        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {          if (viewPager != null) {              viewPager.invalidate();          }      }        // 一个新页被调用时执行,仍为原来的page时,该方法不被调用      public void onPageSelected(int position) {          tvTitle.setText(getFile(position));      }        /*      * SCROLL_STATE_IDLE: pager处于空闲状态 SCROLL_STATE_DRAGGING: pager处于正在拖拽中      * SCROLL_STATE_SETTLING: pager正在自动沉降,相当于松手后,pager恢复到一个完整pager的过程      */      public void onPageScrollStateChanged(int state) {      }        public String getFile(int position) {          return "/img" + ((position + 1) >= 10 ? (position + 1) : "0" + (position + 1)) + ".png";      }  }  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:layout_marginLeft="15dp"      android:layout_marginRight="15dp"      android:layout_marginTop="50dp"      android:orientation="vertical" >        <View          android:layout_width="match_parent"          android:layout_height="2dp"          android:background="#ffbd2021" />        <!-- 配置container和pager的clipChildren=false, 并且指定marginLeft 和 marginRight 的值 -->        <LinearLayout          android:id="@+id/container"          android:layout_width="match_parent"          android:layout_height="100dp"          android:clipChildren="false"          android:gravity="center_horizontal"          android:layerType="software"          android:orientation="horizontal" >            <android.support.v4.view.ViewPager              android:id="@+id/viewpager"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:layout_marginLeft="110dp"              android:layout_marginRight="110dp"              android:clipChildren="false" >          </android.support.v4.view.ViewPager>      </LinearLayout>        <View          android:layout_width="match_parent"          android:layout_height="2dp"          android:background="#ffbd2021" />        <ImageView          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:background="@drawable/line" />        <TextView          android:id="@+id/title"          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:layout_gravity="center"          android:gravity="center_horizontal"          android:scaleType="fitXY"          android:src="@drawable/ic_launcher"          android:text="baidu"          android:textSize="18sp" />    </LinearLayout>  

 

Android ViewPager实现多个图片水平滚动