Android(安卓)原生控件ViewFlipper实现淘宝头条垂直滚动广告条

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));

更多相关文章

随机推荐