ViewFlipper 是Android 原生自带的控件,几乎很少有人知道,但这个控件使用很简单,也很好理解。从源码可以看出,其实ViewFlipper间接的继承了FrameLayout,也可以说ViewFlipper其实就是个FrameLayout,只不过在内部封装了动画实现和Handler实现一个循环而已。
一、效果图
下面是打开淘宝的原型图:
二、ViewFlipper的常用属性
- android : antoStart 设置自动加载下一个View
- android : flipInterval 设置View之间切换的时间间隔
- android : inAnimation 设置切换View的进入动画
- android : outAnimation 设置切换View的退出动画
三、ViewFlipper的常用方法
- isFlipping(): 判断View切换是否正在进行
- setFilpInterval(): 设置View之间切换的时间间隔
- startFlipping(): 开始View的切换,而且会循环进行
- stopFlipping(): 停止View的切换
- setInAnimation(): 设置切换View的进入动画
- setOutAnimation(): 设置切换View的退出动画
- showNext(): 显示ViewFlipper里的下一个View
- showPrevious(): 显示ViewFlipper里的上一个View
四、ViewFlipper的详细使用设置View
1.首先在xml中声明ViewFlipper
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:src="@mipmap/toutiao"/>
<View
android:layout_width="1dp"
android:layout_height="60dp"
android:background="#b6b5b5"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"/>
<ViewFlipper
android:id="@+id/view_flipper"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="60dp"
android:autoStart="true"
android:flipInterval="3000"
android:inAnimation="@anim/flipper_in_anim"
android:outAnimation="@anim/flipper_out_anim"/>
</LinearLayout>
2.在res下创建anim文件夹,并在里面创建两个xml分别是入场动画和出场动画
<!--进入动画-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="100%p"
android:toYDelta="0"
android:duration="1500">
</translate>
<!--退出动画-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0"
android:toYDelta="-100%p"
android:duration="1500">
</translate>
3.在java代码中初始化ViewFlipper,并添加子布局(在这里我们只显示了一个子布局)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 运动 "
android:textColor="#ff0000"
android:background="@drawable/text_shap"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 精致!哈登上脚 Harden 1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 热品 "
android:textColor="#ff0000"
android:background="@drawable/text_shap"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 比奥迪A4还贵,上市第一天卖了27万辆"/>
</LinearLayout>
</LinearLayout>
/**
* 在java代码中初始化,并添加导入三个子布局
*/
mFlipper = (ViewFlipper) findViewById(R.id.view_flipper);
mFlipper.addView(View.inflate(this,R.layout.one,null));
mFlipper.addView(View.inflate(this,R.layout.two,null));
mFlipper.addView(View.inflate(this,R.layout.three,null));