ViewFlipper的使用

最新推荐文章于 2024-05-08 10:24:55 发布

原创最新推荐文章于 2024-05-08 10:24:55 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ViewFlippe

本文介绍如何利用Android的ViewFlipper组件实现上下翻滚的广告轮播效果。文章详细展示了所需的XML布局文件、动画配置及Java代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ViewFlipper是谷歌自带的上下翻页的空间，类似ViewPager，
可以用它来实现上下翻滚的广告头，话不多说，上代码。

（一） xml文件

<ViewFlipper
            android:id="@+id/viewFlipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:autoStart="true"
            android:inAnimation="@anim/push_up_in"
            android:outAnimation="@anim/push_up_out"
            android:flipInterval="3000" />

        android:autoStart="true"  //设置是否自动开始。如果设置为“true”，当ViewFlipper显示的时候View的切换会自动开始。
        android:inAnimation="@anim/push_up_in"  //进来时的动画
                                            android:outAnimation="@anim/push_up_out"  //退出时的动画
        android:flipInterval="3000"  //设置View切换的时间间隔。

@anim/push_up_in

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="300"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>

push_up_out

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0" android:toYDelta="-100%p" android:duration="300"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>

（2）ViewFlipper中的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/iv_viewflipper"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp" />

        <TextView
            android:id="@+id/tv_viewflipper"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:textSize="14sp"
            android:textColor="#000"
            android:alpha="0.7"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@id/iv_viewflipper"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </RelativeLayout>


</LinearLayout>

（3）Java代码

    private ViewFlipper viewFlipper;
    private ImageView iv;
    private TextView tv;

viewFlipper =(ViewFlipper)view.findViewById(R.id.viewFlipper);
//通过布局填充器找到ViewFlipper中要显示的布局
View v = LayoutInflater.from(getActivity()).inflate(R.layout.viewflipper_layout, viewFlipper, false);
viewFlipper.addView(v);
iv = (ImageView) v.findViewById(R.id.iv_viewflipper);
tv = (TextView) v.findViewById(R.id.tv_viewflipper);

iv.setImageResource(R.mipmap.ic_launcher);
tv.settext("劲爆大甩买");

一切OK。