您的位置:首页 > 移动开发 > Android开发

使用ViewPager实现图片左右切换(有实心和空心和TextView随图片改变而改变)

2014-01-19 15:04 826 查看
要确保

有这个android-support-v4.jar包,没有的话百度一下怎么导入android-support-v4.jar包,相信你可以搞定

1:新建立一个android工程 

2:讲准备好的4张图片放进如图所示



3:新建实心空心圆放进drawable下面(没有这个文件夹的话自己在res下面新建立一个)

      


      贴一个空心圆的代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<corners android:radius="5dp" />
<solid android:color="@android:color/black" />
</shape>

4:在layout下面建立布局文件 直接贴代码吧

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="200dip"
>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<TextView
android:id="@+id/tv_title"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:background="#00f0ff"
android:text="睡不好,会出现精神分裂吗?"
android:gravity="center_horizontal"
android:layout_gravity="bottom"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="20dip"
android:orientation="horizontal"
android:layout_gravity="bottom|right"
android:gravity="right"
>
<View android:id="@+id/circle1"
android:layout_width="8dip"
android:layout_height="8dip"
android:background="@drawable/focus_circle"
android:layout_marginLeft="3dip"
android:layout_marginRight="3dip"
/>
<View android:id="@+id/circle2"
android:layout_width="8dip"
android:layout_height="8dip"
android:background="@drawable/normal_circle"
android:layout_marginLeft="3dip"
android:layout_marginRight="3dip"

/>
<View android:id="@+id/circle3"
android:layout_width="8dip"
android:layout_height="8dip"
android:background="@drawable/normal_circle"
/>
<View android:id="@+id/circle4"
android:layout_width="8dip"
android:layout_height="8dip"
android:background="@drawable/normal_circle"
android:layout_marginLeft="3dip"
android:layout_marginRight="3dip"
/>
</LinearLayout>
</FrameLayout>
</RelativeLayout>5:去要显示图片切换的activity中去写代码了(直接贴代码啦,有注释,不懂的话 在下面评论我回尽量帮助大家)
package com.example.youku_viewpage;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.app.Activity;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {

protected static final String TAG = "MainActivity";
private int[] imgids;//图片在drawable下面的引用数组
private List<ImageView> imgs;//有待显示的图片集合
private MviewPagerAdapter mviewpageAdapter;//pageAdapter,具体看下源代码
private TextView tv_title;//标题显示
private String[] titles;//待先到到tv_title上的String集合
private int oldPosition=0;//切换到当前pageIndex的上一页的索引
private int currentpageIndex=0;//当前页 pageIndex
private ArrayList<View> views;//圆点显示
private boolean isOntouchViewpage=false;//是否触摸或在viewPager上面移动
private ViewPager viewpager;
private Timer timertask;//定时器,实现没间隔2秒钟 切换图片
private Handler handler=new Handler(){
public void handleMessage(android.os.Message msg) {
if(!isOntouchViewpage){
viewpager.setCurrentItem(++currentpageIndex%imgids.length);
}
};
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

imgids = new int[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d};
imgs = new ArrayList<ImageView>();
ImageView iv=null;
for (int imgid : imgids) {
iv=new ImageView(this);
iv.setBackgroundResource(imgid);
imgs.add(iv);
}
titles = new String[]{"睡不好会精神分裂吗?","微笑天使","下载优酷apk有好礼相送","大家好!"};
tv_title = (TextView) findViewById(R.id.tv_title);
views = new ArrayList<View>();
views.add(findViewById(R.id.circle1));
views.add(findViewById(R.id.circle2));
views.add(findViewById(R.id.circle3));
views.add(findViewById(R.id.circle4));

viewpager = (ViewPager) findViewById(R.id.vp);
mviewpageAdapter = new MviewPagerAdapter();
viewpager.setAdapter(mviewpageAdapter);
viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
* 当显示下一个完整page时 此方法会被调用
*/
@Override
public void onPageSelected(int position) {
tv_title.setText(titles[position]);
views.get(position).setBackgroundResource(R.drawable.focus_circle);
views.get(oldPosition).setBackgroundResource(R.drawable.normal_circle);
oldPosition=position;
currentpageIndex=position;
}
@Override
public void onPageScrolled(int position, float arg1, int arg2){
Log.i(TAG,"onPageScrolled");
}
@Override
public void onPageScrollStateChanged(int position) {
Log.i(TAG,"onPageScrollStateChanged");
}
});

//给viewpager设置触摸监听
viewpager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
//处于触摸或移动状态 设置为true 让handler中不能实现图片自动切换
if(event.getAction()==MotionEvent.ACTION_DOWN||event.getAction()==MotionEvent.ACTION_MOVE){
isOntouchViewpage=true;
}else if(event.getAction()==MotionEvent.ACTION_UP){
isOntouchViewpage=false;
}
return false;
}
});
}

private class MviewPagerAdapter extends PagerAdapter{
@Override
public int getCount() {
return imgids.length;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//super.destroyItem(container, position, object);
container.removeView(imgs.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(imgs.get(position));
return imgs.get(position);
}
}

@Override
protected void onStart() {
super.onStart();
timertask = new java.util.Timer();
timertask.schedule(new TimerTask() {
@Override
public void run() {
handler.sendEmptyMessage(0);
}
}, 2000, 2000);
}
protected void onStop() {
timertask.cancel();
timertask=null;
super.onStop();
};
}


这样OK啦,打完收工。 大家有不懂的 欢迎在下面评论提问。我回尽力帮助大家的
呵呵码农级别 高手勿喷,多多指点下!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息