使用ViewFlipper实现广告图片的自动轮播的效果
轮播资源图片的实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | package com.loaderman.viewflipperdemo;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.GestureDetector;import android.view.MotionEvent;import android.view.View;import android.widget.Toast;import android.widget.ViewFlipper;public class MainActivity extends AppCompatActivity implements View.OnTouchListener { private ViewFlipper mFlipper; private GestureDetector mDetector; //手势检测 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mFlipper = (ViewFlipper) findViewById(R.id.flipper); mFlipper.setOnTouchListener(this); mDetector = new GestureDetector(new simpleGestureListener()); mFlipper.startFlipping();//开始切换，注意，如果设置了时间间隔，想让它自动切换，一定要记得加它 } @Override public boolean onTouch(View v, MotionEvent event) { return mDetector.onTouchEvent(event); } private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener { final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200; //不加上onDown函数的话，onFling就不会响应 @Override public boolean onDown(MotionEvent e) { // TODO Auto-generated method stub Toast.makeText(MainActivity.this, "ondown", Toast.LENGTH_SHORT).show(); return true; } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { // Fling left if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) { mFlipper.showNext(); Toast.makeText(MainActivity.this, "Fling Left", Toast.LENGTH_SHORT).show(); } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) { // Fling right mFlipper.showPrevious(); Toast.makeText(MainActivity.this, "Fling Right", Toast.LENGTH_SHORT).show(); } return true; } }} |
activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.loaderman.viewflipperdemo.MainActivity"> <ViewFlipper android:id="@+id/flipper" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginTop="10dp" android:flipInterval="3000" > <ImageView android:layout_width="fill_parent" android:layout_height="300dip" android:scaleType="fitXY" android:src="@drawable/a"/> <ImageView android:layout_width="fill_parent" android:layout_height="300dip" android:scaleType="fitXY" android:src="@drawable/b"/> <ImageView android:layout_width="fill_parent" android:layout_height="300dip" android:scaleType="fitXY" android:src="@drawable/c"/> <ImageView android:layout_width="fill_parent" android:layout_height="300dip" android:scaleType="fitXY" android:src="@drawable/d"/> </ViewFlipper></RelativeLayout> |
效果:
动态加载广告图片的轮播实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 | package com.loaderman.viewflipperdemo;import android.os.Bundle;import android.os.Handler;import android.support.v7.app.AppCompatActivity;import android.view.GestureDetector;import android.view.MotionEvent;import android.view.View;import android.view.animation.AccelerateInterpolator;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.ViewFlipper;public class MainActivity extends AppCompatActivity { private ViewFlipper flipper; private GestureDetector detector; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); } private void init() { flipper = (ViewFlipper) findViewById(R.id.vf); flipper.addView(getImageView(R.drawable.a));//在一个根视图中动态添加子视图，可以根据new对象来进行子视图的增加和删减 flipper.addView(getImageView(R.drawable.b)); flipper.addView(getImageView(R.drawable.c)); flipper.addView(getImageView(R.drawable.d)); flipper.addView(getImageView(R.drawable.e)); flipper.setInAnimation(inFromRightAnimation());//设置View进入屏幕时候使用的动画 flipper.setOutAnimation(outToLeftAnimation()); //设置View退出屏幕时候使用的动画 flipper.setFlipInterval(2000);//设置自动切换的间隔时间 flipper.startFlipping();//开启切换效果 flipper.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { return MainActivity.this.detector.onTouchEvent(event);//当有触屏事件作用于ViewFlipper时，把这个触屏事件返回给 GestureDetector手势识别器处理 //如果想要把整个屏幕上的触屏事件都返回给 GestureDetector手势识别器处理， //而不单单是在ViewFlipper上发生触屏事件时就给 GestureDetector处理， //那么我们就不必为flipper单独设置onTouchListener（）触摸监听器了，就只需要重写Activity中的onTouchEvent()方法， //在该方法中讲整个屏幕的触摸事件返回给手势识别器处理就行 } }); detector = new GestureDetector(this, new GestureDetector.OnGestureListener() {//创建手势识别器并监听手势事件 @Override public boolean onSingleTapUp(MotionEvent e) { // TODO Auto-generated method stub return false; } @Override public void onShowPress(MotionEvent e) { // TODO Auto-generated method stub } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // TODO Auto-generated method stub return false; } @Override public void onLongPress(MotionEvent e) { // TODO Auto-generated method stub } /* * 用户按下触摸屏、快速移动后松开即触发这个事件 * e1：第1个ACTION_DOWN MotionEvent * e2：最后一个ACTION_MOVE MotionEvent * velocityX：X轴上的移动速度，像素/秒 * velocityY：Y轴上的移动速度，像素/秒 * 触发条件 ： * X轴的坐标位移大于FLING_MIN_DISTANCE，且移动速度大于FLING_MIN_VELOCITY个像素/秒 */ @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {//滑动事件回调函数 final float FLING_MIN_DISTANCE = 100;//最小滑动像素 final float FLING_MIN_VELOCITY = 150;//最小滑动速度 if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) {//X轴上的移动速度去绝对值进行比较 //判断x轴坐标如果第一次按下时的坐标减去第二次离开屏幕时的坐标大于我们设置的位移，因为一个控件的原点是在左上角，就说明此时是向左滑动的 //设置View进入屏幕时候使用的动画 flipper.setInAnimation(inFromRightAnimation()); //设置View退出屏幕时候使用的动画 flipper.setOutAnimation(outToLeftAnimation()); flipper.showNext();//显示下一个视图 } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) { //判断x轴坐标如果第二次离开屏幕时的坐标减去第一次按下时的坐标大于我们设置的位移，因为一个控件的原点是在左上角，就说明此时是向右滑动的 flipper.setInAnimation(inFromLeftAnimation()); flipper.setOutAnimation(outToRightAnimation()); flipper.showPrevious();//显示上一个视图 } return true; } @Override public boolean onDown(MotionEvent e) {//手指按下屏幕时触发 flipper.stopFlipping();//当触摸到ViewFlipper时，就让它停止自动滑动，如果要触摸到整个屏幕的任意一处就让它停止滑动，就按上面那个方法，不用设置ViewFlipper的触摸事件监听了 new Handler().postDelayed(new Runnable() {//在当前线程（也即主线程中）开启一个消息处理器，并在3秒后发送flipper.startFlipping();这个消息给主线程，再让它自动滑动，从而来更新UI @Override public void run() { flipper.startFlipping();//3秒后执行，让它又开始滑动 } }, 3000); return true; } }); } //创建一个ImageView对象 private ImageView getImageView(int id) { ImageView imageView = new ImageView(this); imageView.setImageResource(id); return imageView; } /** * 定义从右侧进入的动画效果 * @return */ protected Animation inFromRightAnimation() { Animation inFromRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f); inFromRight.setDuration(200); inFromRight.setInterpolator(new AccelerateInterpolator()); return inFromRight; } /** * 定义从左侧退出的动画效果 * @return */ protected Animation outToLeftAnimation() { Animation outtoLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f); outtoLeft.setDuration(200); outtoLeft.setInterpolator(new AccelerateInterpolator()); return outtoLeft; } /** * 定义从左侧进入的动画效果 * @return */ protected Animation inFromLeftAnimation() { Animation inFromLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f); inFromLeft.setDuration(200); inFromLeft.setInterpolator(new AccelerateInterpolator()); return inFromLeft; } /** * 定义从右侧退出时的动画效果 * @return */ protected Animation outToRightAnimation() { Animation outtoRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f); outtoRight.setDuration(200); outtoRight.setInterpolator(new AccelerateInterpolator()); return outtoRight; }} |
activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.loaderman.viewflipperdemo.MainActivity"> <ViewFlipper android:id="@+id/vf" android:layout_width="match_parent" android:layout_height="wrap_content" android:autoStart="true" android:flipInterval="3000" android:inAnimation="@anim/anim_marque_in" android:outAnimation="@anim/anim_marque_out" /></RelativeLayout> |
效果:
本文学习来源:http://blog.csdn.net/u013378580/article/details/52038255
最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步