首页 > 系统 > Android > 正文

Android实现图片轮播效果

2020-04-11 11:12:35
字体:
来源:转载
供稿:网友

本文实例讲述了JaAndroid实现图片轮播效果代码,分享给大家供大家参考。具体如下:
运行效果截图如下:

具体代码如下:

首先看下一下布局文件:

<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" > <!-- 广告条的使用 --> <com.xuliugen.viewpager.MyViewPagerTransformerAnim android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="200dp" /> <!-- 广告条下边的文字 --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignBottom="@id/viewpager" android:background="#33000000" android:orientation="vertical" > <TextView  android:id="@+id/image_desc"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:gravity="center"  android:text="@string/app_name"  android:textColor="@android:color/white"  android:textSize="16sp" /> <LinearLayout  android:id="@+id/point_group"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_gravity="center_horizontal"  android:layout_marginBottom="5dp"  android:orientation="horizontal" > </LinearLayout> </LinearLayout></RelativeLayout>


效果很简单,从布局文件中我们看到使用了一个自定义的ViewPager动画,代码如下:

package com.xuliugen.viewpager;import java.util.HashMap;import java.util.Map;import android.content.Context;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.view.View;import com.nineoldandroids.view.ViewHelper;/* * 自定义viewpager实现动画切换效果: *  * 1、需要拿到当前切换的两个view *  * 2、一个动画的梯度值 */public class MyViewPagerTransformerAnim extends ViewPager { private View mLeft; private View mRight; private float mTrans; private float mScale; private static final float MIN_SCALE = 0.6f; private Map<Integer, View> mChildren = new HashMap<Integer, View>(); /* * 要有两个构造方法 */ public MyViewPagerTransformerAnim(Context context, AttributeSet attrs) { super(context, attrs); } public MyViewPagerTransformerAnim(Context context) { super(context); } /* * 设置put的方法 */ public void setViewForPosition(View view, int position) { mChildren.put(position, view); } /* * remove的方法 */ public void removeViewFromPosition(Integer position) { mChildren.remove(position); } /** * 重写的方法 */ @Override protected void onPageScrolled(int position, float offset, int offsetPixels) { // Log.e("TAG", "position =" + position + ",offset = " + offset); mLeft = mChildren.get(position); mRight = mChildren.get(position + 1); animStack(mLeft, mRight, offset, offsetPixels);// 创建动画效果 super.onPageScrolled(position, offset, offsetPixels); } private void animStack(View left, View right, float offset, int offsetPixels) { if (right != null) {  // 从0-1页,offset:0`1  mScale = (1 - MIN_SCALE) * offset + MIN_SCALE;  mTrans = -getWidth() - getPageMargin() + offsetPixels;  ViewHelper.setScaleX(right, mScale);  ViewHelper.setScaleY(right, mScale);  ViewHelper.setTranslationX(right, mTrans); } if (left != null) {  left.bringToFront(); } }}

MainActivity.java

package com.xuliugen.viewpager;import java.util.ArrayList;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;public class MainActivity extends Activity { private ViewPager viewPager; private LinearLayout pointGroup; private TextView iamgeDesc; // 图片资源ID private final int[] imageIds = { R.drawable.a, R.drawable.b, R.drawable.c,  R.drawable.d, R.drawable.e }; // 图片标题集合 private final String[] imageDescriptions = { "巩俐不低俗,我就不能低俗",  "扑树又回来啦!再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网TV版大派送", "热血丝的反杀" }; private ArrayList<ImageView> imageList; /** * 上一个页面的位置 */ protected int lastPosition; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager = (ViewPager) findViewById(R.id.viewpager); pointGroup = (LinearLayout) findViewById(R.id.point_group); iamgeDesc = (TextView) findViewById(R.id.image_desc); iamgeDesc.setText(imageDescriptions[0]); imageList = new ArrayList<ImageView>(); for (int i = 0; i < imageIds.length; i++) {  // 初始化图片资源  ImageView image = new ImageView(this);  image.setBackgroundResource(imageIds[i]);  imageList.add(image);  // 添加指示点  ImageView point = new ImageView(this);  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(   LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.WRAP_CONTENT);  params.rightMargin = 20;  point.setLayoutParams(params);  point.setBackgroundResource(R.drawable.point_bg);  if (i == 0) {  point.setEnabled(true);  } else {  point.setEnabled(false);  }  pointGroup.addView(point); } viewPager.setAdapter(new MyPagerAdapter()); // viewPager.setCurrentItem(Integer.MAX_VALUE/2 - // (Integer.MAX_VALUE/2%imageList.size())) ; viewPager.setOnPageChangeListener(new OnPageChangeListener() {  @Override  /**  * 页面切换后调用   * position 新的页面位置  */  public void onPageSelected(int position) {  position = position % imageList.size();  // 设置文字描述内容  iamgeDesc.setText(imageDescriptions[position]);  // 改变指示点的状态  // 把当前点enbale 为true  pointGroup.getChildAt(position).setEnabled(true);  // 把上一个点设为false  pointGroup.getChildAt(lastPosition).setEnabled(false);  lastPosition = position;  }  @Override  /**  * 页面正在滑动的时候,回调  */  public void onPageScrolled(int position, float positionOffset,   int positionOffsetPixels) {  }  @Override  /**  * 当页面状态发生变化的时候,回调  */  public void onPageScrollStateChanged(int state) {  } }); /*  * 自动循环: 1、定时器:Timer 2、开子线程 while true 循环 3、ColckManager 4、 用handler  * 发送延时信息,实现循环  */ isRunning = true; // 设置图片的自动滑动 handler.sendEmptyMessageDelayed(0, 3000); } /** * 判断是否自动滚动 */ private boolean isRunning = false; private Handler handler = new Handler() { public void handleMessage(android.os.Message msg) {  // 让viewPager 滑动到下一页  viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);  if (isRunning) {  handler.sendEmptyMessageDelayed(0, 3000);  } }; }; protected void onDestroy() { isRunning = false; }; private class MyPagerAdapter extends PagerAdapter { @Override /**  * 获得页面的总数  */ public int getCount() {  return Integer.MAX_VALUE; // 使得图片可以循环 } @Override /**  * 获得相应位置上的view  * container view的容器,其实就是viewpager自身  * position 相应的位置  */ public Object instantiateItem(ViewGroup container, int position) {  // System.out.println("instantiateItem ::" + position);  // 给 container 添加一个view  container.addView(imageList.get(position % imageList.size()));  // 返回一个和该view相对的object  return imageList.get(position % imageList.size()); } @Override /**  * 判断 view和object的对应关系   */ public boolean isViewFromObject(View view, Object object) {  if (view == object) {  return true;  } else {  return false;  } } @Override /**  * 销毁对应位置上的object  */ public void destroyItem(ViewGroup container, int position, Object object) {  // System.out.println("destroyItem ::" + position);  container.removeView((View) object);  object = null; } }}

另外我们看效果图可以看出,效果图下边的几个原点是变化的,所以我们需要一个selector,如下:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/point_nomal" android:state_enabled="false"/> <item android:drawable="@drawable/point_focured" android:state_enabled="true"/></selector>

希望本文所述对大家学习Android软件编程有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表