【Android】ViewPager实现图片左右滑动播放及添加点击事件

原创 2015年03月29日 23:20:52

前两天老师找我帮她写个Android的demo。说是要实现一个图片左右滑动的效果,并且点击图片的时候会发出声音。

由于好久没写过Android了,所以花了一段时间来复习和学习。现将过程和实现简单记录如下。(项目参照了一部分CSDN博主Android将军的)

实现使用的是ViewPager

代码如下:在点击监听的部分,通过获取List<>中的控件添加触摸监听。当然你可以在各个页面添加多个控件,然后在获取该界面的控件,然后各个添加监听。

而且代码有优化的地方。。。不过只是为了演示,就没有太花时间去做。。。原谅我的不负责。。。

package com.example.viewpagerdemo;

import java.util.ArrayList;

import android.media.MediaPlayer;
import android.os.Bundle;
import android.os.Parcelable;
import android.app.Activity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;

public class TwoActivity extends Activity implements OnPageChangeListener {
    private ViewPager viewPager;
    private ArrayList<View> list;
    private ImageView imageView;
    private ImageView[] imageViews;
    private MediaPlayer mediaPlayer = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LayoutInflater inflater = getLayoutInflater();
        list = new ArrayList<View>();
		list.add(inflater.inflate(R.layout.item01, null));
		list.add(inflater.inflate(R.layout.item02, null));
		list.add(inflater.inflate(R.layout.item03, null));
		list.add(inflater.inflate(R.layout.item04, null));
		list.add(inflater.inflate(R.layout.item05, null));


        imageViews = new ImageView[list.size()];

        ViewGroup group = (ViewGroup)findViewById(R.id.viewGroup);
        viewPager = (ViewPager)findViewById(R.id.viewPager);

        for(int i=0; i<list.size(); i++){
            imageView = new ImageView(this);
            imageView.setLayoutParams(new LayoutParams(12,12));
            imageViews[i] = imageView;
            if(i == 0){
                imageView.setBackgroundResource(R.drawable.page_indicator_focused);
            }else{
                imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);
            }

            group.addView(imageView);
        }


        viewPager.setAdapter(new MyAdapter());
        viewPager.setOnPageChangeListener(this);
        viewPager.setCurrentItem(0);

    }

    @Override
    public void onPageScrollStateChanged(int arg0) {

    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {

    }

    @Override
    public void onPageSelected(int arg0) {
        Log.e("log", "你当前选择的是  " + arg0%list.size());
        // 切换到下一页时将上一页在播放的音乐停掉并置为null,已重新初始化
        if(mediaPlayer!=null)
        {
            if (mediaPlayer.isPlaying())
            {
                mediaPlayer.stop();
                mediaPlayer = null;
            }
        }
        setImageBackground(arg0%list.size());
    }


    private void setImageBackground( int selectItems){
        for(int i=0; i<imageViews.length; i++){
            if(i == selectItems){
                imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);
            }else{
                imageViews[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
            }
        }
    }


    public class MyAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

        @Override
        public int getItemPosition(Object object) {
            return super.getItemPosition(object);
        }

        @Override
        public Object instantiateItem(ViewGroup container, final int position) {
            // 为每页添加点击监听,初始化音乐并点击时播放,并保证每次点击都可以重新播放
            switch (position)
            {
                case 0:
                    list.get(0).setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            Log.e("log", "你当前选择的是 dog ");
                            if(mediaPlayer!=null)
                            {
                                if (mediaPlayer.isPlaying())
                                {
                                    mediaPlayer.stop();
                                    mediaPlayer = null;
                                }
                            }
                            initMediaPlayer(0);
                            mediaPlayer.start();
                        }
                    });
                    break;
                case 1:
                    list.get(1).setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            Log.e("log", "你当前选择的是 cat ");
                            if(mediaPlayer!=null)
                            {
                                if (mediaPlayer.isPlaying())
                                {
                                    mediaPlayer.stop();
                                    mediaPlayer = null;
                                }
                            }
                            initMediaPlayer(1);
                            mediaPlayer.start();
                        }
                    });
                    break;
                case 2:
                    list.get(2).setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            Log.e("log", "你当前选择的是 cat ");
                            if(mediaPlayer!=null)
                            {
                                if (mediaPlayer.isPlaying())
                                {
                                    mediaPlayer.stop();
                                    mediaPlayer = null;
                                }
                            }
                            initMediaPlayer(2);
                            mediaPlayer.start();
                        }
                    });
                    break;
                case 3:
                    list.get(3).setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            Log.e("log", "你当前选择的是 cat ");
                            if(mediaPlayer!=null)
                            {
                                if (mediaPlayer.isPlaying())
                                {
                                    mediaPlayer.stop();
                                    mediaPlayer = null;
                                }
                            }
                            initMediaPlayer(3);
                            mediaPlayer.start();
                        }
                    });
                    break;
                case 4:
                    list.get(4).setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            Log.e("log", "你当前选择的是 cat ");
                            if(mediaPlayer!=null)
                            {
                                if (mediaPlayer.isPlaying())
                                {
                                    mediaPlayer.stop();
                                    mediaPlayer = null;
                                }
                            }
                            initMediaPlayer(4);
                            mediaPlayer.start();
                        }
                    });
                    break;
                default:
                    break;
            }
            ((ViewPager) container).addView(list.get(position%list.size()),0);
            return list.get(position%list.size());
        }


        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {

        }

        @Override
        public Parcelable saveState() {
            return null;
        }

        @Override
        public void startUpdate(View arg0) {

        }

        @Override
        public void finishUpdate(View arg0) {

        }


        @Override
        public void destroyItem(View container, int position, Object object) {
            ((ViewPager)container).removeView(list.get(position%list.size()));
        }


    }

    private void initMediaPlayer(int i){
        // 初始化对于页面的音乐
        try {
            switch (i)
            {
                case 0:
                    mediaPlayer = MediaPlayer.create(this, R.raw.bgm1);
                    mediaPlayer.prepare();
                    break;
                case 1:
                    mediaPlayer = MediaPlayer.create(this, R.raw.bgm2);
                    mediaPlayer.prepare();
                    break;
                case 2:
                    mediaPlayer = MediaPlayer.create(this, R.raw.bgm3);
                    mediaPlayer.prepare();
                    break;
                case 3:
                    mediaPlayer = MediaPlayer.create(this, R.raw.bgm4);
                    mediaPlayer.prepare();
                    break;
                case 4:
                    mediaPlayer = MediaPlayer.create(this, R.raw.bgm5);
                    mediaPlayer.prepare();
                    break;
                default:
                    break;
            }

        } catch (Exception e)
        {
            e.printStackTrace();
        }
    }


}

布局文件:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    
   <android.support.v4.view.ViewPager  
        android:id="@+id/viewPager"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content" /> 
        
    <RelativeLayout  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content" 
        android:orientation="vertical" >  
  
        <LinearLayout  
            android:id="@+id/viewGroup"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:layout_alignParentBottom="true" 
            android:layout_marginBottom="30dp"  
            android:gravity="center_horizontal"  
            android:orientation="horizontal" >  
        </LinearLayout>  
    </RelativeLayout>  

</FrameLayout>

页面布局文件:

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/dog" />

</LinearLayout>

在上面的页面布局文件中我只是添加了一个ImageVIew并填满整个屏幕,当然如果您有需求您也可以在此添加文字或者其他控件,要添加监听,只需获取然后如上添加即可。


如果您需要自动滑动,那么应该添加一个计时器或就可以完成这个。

其他的动画切换效果,这些扩展都是看如何实现啦。


不过呢,感觉ViewPager的灵活性不高,完全可以自己定制实现一个类似的具有更多接口和灵活性选择的空间出来。当然这要看需求啦。


OK,记录到此。



viewpager条目点击事件

public Object instantiateItem(ViewGroup container, int position) { ImageView iv = images.get(posi...
  • hello_androidworld
  • hello_androidworld
  • 2015年07月31日 12:27
  • 4223

android:viewpager实现图片循环滑动+索引点击事件

先付上运行结果 这画质  o(︶︿︶)o 唉。。 至于左右循环滑动的原理就是把viewpager相关的代码改成无限循环。 需要自定义ViewPagerAdapter layout布局: ...
  • su20145104009
  • su20145104009
  • 2016年02月23日 19:00
  • 2921

Android Gallery 3张图无限循环 左右滑动都有效

  • 2014年03月28日 16:15
  • 4.55MB
  • 下载

Android Gallery 3张图无限循环 左右滑动都有效

Android Gallery 3张图无限循环 左右滑动都有效 分类: Android2014-03-28 16:15 739人阅读 评论(0) 收藏 举报 AndroidGallery3图无...
  • autowanglei
  • autowanglei
  • 2015年04月21日 14:34
  • 1378

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

ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1.    首先...
  • xiaanming
  • xiaanming
  • 2013年05月23日 18:29
  • 187658

两种方式处理ViewPager点击事件

我们知道,ViewPager 没有点击事件,许多时候,需要设置点击事件,比如轮询广告点击事件,这时候怎么处理呢?我总结了两种方式: 对 ViewPager 的每个页面设置点击事件 通过onTouch(...
  • lk_123456
  • lk_123456
  • 2017年03月21日 18:43
  • 5949

ViewPager子页面的点击事件监听

在子页面的布局xml文件中对应的按钮添加一行:android:onClick="方法名"
  • u013172063
  • u013172063
  • 2016年03月17日 12:12
  • 2380

Android在WebView中给图片设置点击事件

好久没有更新博客了,今天来个小知识点。我们知道在WebView中加载的是Html也面,在开发中都是Web前端人员写好以后给个链接我们去用webView进行loadUrl。但是有时突然产品想让你把加载回...
  • Jiang_Rong_Tao
  • Jiang_Rong_Tao
  • 2017年02月28日 09:48
  • 2435

ViewPager点击每一项设置的监听

ViewPager点击每一项时,不需要自定义ViewPager,然后写点击事件,简单一点,在ViewPager的适配器中instantiateItem实现即可,现在记录一下,以便日后忘记 @Over...
  • u010680097
  • u010680097
  • 2015年08月19日 16:53
  • 3380

关于ViewPager的点击事件的处理

我遇到这个问题的前提:只有一个VIewPager,而且里面的图片是动态添加的,通过PageAdapter进行填充的(也就是一个轮播小广告) 由于viewpager没有onclickLisenning...
  • luanxuye
  • luanxuye
  • 2016年05月11日 19:04
  • 9854
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【Android】ViewPager实现图片左右滑动播放及添加点击事件
举报原因:
原因补充:

(最多只允许输入30个字)