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

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实现图片左右滑动切换效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,再此也非常感谢大家对我们网站的支持!

时间: 2016-08-06

Android 使用ViewPager实现图片左右循环滑动自动播放

ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1. 首先看一些layout下的xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_

Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)

前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以要实现循环还得需要自己去动手.自己在网上也找了些例子,本博文的Demo是结合自己找到的一些相关例子的基础上去改造,也希望对读者有用. Demo实现的效果图如下: Demo代码: 工程目录如下图: 废话不多说,上代码. 1.主Activity代码如下: package com.stevenhu.and

Android实现图片左右滑动效果

关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来就让我们开始实现这种效果. 接下来我们看一下程序结构图: MainActivity文件中代码: package com.android.flip; import android.app.Activity; import android.os.Bundle; import android.view.GestureDetector; import andro

Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到,不管多少图片都不会OOM(ViewPager内

Android实现图片自动轮播并且支持手势左右无限滑动

废话不多说了,先给大家上左右无限滑动的代码了. 1.左右无限滑动 public class MainActivity extends AppCompatActivity { private static ViewPager viewPager; private RadioGroup group; //图片资源,实际项目需要从网络获取 private int[] imageIds = {R.drawable.ym1, R.drawable.ym2, R.drawable.ym3, R.drawab

bootstrap实现图片自动轮播

bootstrap图片自动轮播效果图: 代码实现: <!DOCTYPE html> <html lang="zh-CN"> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap-theme.min.css" />

java制作广告图片自动轮播控件

首页图片的轮播 /** * 广告图片自动轮播控件</br> * */ public class ImageCycleView extends LinearLayout { /** * 上下文 */ private Context mContext; /** * 图片轮播视图 */ private ViewPager mAdvPager = null; /** * 滚动图片视图适配 */ private ImageCycleAdapter mAdvAdapter; /** * 图片轮播指示器控件

详解android 视频图片混合轮播实现

循环添加视频view  图片view for (int i = 0 ;i<beansArrayList.size();i++){ if (beansArrayList.get(i).getType()==1){ videoPlayer = new NiceVideoPlayer(this); controller = new TxVideoPlayerController(this); videoPlayer.setController(controller); videoPlayer.setU

JS实现简易图片自动轮播

本文实例为大家分享了JS实现简易图片自动轮播的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>自动播放选项卡</title> <style> *{ margin:0; padding:0; } .box{ width:600px; height:400px; border:1px solid

Android实现图片文字轮播特效

本文实例讲解了Android实现图片文字轮播特效的详细代码,分享给大家供大家参考,具体内容如下 图片轮播是类似知乎日报上的一个轮播效果,如下图. 好了直接进入正题,首先是出示一下效果: MainActivity: import java.util.ArrayList; import java.util.List; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService;

js图片自动轮播代码分享(js图片轮播)

1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left =  .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http:

用box固定长宽实现图片自动轮播js代码

这个小DEMO,主要用box固定长宽用于显示图片,将图片放入imagebox中,连接起来,每次换图片则将imagebox的style属性的margin-left改动,能形成轮播的效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

Android实现图片轮播效果的两种方法

大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

android常见手动和自动轮播图效果

本文实例为大家分享了android手动和自动轮播图效果的具体代码,供大家参考,具体内容如下 1.准备好需要的轮播图片,图片标题(初始化,声明). /**轮播图片*/ private int[] imageIds=new int[]{ R.drawable.ic_launcher, R.drawable.simple_player_control_focused_holo, R.drawable.dot_player1_1, R.drawable.jt5, }; /**轮播图片的标题*/ priv