标签:
前两天老师找我帮她写个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>
如果您需要自动滑动,那么应该添加一个计时器或就可以完成这个。
其他的动画切换效果,这些扩展都是看如何实现啦。
不过呢,感觉ViewPager的灵活性不高,完全可以自己定制实现一个类似的具有更多接口和灵活性选择的空间出来。当然这要看需求啦。
OK,记录到此。
【Android】ViewPager实现图片左右滑动播放及添加点击事件
标签:
原文地址:http://blog.csdn.net/suool/article/details/44734213