Android(安卓)UI设计：ViewFlipper使图片循环滑动
16lz
2021-01-25
一、使用ViewFlipper实现图片的循环滑动
这里我们使用ViewFlipper实现图片的循环滑动，跟ViewPager相同我们都需要在布局中先进行添加ViewFlipper，再通过动态加载图片的方式将图片载入。
1、布局
<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" > <ViewFlipper android:id="@+id/myviewflipper" android:layout_width="match_parent" android:layout_height="match_parent" />RelativeLayout>2、动画进出效果
①left_right_in.xml(从左向右进入屏幕，这里给图片设置了透明度)
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="3000" android:fromXDelta="-100%p" android:toXDelta="0" /> <alpha android:duration="3000" android:fromAlpha="0.5" android:toAlpha="1" >alpha>set>②left_right_out.xml(从左向右滑出屏幕，这里给图片设置了透明度)
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="3000" android:fromXDelta="0" android:toXDelta="100%p" /> <alpha android:duration="3000" android:fromAlpha="1" android:toAlpha="0.5" >alpha>set>③right_left_in.xml(从右向左进入屏幕，这里给图片设置了透明度)
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="3000" android:fromXDelta="0" android:toXDelta="-100%p" /> <alpha android:duration="3000" android:fromAlpha="1" android:toAlpha="0.5" >alpha>set>④right_left_out.xml(从右向左滑出屏幕，这里给图片设置了透明度)
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="3000" android:fromXDelta="0" android:toXDelta="-100%p" /> <alpha android:duration="3000" android:fromAlpha="1" android:toAlpha="0.5" >alpha>set>3、MainActivity
package com.example.myviewflipper;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.view.MotionEvent;import android.view.View;import android.widget.ImageView;import android.widget.ViewFlipper;public class MainActivity extends Activity { private ViewFlipper mviewflipper; private int[] mImageId={R.drawable.guide_image3_i,R.drawable.guide_image4,R.drawable.guide_image5,R.drawable.image}; private float startX; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mviewflipper=(ViewFlipper) findViewById(R.id.myviewflipper); for (int i = 0; i < mImageId.length; i++){ mviewflipper.addView(ImageView(mImageId[i])); } //mviewflipper.setInAnimation(this, R.layout.left_right_out); // mviewflipper.setOutAnimation(this, R.layout.left_right_in); mviewflipper.setInAnimation(this, R.layout.right_left_in); mviewflipper.setOutAnimation(this, R.layout.right_left_out); // 设置滑动间隔时间 mviewflipper.setFlipInterval(2000); // 开始播放 mviewflipper.startFlipping(); } //viewflipper支持手势 private View ImageView(int mImageId) { ImageView imageview=new ImageView(this); // imageview.setImageResource(mImageId);//该语句不能去显示imageview的原宽高 //为了显示原宽高，我们使用下面的语句。 imageview.setBackgroundResource(mImageId); return imageview; } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_main, menu); return true; }}二、支持屏幕的手势滑动
为支持屏幕滑动，这里我们将flipper自动循环滑动效果先去掉，添加onTouchEvent()方法，来获得屏幕手势的滑动。
package com.example.myviewflipper;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.view.MotionEvent;import android.view.View;import android.widget.ImageView;import android.widget.ViewFlipper;public class MainActivity extends Activity { private ViewFlipper mviewflipper; private int[] mImageId={R.drawable.guide_image3_i,R.drawable.guide_image4,R.drawable.guide_image5,R.drawable.image}; private float startX; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mviewflipper=(ViewFlipper) findViewById(R.id.myviewflipper); for (int i = 0; i < mImageId.length; i++){ mviewflipper.addView(ImageView(mImageId[i])); }// mviewflipper.setInAnimation(this, R.layout.left_right_out);// mviewflipper.setOutAnimation(this, R.layout.left_right_in);// mviewflipper.setInAnimation(this, R.layout.right_left_in);// mviewflipper.setOutAnimation(this, R.layout.right_left_out);// //设置滑动间隔时间// mviewflipper.setFlipInterval(3000);// //开始播放// mviewflipper.startFlipping(); } //viewflipper支持手势 @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { //手指落下 case MotionEvent.ACTION_DOWN:{ startX=event.getX(); break; } //手指滑动 case MotionEvent.ACTION_MOVE:{ //向右滑动 if(event.getX()-startX>100){ mviewflipper.setInAnimation(this, R.layout.left_right_in); mviewflipper.setOutAnimation(this, R.layout.left_right_out); mviewflipper.showPrevious(); } //向左滑动 if(startX-event.getX()>100){ mviewflipper.setInAnimation(this, R.layout.right_left_in); mviewflipper.setOutAnimation(this, R.layout.right_left_out); mviewflipper.showNext(); } break; } case MotionEvent.ACTION_UP:{break;} } return super.onTouchEvent(event); } private View ImageView(int mImageId) { ImageView imageview=new ImageView(this); //imageview.setImageResource(mImageId);//该语句不能去显示imageview的原宽高 //为了显示原宽高，我们使用下面的语句。 imageview.setBackgroundResource(mImageId); return imageview; } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_main, menu); return true; }}更多相关文章
- Android应用开发提高篇（5）-----Camera使用
- Google Android(安卓)2.0初期版本亮相 支持手势识别
- android app中如何获取电源锁保持屏幕常亮
- Android之Picasso
- Flutter教程(一) 十分钟了解Flutter
- UI(一) 适应屏幕设备多样化
- Android在使用WebView时，图片显示出错问题。
- Android多分辨率适配-长度单位和转换计算-多分辨率适配
- Android多分辨率适配原理