ViewFlipper 的简单使用

最新推荐文章于 2025-04-18 11:46:25 发布

原创最新推荐文章于 2025-04-18 11:46:25 发布 · 4.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#首页咨询滚动 #新闻信息滚动 #viewFlipper #ViewFlipper的简单使用 #viewFlipper多条滚动

ViewFlipper 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用ViewFlipper实现安卓应用中首页咨询的滚动效果，包括设置动画、布局及代码实现，适用于需要自动翻页滚动场景。

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

今天有个朋友问我怎么实现首页咨询滚动效果。如图：

哥们当场就推荐了最简单的方法——ViewFlipper，然后第二天早上一上班朋友说没搞懂怎么用的，吧啦吧啦的。。。废话不多说了，直接上使用方法，坚定不移三步走。

一、先设置进出口动画样式：

1、设置进口动画 come_in.xml：

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="1000"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>

</set>

2、设置出口动画go_out.xml：

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="100%p"/>
    
</set>

二，设置 activity 布局样式和 item 展示样式：

1、设置 activity 布局，很简单：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ViewFlipperActivity">

    <ViewFlipper
        android:id="@+id/viewFlipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

2、设置展示 item 布局样式 viewflipper_item.xml，这个根据自己需要设置，需要一条一条滚动就设置一条，本文设置的是两条；

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="vertical">

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

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/weiyuanzhang"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dp"/>
        <TextView
            android:id="@+id/tv_show"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="立元"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

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

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/weiyuanzhang"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dp"/>
        <TextView
            android:id="@+id/tv_showTwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="立元"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

</LinearLayout>

就是这么的简单！

三、上 Activity 使用代码，同样很简单！

public class ViewFlipperActivity extends AppCompatActivity {

    private ViewFlipper viewFlipper;
    private List<String> list;
    private Context context;
    private View view;
    private TextView tv_show,tv_showTwo;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_flipper);

        context = ViewFlipperActivity.this;

        viewFlipper = findViewById(R.id.viewFlipper);

        viewFlipper.clearFocus();

        for (int i=0;i<10;i++){

            view = LayoutInflater.from(context).inflate(R.layout.viewflipper_item,null);
            tv_show = view.findViewById(R.id.tv_show);
            tv_showTwo = view.findViewById(R.id.tv_showTwo);
            tv_show.setText("立元"+i);

            i++;
            tv_showTwo.setText("立元"+i);

            viewFlipper.addView(view);
        }

        viewFlipper.setInAnimation(context,R.anim.come_in);
        viewFlipper.setOutAnimation(context,R.anim.go_out);
        viewFlipper.setFlipInterval(2000);

        // 1、设置幻灯片的形式滚动
       // viewFlipper.startFlipping();

        // 2、设置自动翻页滚动
        viewFlipper.setAutoStart(true);
        viewFlipper.isAutoStart();

    }

}

四、问题解决，打完收工。附赠图片一张。