Android高级UI ViewFlipper左右滑屏切换页面
2016-05-30 10:19
405 查看
一、简单的几幅图片自动切换实例
xml布局文件-ViewFlipper布局
<?xml version="1.0" encoding="utf-8"?> <ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ViewFlipper" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <include android:id="@+id/view1" layout="@layout/view1" /> <include android:id="@+id/view2" layout="@layout/view2" /> <include android:id="@+id/view3" layout="@layout/view3" /> <include android:id="@+id/view4" layout="@layout/view4" /> </ViewFlipper>
各个画面的布局
View1:其中@drawable/video_greenhouse_1为自己准备的图片
一共View1~View4四个界面,不重复展示代码。<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/video_greenhouse_1"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="view1" android:textSize="30sp" android:layout_gravity="center"/> </LinearLayout>
java:ViewFlipper的使用
public class ViewFlipperActivity extends AppCompatActivity { ViewFlipper viewFlipper = null; //ViewFlipper控件 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_view_flipper); viewFlipper = (ViewFlipper) findViewById(R.id.ViewFlipper);//获取自动切换 viewFlipper.setAutoStart(true); //设置自动开始 viewFlipper.setFlipInterval(1000); //切换间隔为1s } }
二、左右滑屏切换画面实例
步骤
1-注释掉Activity中自动切换的代码
viewFlipper.setAutoStart(true); //设置自动开始viewFlipper.setFlipInterval(1000); //切换间隔为1s
2-实现OnTouchListenner用于监听触屏
3-设置监听器
java代码
public class ViewFlipperActivity extends AppCompatActivity implements View.OnTouchListener{ ViewFlipper viewFlipper = null; //ViewFlipper控件 private float touchDownX;//手指按下的X坐标 private float touchUpX;//手指松开的X坐标 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_view_flipper); viewFlipper = (ViewFlipper) findViewById(R.id.ViewFlipper);//获取自动切换 viewFlipper.setOnTouchListener(this); // viewFlipper.setAutoStart(true); //设置自动开始 // viewFlipper.setFlipInterval(1000); //切换间隔为1s } @Override public boolean onTouch(View v, MotionEvent event) { //触屏 if(event.getAction() == MotionEvent.ACTION_DOWN) { //要取得左右滑动时手指“按下”的X坐标 touchDownX = event.getX(); // return true; }else if(event.getAction() == MotionEvent.ACTION_UP){ //要取得左右滑动时手指“松开”的X坐标 touchUpX = event.getX(); // if(touchUpX - touchDownX > 100)//从左向右 { viewFlipper.showPrevious(); //从左向右,显示上一幅图片 }else if(touchDownX - touchUpX > 100) { viewFlipper.showNext(); //从左向右,显示下一幅图片 } return true; } return false; } }
切换的动画效果
1-创建动画目录
在res下面创建目录
anim
2-创建动画xml
在anim中创建四种动画
push_left_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="500" android:fromXDelta="100.0%p" android:toXDelta="0.0"/> <alpha android:duration="500" android:fromAlpha="0.1" android:toAlpha="1.0"/> </set>
push_left_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="500" android:fromXDelta="0.0" android:toXDelta="-100.0%p"/> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.1"/> </set>
push_right_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="500" android:fromXDelta="-100.0%p" android:toXDelta="0.0"/> <alpha android:duration="500" android:fromAlpha="0.1" android:toAlpha="1.0"/> </set>
push_right_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="500" android:fromXDelta="0.0" android:toXDelta="100.0%p"/> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.1"/> </set>
3-设置动画效果
if(touchUpX - touchDownX > 100)//从左向右 { //设置切换动画 viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in)); viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out)); //显示上一个View viewFlipper.showPrevious(); //从左向右,显示上一幅图片 }else if(touchDownX - touchUpX > 100){ //设置切换动画 viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in)); viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out)); viewFlipper.showNext(); //从左向右,显示下一幅图片 }
相关文章推荐
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析
- android searchView的关闭事件
- SourceProvider.getJniDirectories