【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点击事件

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

viewpager的无限轮播,能够响应点击事件

之前写过简单的轮播图,可以无限轮播,但是没有处理过轮播时的点击事件,最近遇到了,就又仔细研究了一下,现代码如下: package com.example.test; import java...
  • yueye12
  • yueye12
  • 2015-10-14 22:42:58
  • 5773

viewpager中点击item问题,viewpager中onclick失效问题

viewpager的onClicked事件失效可以在adapter中的instantiateItem()方法里面设置点击事件如: @Override public Object instanti...
  • lebron_wei
  • lebron_wei
  • 2016-05-20 17:06:21
  • 4016

关于ViewPager的点击事件的处理

我遇到这个问题的前提:只有一个VIewPager,而且里面的图片是动态添加的,通过PageAdapter进行填充的(也就是一个轮播小广告) 由于viewpager没有onclickLisenning...
  • luanxuye
  • luanxuye
  • 2016-05-11 19:04:28
  • 10674

ViewPager点击每一项设置的监听

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

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

  • 2016年07月09日 17:41
  • 5.96MB
  • 下载

viewpage点击事件

for (int i = 0; i     View layout = inflater.inflate(R.layout.list_item_home_page,null);//加载view ...
  • jiubuhuile
  • jiubuhuile
  • 2015-10-02 00:02:36
  • 357

仿微信点击图片放大,并可滑动浏览效果

前言  我们在微信朋友圈看别人发的带图片说说时,点击某张图片,会放大全屏显示,并且左右滑动可以切换浏览多张图片。   这种效果应用场景很多,尤其是购物和餐饮类app很常见。比如点餐软件,一般会向顾客...
  • johnWcheung
  • johnWcheung
  • 2017-03-08 20:33:43
  • 4461

android图片点击放大,支持左右滑动切换、缩放

  • 2017年06月16日 09:29
  • 376KB
  • 下载

Android ViewPager与子控件点击事件冲突的解决方案

ViewPager里面经常会放置很多东西,本文提供一个解决思路。 子空间不使用OnClickListener,而使用OnTouchListener: class OnClick implements ...
  • YaphetZhao
  • YaphetZhao
  • 2015-09-16 17:59:19
  • 4713
收藏助手
不良信息举报
您举报文章:【Android】ViewPager实现图片左右滑动播放及添加点击事件
举报原因:
原因补充:

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