继承系统的ViewFlipper类,实现广告位轮播的功能。
2016-03-03 12:07
330 查看
自定义一个类,继承ViewFlipper,实现其中未实现的方法。
自定义类写好了,接下来就是写XML布局文件了。
接下来,就是在Activity内实现啦。
到这里,轮播功能已经基本实现了,再加入几个动画,就能完美运行!!
在RES下新建一个文件夹anim,在anim下新建4个XML文件,push_left_in
push_left_out,push_right_in,push_right_out。分别对应的代码如下:
功能完成!!
package com.example.utils; import android.content.Context; import android.util.AttributeSet; import android.widget.ViewFlipper; /** * 实现图片轮播的实现类 * @author Administrator * */ public class AdViewFlipper extends ViewFlipper{ private OnViewFlipperChangeState listener; /** * 构造器 * @param context */ public AdViewFlipper(Context context) { super(context); } public AdViewFlipper(Context context, AttributeSet attrs) { super(context, attrs); } @Override public void showNext() { super.showNext(); if (listener != null) listener.changeNext(); } @Override public void showPrevious() { super.showPrevious(); if (listener != null) listener.changePre(); } public interface OnViewFlipperChangeState { void changePre(); void changeNext(); } public void setOnViewFlipperChangeState(OnViewFlipperChangeState listener) { this.listener = listener; } }
自定义类写好了,接下来就是写XML布局文件了。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <FrameLayout android:id="@+id/my_fl" android:layout_width="match_parent" android:layout_height="match_parent" > <com.example.utils.AdViewFlipper android:id="@+id/ad_view_flipper" android:layout_width="match_parent" android:layout_height="match_parent" > </com.example.utils.AdViewFlipper> <LinearLayout android:id="@+id/ad_point_layout" android:layout_width="match_parent" android:layout_height="20dp" android:orientation="horizontal" android:layout_gravity="bottom"> </LinearLayout> </FrameLayout> </LinearLayout>
接下来,就是在Activity内实现啦。
package com.example.text; import com.example.utils.AdViewFlipper; import com.example.utils.AdViewFlipper.OnViewFlipperChangeState; import com.lidroid.xutils.BitmapUtils; import android.app.Activity; import android.os.Bundle; import android.view.GestureDetector; import android.view.GestureDetector.OnGestureListener; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener; import android.view.ViewGroup.LayoutParams; import android.view.animation.AnimationUtils; import android.widget.ImageView; import android.widget.ImageView.ScaleType; import android.widget.LinearLayout; /** * 实现图片轮播的主Activity * @author Administrator * */ public class ImageActivity extends Activity implements OnViewFlipperChangeState,OnTouchListener,OnGestureListener{ private LinearLayout adPointLayout; //存放圆点的布局 private AdViewFlipper adVf; //自定义轮播布局 /** * 圆点的集合 */ private ImageView[] pointIvs; private int adIndex = 0; private GestureDetector detector;//手势 private BitmapUtils mBitmapUtils; /** * 用来存放图片位置的字符串集合 */ private String[] strs = {"http://img.taodiantong.cn/v55183/infoimg/2013-07/130720115322ky.jpg", "http://pic30.nipic.com/20130626/8174275_085522448172_2.jpg", "http://pic18.nipic.com/20111215/577405_ 4000 080531548148_2.jpg", "http://pic15.nipic.com/20110722/2912365_092519919000_2.jpg", "http://pic.58pic.com/58pic/12/64/27/55U58PICrdX.jpg"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_image); mBitmapUtils = new BitmapUtils(this);//初始化Xutils detector = new GestureDetector(this);//初始化手势类 adPointLayout = (LinearLayout) findViewById(R.id.ad_point_layout); //给轮播布局设置一些基础属性 setAdvf(); setBanner(); //设置动画 adVf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in)); adVf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out)); } private void setAdvf() { adVf = (AdViewFlipper) findViewById(R.id.ad_view_flipper); adVf.setOnTouchListener(this); adVf.setFlipInterval(3000);//设置时间间隔 adVf.setLongClickable(true);// 设置长按事件 adVf.setAutoStart(true);// 设置是否自动播放,默认不自动播放 } private void setBanner() { adVf.removeAllViews(); pointIvs = new ImageView[strs.length]; adPointLayout.removeAllViews(); setAdPoints(); adVf.setOnViewFlipperChangeState(this); for (int i = 0; i < strs.length; i++) { //这里从我们获得的图片数组或者集合中传入获取的图片链接,这里我就传null了。 adVf.addView(getImageView(strs[i])); } } private void setAdPoints() { for (int i = 0; i < pointIvs.length; i++) { pointIvs[i] = new ImageView(this); if (i == 0) { pointIvs[i].setImageResource(R.drawable.ic_loading); } else { pointIvs[i].setImageResource(R.drawable.ic_launcher); } LinearLayout.LayoutParams pointIvParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); pointIvParams.setMargins(10, 0, 0, 0); pointIvs[i].setLayoutParams(pointIvParams); adPointLayout.addView(pointIvs[i]); } } private ImageView getImageView(String url) { ImageView imageView = new ImageView(this); imageView.setScaleType(ScaleType.FIT_XY); imageView.setLayoutParams(new LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT)); // imageView.setImageResource(R.drawable.ic_launcher);; //开启异步,动态加载图片 mBitmapUtils.display(imageView, url);//利用xutils框架加载图片 return imageView; } @Override public void changePre() { if (adIndex > 0) { adIndex--; } else { adIndex = pointIvs.length - 1; } for (int i = 0; i < pointIvs.length; i++) { if (adIndex == i) { pointIvs[i].setImageResource(R.drawable.ic_loading); //设置下方圆点,当前图片 } else { pointIvs[i].setImageResource(R.drawable.ic_launcher);//设置下方圆点,不是当前页面 } } } @Override public void changeNext() { if (adIndex < pointIvs.length - 1) { adIndex++; } else { adIndex = 0; } for (int i = 0; i < pointIvs.length; i++) { if (adIndex == i) { pointIvs[i].setImageResource(R.drawable.ic_loading); } else { pointIvs[i].setImageResource(R.drawable.ic_launcher); } } } @Override public boolean onTouch(View v, MotionEvent event) { return detector.onTouchEvent(event); } @Override public boolean onDown(MotionEvent arg0) { return false; } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) { if (e1.getX() - e2.getX() > 120) { adVf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in)); adVf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out)); adVf.showNext();// 向右滑动 return true; } else if (e1.getX() - e2.getX() < -120) { adVf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in)); adVf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out)); adVf.showPrevious();// 向左滑动 return true; } return false; } @Override public void onLongPress(MotionEvent arg0) { } @Override public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,float arg3) { return false; } @Override public void onShowPress(MotionEvent arg0) { } @Override public boolean onSingleTapUp(MotionEvent arg0) { return false; } }
到这里,轮播功能已经基本实现了,再加入几个动画,就能完美运行!!
在RES下新建一个文件夹anim,在anim下新建4个XML文件,push_left_in
push_left_out,push_right_in,push_right_out。分别对应的代码如下:
**<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="500"/> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="500" /> </set>** **<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="500"/> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="500" /> </set>** **<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="500"/> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="500" /> </set>** **<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="500"/> <alpha android:fromAlpha="1.0" android:toAlpha="1.0" android:duration="500" /> </set>**
功能完成!!
相关文章推荐
- 超漂亮的jQuery图片轮播特效
- javascript实现图片自动和可控的轮播切换特效
- js图片轮播手动切换效果
- 轻松实现Bootstrap图片轮播
- js带缩略图的图片轮播效果代码分享
- js图片轮播特效代码分享
- 图解js图片轮播效果
- 详解js图片轮播效果实现原理
- jQuery平滑旋转幻灯片特效代码分享
- jquery的幻灯片图片切换效果代码分享
- JQuery实现图片轮播效果
- 基于jQuery实现响应式圆形图片轮播特效
- jQuery实现宽屏图片轮播实例教程
- jQuery实现图片轮播特效代码分享
- jquery带动画效果幻灯片特效代码
- jQuery动画效果图片轮播特效
- jQuery制作简洁的图片轮播效果
- jquery图片轮播特效代码分享
- jQuery带进度条全屏图片轮播特效代码分享
- jquery实现的3D旋转木马特效代码分享