android使用ViewPager实现图片自动切换

2024-07-30 11:28:52

本文实现viewpager图片轮播的功能、左右滑动的时候能够流畅的切换图片、并且没有边界限制

1、activity_main.xml布局

<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"
 >

 <RelativeLayout
  android:id="@+id/my_viewpager"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

</RelativeLayout>

因为我的ViewPager是继承RelativeLayout

2、layout_recommend_item.xml中的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <ImageView
  android:id="@+id/iv_pic"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:src="@mipmap/ic_launcher"
  android:layout_weight="1"/>
 <TextView
  android:id="@+id/tv_desc"
  android:text="123"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

</LinearLayout>

ImageView是显示图片 TextView用来显示每一个pager的标题

3、MyViewPager类，因为图个方便，把能够实现这个功能否合成一个类、这样用起来比较方便

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MyViewPager extends RelativeLayout {
 private static final int START_SCROLL = 1;
 private static final int SCROLL_NEXT = 2;
 private static final int SHOW_TIME = 5000;//显示时间
 private List<String> mDatas = new ArrayList<>();//viewpager每一页对应的标题
 private ViewPager mPager;
 private Context mContext;
 private int mWidth, mHeight; //viewpager的宽高
 private int mTitleHeight;  //标题高度
 private TipView mTipView;  //标题对应的view
 //在主ui中更新viewpager，也就是切换图片
 private static Handler sHandler = new Handler() {
  @Override
  public void handleMessage(Message msg) {
   int w = msg.what;
   ViewPager pager = (ViewPager) msg.obj;
   switch (w) {
    case START_SCROLL:
     pager.setCurrentItem(msg.arg1, true);
     break;
    case SCROLL_NEXT:
     pager.setCurrentItem(msg.arg1, true);
     break;
   }
  }
 };

 /**
  * 构造函数
  * @param context content
  * @param w 要显示的viewpager的宽
  * @param h 要显示的viewpager的高
  */
 public MyViewPager(Context context, int w, int h) {
  super(context);
  mContext = context;
  mWidth = w;
  mHeight = h;
  initView(); //取得数据 左边随便取的 只是为了看起来有效果
//  对viewpager滑动进行监听
  mPager.setOnPageChangeListener(new MOnPagerChangeListener());
  init();
  DisplayMetrics dm = mContext.getResources().getDisplayMetrics();
  mTitleHeight = cm_DptoPx(48, dm);
 }

 /**
  * 对viewpager控件进行绘制宽高
  */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  ViewGroup.LayoutParams vp = getLayoutParams();
  if (vp != null) {
   vp.width = mWidth;
   vp.height = mHeight;
  }
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }

 /**
  * 把dp转化成px
  */
 public static int cm_DptoPx(int dp,DisplayMetrics dis){
  return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, dis);
 }

 private void init() {
  getData();
 }

 private void initView() {
  mPager = new ViewPager(mContext);
  RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
  addView(mPager, rp);
 }

 public void getData() {
  for (int i = 0; i < 4 ; i++){
   mDatas.add(i,"viewpager"+i);
  }
  sHandler.postDelayed(new Runnable() {
   @Override
   public void run() {
    stopAnimation();
    initTipView();
    mPager.setAdapter(new RecommendAdapter());
    mPager.setCurrentItem(10000 * mDatas.size());
   }
  }, 2000);
 }

 /**
  * 删除队列中的消息
  */
 public void stopAnimation() {
  sHandler.removeMessages(START_SCROLL);
  sHandler.removeMessages(SCROLL_NEXT);
 }
 public void startAnimation() {
  if (mDatas.size() == 0) {
   return;
  }
  Message msg = sHandler.obtainMessage(START_SCROLL);
  msg.obj = mPager;
  msg.arg1 = (mPager.getCurrentItem() + 1);//取得后一张图片
  sHandler.sendMessageDelayed(msg, SHOW_TIME);//5秒后发送给ui线程
 }

 /**
  * 对标题view移动的光标初始化
  */
 private void initTipView() {

  if (mTipView == null) {
   RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(10, 10);
   rp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
   rp.bottomMargin = mTitleHeight;
   mTipView = new TipView(mContext, mDatas.size());
   addView(mTipView, rp);
  } else {
   mTipView.setCount(mDatas.size());
  }
 }

 private class MOnPagerChangeListener implements ViewPager.OnPageChangeListener {
  private int curState;
  @Override
  public void onPageScrolled(int i, float v, int i1) {
  }
  @Override
  public void onPageSelected(int i) { //滑动结束
   sHandler.removeMessages(SCROLL_NEXT);
   sHandler.removeMessages(START_SCROLL);
   if(curState == ViewPager.SCROLL_STATE_DRAGGING){
    return;
   }
   Message msg = sHandler.obtainMessage(SCROLL_NEXT);
   msg.arg1 = i + 1;
   msg.obj = mPager;
   sHandler.sendMessageDelayed(msg, SHOW_TIME);
   mTipView.setCurPostion(i % mDatas.size());
  }

  @Override
  public void onPageScrollStateChanged(int i) { //正在滑动时
   curState = i;
   if(i == ViewPager.SCROLL_STATE_DRAGGING){ //SCROLL_STATE_DRAGGING正在滑动 SCROLL_STATE_IDLE什么都没有做
    //SCROLL_STATE_SETTLING 滑动完毕
    stopAnimation();
   }else {
    if(!(sHandler.hasMessages(START_SCROLL)&&sHandler.hasMessages(SCROLL_NEXT))){
     startAnimation();
    }
   }
  }
 }

 private class RecommendAdapter extends PagerAdapter {
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
   Log.i("MyViewPager","instantiateItem ");
   int curPos = position % mDatas.size();
   View view = View.inflate(mContext, R.layout.layout_recommend_item, null);
   ViewGroup.LayoutParams vp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
   ImageView iv = (ImageView) view.findViewById(R.id.iv_pic);
   TextView tv = (TextView) view.findViewById(R.id.tv_desc);
   tv.setText(mDatas.get(curPos));
   container.addView(view, vp);
   view.setTag(curPos);
   view.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
    }
   });
   return view;
  }

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

  @Override
  public boolean isViewFromObject(View view, Object o) {
   return view == o;
  }

  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
   container.removeView((View) object);
  }
 }

 private class TipView extends View {

  private int mPadding;
  private int mCount;
  private int mCurPos;
  private Paint mNorPaint;
  private Paint mSelPaint;
  private int mHeight;

  public TipView(Context context, int count) {
   super(context);
   mNorPaint = new Paint();
   mNorPaint.setAntiAlias(true);
   DisplayMetrics dm = context.getResources().getDisplayMetrics();
   int selHeight = cm_DptoPx(2, dm);
   int norHeight = cm_DptoPx(1, dm);
   mHeight = cm_DptoPx(2, dm);
   mNorPaint.setStrokeWidth(norHeight);
   mNorPaint.setColor(Color.argb(80, 255, 255, 255));
   mSelPaint = new Paint();
   mSelPaint.setAntiAlias(true);
   mSelPaint.setStrokeWidth(selHeight);
   mSelPaint.setColor(Color.WHITE);
   mCount = count;
   mPadding = cm_DptoPx(0, dm);
  }
  @Override
  protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);
   int ow = (getWidth()-2*mPadding)/ mCount;
   int y = getHeight() / 2;
   canvas.drawLine(mPadding, y, mCurPos * ow + mPadding, y, mNorPaint);
   canvas.drawLine(mCurPos * ow + mPadding, y, (mCurPos + 1) * ow + mPadding, y, mSelPaint);
   canvas.drawLine((mCurPos + 1) * ow + mPadding, y, getWidth() - mPadding, y, mNorPaint);
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   ViewGroup.LayoutParams vp = getLayoutParams();
   vp.width = ViewGroup.LayoutParams.MATCH_PARENT;
   vp.height = mHeight;
   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }

  public void setCurPostion(int pos) {
   mCurPos = pos;
   invalidate();
  }

  public void setCount(int count) {
   mCount = count;
  }
 }
}

4、还有MainActivity中的实现

import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {
 private RelativeLayout mViewPager;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  DisplayMetrics dm = getResources().getDisplayMetrics();
  mViewPager = (RelativeLayout) findViewById(R.id.my_viewpager);
  mViewPager.addView(new MyViewPager(getApplicationContext(),dm.widthPixels ,(dm.widthPixels)/2));
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Android中ViewPager组件的基本用法及实现图片切换的示例

ViewPager是android-support-v4.jar包里的组件.在布局文件里标签需要连包名一起写全称<android.support.v4.view.ViewPager /> 基本用法 ViewPager的基本用法我概括为三步第一步在主布局文件里放一个ViewPager组件第二步为每个页面建立布局文件,把界面写好第三步在主Activity里获取ViewPager组件,并为它设定Adapter. Adapter详细讲讲,ViewPager对应的Adapter继承自Pag
Android实现滑动屏幕切换图片

本文实例为大家分享了Android实现滑动屏幕切换图片的具体代码,供大家参考,具体内容如下 activity_main.xml 文件代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.and
Android自定义ImageView实现点击两张图片切换效果

笔者在做一个项目中遇到的一个小阻碍,于是就实现了这个ImageView达到开发需求情景需求 > 点击实现图片的切换可能有人会说了,这还不简单?为ImageView设置点击事件,然后通过重写的onClick(View v)方法判断定义的某一个flag进行图片的切换,伪代码如下: private boolean flag; public void onClick(View v){ if(flag){ mImageView.setImageResource(R.drawable.xx1); }el
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编程实现图片背景渐变切换与图层叠加效果.分享给大家供大家参考,具体如下: 本例要实现的目的: 1.图片背景渐变的切换,例如渐变的从红色切换成绿色. 2.代码中进行图层叠加,即把多个Drawable叠加在一起显示在一个组件之上. 效果图: 代码很简单: (1)布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="
Android 图片切换器（dp、sp、px）的单位转换器

Android 图片切换器这几天一直在整理组件想留着以后使用.还是一点一点整理吧.今天把上周整理的 ImageSwitcher 和单位转换器(dp/sp/px). 下面上内容 ImageSwitcher: 图像查看器,好像是老组件了,今天先更一个基础的组件,后期如果有时间继续扩展. 那么图像查看器,就是和 Windows 系统下的图片查看器比较类似.自带上一张和下一张的功能. 这个组件有以下几个特点,本人感觉: 1.该组件属于容器性质; 2.ImageSwitcher 本身继承了 FrameL
Android应用中图片浏览时实现自动切换功能的方法详解

先给最终效果图: 当我们在最下边的gallery中切换图片时,上面的大图片会自动切换,切换时有动画效果哦,很简单的一个程序,有待完善更多的功能! activity代码: package cn.com.chenzheng_java; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.View; import android.view.V
Android点击Button实现切换点击图片效果的示例

这是一个简单的小的DEMO , 关于点击按钮用于实现图片的切换, 重要的就是里面的关于逻辑的处理, 在以后图片轮播的技术上关于逻辑的处理和这个类似 Android Button的点击事件切换点击图片 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:la
Android编程单击图片实现切换效果的方法

本文实例讲述了Android编程单击图片实现切换效果的方法.分享给大家供大家参考,具体如下: 新建一个Android项目,命名为FrameLayout 此实例主要操作src文件夹下的MainActivity.Java类文件和res/layout下的activity_main.xml布局文件 1.布局主页面代码activity_main.xml↓ <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android&qu
Android实现图片轮播切换实例代码

利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换,其中当点击"上一张"图片时,切换到上一张图片:当点击"下一张"图片时,切换到下一张图片.其效果图如下: 设置布局文件,其内容如下: activity_image_flipper_shade.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm

android使用ViewPager实现图片自动切换

相关推荐

随机推荐