Android 仿淘宝头条 -- 垂直滚动广告条

最新推荐文章于 2020-06-03 11:12:19 发布

原创最新推荐文章于 2020-06-03 11:12:19 发布 · 971 阅读

7 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Android中仿照淘宝头条实现一个基于TextView的垂直滚动广告条。通过ViewFlipper控件，结合自定义布局、进出场动画和逻辑操作，实现了内容的循环滚动。此外，还探讨了ViewFlipper与ViewPager的区别以及常用属性和方法。

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

前言介绍

今天我们来实现淘宝APP上《淘宝头条》基于TextView实现上下滚动循环通知消息的效果。

在这里我们主要通过 ViewFlipper 也就是安卓自带的控件实现的。
很多人可能都很少知道这个控件，这个控件很简单，也很好理解，操作也不是特别困难（当然这个也因人而异，因难易系数而定）

效果图

在这里插入图片描述

操作步骤

1. 先来看整体的页面布局

tvTao：此 TextView 控件输入的内容为 淘宝头条
viewFen：此 View 控件充当为样式，分割左右两个控件
filpper：此 ViewFlipper 控件可以使内容进行垂直循环滚动

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff"
    android:orientation="horizontal"
    tools:context=".textScollView.MarqueeNewsActivity">

    <TextView
        android:id="@+id/tvTao"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="8dp"
        android:padding="8dp"
        android:text="淘宝头条"
        android:textColor="@android:color/holo_red_light"
        android:textSize="22sp" />

    <View
        android:id="@+id/viewFen"
        android:layout_width="0.5dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/darker_gray" />


    <ViewFlipper
        android:id="@+id/filpper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:autoStart="true"
        android:flipInterval="3000"
        android:inAnimation="@anim/news_in"
        android:outAnimation="@anim/news_out" />

</LinearLayout>

2. 再看我们自定义的 ViewFlipper 内容的xml布局

tvRe：此 TextView 是滚动内容里的显示的热点
tvItem：此TextView 是滚动内容里的主角
shape：此处的xml 是自己绘制白底红边的圆角背景

<?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="wrap_content"
    android:layout_margin="5dp"
    android:background="#fff"
    android:gravity="center_vertical"
    android:padding="5dp">

    <TextView
        android:id="@+id/tvRe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dp"
        android:background="@drawable/shape"
        android:padding="5dp"
        android:text="热点"
        android:textColor="@android:color/holo_red_light" />

    <TextView
        android:id="@+id/tvItem"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:padding="5dp"
        android:textColor="#383737" />

</LinearLayout>

shape.xml

在 res -> drawable 文件下创建

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@android:color/white" />
    <stroke
        android:width="1dp"
        android:color="@android:color/holo_red_light" />

    <corners android:radius="5dp" />

</shape>

3. 设置内容滚动的进出场动画

在使用 ViewFlipper 控件，我们会用到滚动的进出场动画，如下所示：
在对应项目的 res 文件夹下创建 anim文件夹存放动画

new_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="100%p"
        android:toXDelta="0"
        android:toYDelta="0" />
</set>

new_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="-100%p" />
</set>

4. 接下来就是我们具体的逻辑操作

initData() ：通过List集合存放我们需要滚动的内容

 /**
  * 初始化新闻标题数据
  */
 private void initData() {
     titles = new ArrayList();
     titles.add("没有什么退路，只有咬牙坚持走下去的路！");
     titles.add("今天的你依旧帅气如初 ");
     titles.add("愿十年之后的自己会感谢当初努力奋斗的你");
     titles.add("日子再甜,也没有你甜");
     titles.add("喜欢阿羡也喜欢李现但更喜欢你现（出现）");

 }

setViews()：赋值滚动内容以及设置视图
mviewFlipper ：是 ViewFlipper 控件获取id的变量名
titles：是存入滚动内容的List集合变量名
title_view：是自定义 ViewFlipper 的滚动布局

  /**
   * 为每一页设置视图
   */
  private void setViews() {
  
	  //获取ViewFlipper控件id
      mviewFlipper = (ViewFlipper) findViewById(R.id.filpper);
        
      for (int i = 0; i < titles.size(); i++) {
          View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.title_view, null);
          TextView tvTitle = view.findViewById(R.id.tvItem);
          //赋值
          tvTitle.setText(titles.get(i));
          //动态添加视图
          mviewFlipper.addView(view);
      }

      //设置的时间间隔来开始切换所有的View,切换会循环进行
      mviewFlipper.startFlipping();
      //视图进入动画
      mviewFlipper.setInAnimation(context, R.anim.news_in);
      //视图退出动画
      mviewFlipper.setOutAnimation(context, R.anim.news_out);
      //自动开始滚动
      mviewFlipper.setAutoStart(true);
      //视图的切换间隔
      mviewFlipper.setFlipInterval(3000);
  }

拓展了解

ViewFlipper 和 ViewPager 两者的名字非常相似，效果也很奇妙。
ViewPager 可以理解成 “ 一页一页的视图 ” ；那么 ViewFlipper 则是 “ 快速翻转的视图 ”。
但 ViewFlipper 的使用率却远不及 ViewPager 的频繁，不过这并不意味着 ViewFlipper 就弱了。来了解了解鸭！