欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android开发之使用ViewPager实现图片左右滑动切换效果

程序员文章站 2024-03-05 18:10:19
android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为vie...

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

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

<?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"
  android:orientation="vertical"
  >
  <imageview
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaletype="centercrop"
    android:src="@mipmap/view1"/>
</linearlayout>

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

主页面布局:

<?xml version="1.0" encoding="utf-8"?>
<relativelayout android:orientation="vertical"
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 切换卡 -->
<android.support.v4.view.viewpager
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:id="@+id/viewpager"></android.support.v4.view.viewpager>
<!-- 点点 -->
<linearlayout
  android:orientation="horizontal"
  android:layout_height="wrap_content"
  android:layout_width="fill_parent"
  android:id="@+id/viewgroup"
  android:layout_alignparentbottom="true"
  android:gravity="center_horizontal"
  android:layout_marginbottom="40dp"></linearlayout>
</relativelayout>

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

package com.yztc.lx.homework;
import android.app.activity;
import android.os.bundle;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.view.layoutinflater;
import android.view.viewgroup.layoutparams;
import android.view.view;
import android.view.viewgroup;
import android.widget.imageview;
import java.util.arraylist;
import java.util.list;
/**
 * created by lx on 2016/8/6.
 */
public class layout1activity extends activity {
  private viewpager viewpager;
  private pageradapter adapter;
  private list<view> viewpages = new arraylist<>();
  //包裹点点的linearlayout
  private viewgroup group;
  private imageview imageview;
  //定义一个imageview数组,来存放生成的小园点
  private imageview[] imageviews;
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.layout1);
    initview();
    initpageadapter();
    initpointer();
    initevent();
  }
  //为控件绑定事件,绑定适配器
  private void initevent() {
    viewpager.setadapter(adapter);
    viewpager.addonpagechangelistener(new guidepagechangelistener());
  }
  //初始化viewpager
  private void initpageadapter() {
    /**
     * 对于这几个想要动态载入的page页面,使用layoutinflater.inflate()来找到其布局文件,并实例化为view对象
     */
    layoutinflater inflater = layoutinflater.from(this);
    view page1 = inflater.inflate(r.layout.page1, null);
    view page2 = inflater.inflate(r.layout.page2, null);
    view page3 = inflater.inflate(r.layout.page3, null);
    //添加到集合中
    viewpages.add(page1);
    viewpages.add(page2);
    viewpages.add(page3);
    adapter = new pageradapter() {
      //获取当前界面个数
      @override
      public int getcount() {
        return viewpages.size();
      }
      //判断是否由对象生成页面
      @override
      public boolean isviewfromobject(view view, object object) {
        return view == object;
      }
      @override
      public void destroyitem(viewgroup container, int position, object object) {
        container.removeview(viewpages.get(position));
      }
      //返回一个对象,这个对象表明了pageradapter适配器选择哪个对象放在当前的viewpager中
      @override
      public object instantiateitem(viewgroup container, int position) {
        view view = viewpages.get(position);
        container.addview(view);
        return view;
      }
    };
  }
  //绑定控件
  private void initview() {
    viewpager = (viewpager) findviewbyid(r.id.viewpager);
    group = (viewgroup) findviewbyid(r.id.viewgroup);
  }
  //初始化下面的小圆点的方法
  private void initpointer() {
    //有多少个界面就new多长的数组
    imageviews = new imageview[viewpages.size()];
    for (int i = 0; i < imageviews.length; i++) {
      imageview = new imageview(this);
      //设置控件的宽高
      imageview.setlayoutparams(new layoutparams(25, 25));
      //设置控件的padding属性
      imageview.setpadding(20, 0, 20, 0);
      imageviews[i] = imageview;
      //初始化第一个page页面的图片的原点为选中状态
      if (i == 0) {
        //表示当前图片
        imageviews[i].setbackgroundresource(r.mipmap.page_indicator_focused);
        /**
         * 在java代码中动态生成imageview的时候
         * 要设置其backgroundresource属性才有效
         * 设置imageresource属性无效
         */
      } else {
        imageviews[i].setbackgroundresource(r.mipmap.page_indicator_unfocused);
      }
      group.addview(imageviews[i]);
    }
  }
  //viewpager的onpagechangelistener监听事件,当viewpager的page页发生变化的时候调用
  public class guidepagechangelistener implements viewpager.onpagechangelistener {
    @override
    public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
    }
    //页面滑动完成后执行
    @override
    public void onpageselected(int position) {
      //判断当前是在那个page,就把对应下标的imageview原点设置为选中状态的图片
      for (int i = 0; i < imageviews.length; i++) {
        imageviews[position].setbackgroundresource(r.mipmap.page_indicator_focused);
        if (position != i) {
          imageviews[i].setbackgroundresource(r.mipmap.page_indicator_unfocused);
        }
      }
    }
    //监听页面的状态,0--静止 1--滑动  2--滑动完成
    @override
    public void onpagescrollstatechanged(int state) {
    }
  }
}

这样,一个简单地滑动图片的demo就完成了,需要注意的地方有:在java代码中生成imageview的时候,如果想为其设置显示的图片,要使用setbackgroundresource()方法而不是setimageresource()方法

以上所述是小编给大家介绍的android开发之使用viewpager实现图片左右滑动切换效果,希望对大家有所帮助