Android【垂直滚动广告条】仿淘宝头条1号店京东—垂直滚动广告条

淘宝头条是淘宝App中很经典的一个功能显示，主要用于显示最近的热评新闻，显示主要方式为文字竖直滚动效果，下面简单阐述一下本demo所涉及到的技术点以及功能展示

1.主要用到的控件为Android原生控件ViewFlipper
2.1本demo不仅可以像淘宝一样进行上下滚动，并且可以对滚动中的内容进行点击删除
2.2可修改切入动画方式
2.3修改展示时间延迟

下面展示一下淘宝中，出现淘宝头条的效果图

下面展示下我的demo中的效果

---

下面简单阐述一下设计的思路以及用到的代码

1.首先看一下对ViewFlipper的解释

本人翻译为：ViewFlipper可以用来将两个视图或者两个以上的视图进行简单的添加。但是在同一时间仅仅显示一个子视图。如果要求,也可以定期对每个孩子View之间进行自动翻转。

也就是说，ViewFlipper是一个非常方便的切换视图的一个控件

2.介绍各个视图之间来回切入切出（上下滚动）的动画

实际上是两个进入和退出的两个动画文件

• push_up_in.xml

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

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

• push_up_out.xml

<?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="500"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="500" />
</set>

3.在MainActivity的布局文件中，用到ViewFlipper

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.sunqi237.scrollview.MainActivity">

    <ViewFlipper
        android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:autoStart="true"
        android:flipInterval="3000"
        android:inAnimation="@anim/push_up_in"
        android:outAnimation="@anim/push_up_out"></ViewFlipper>
</RelativeLayout>

注意：这里涉及到了ViewFlipper的几个常用的属性
1.android:autoStart=”true” 当获取到当前视图时，则自动对视图进行滚动
2.android:inAnimation 设置ViewFlipper的切入动画
3.android:outAnimation 设置ViewFlipper的切出动画
4.android:flipInterval 设施ViewFlipper的滚动间隔（显示延迟）

4.MainActivity中的代码展示

public class MainActivity extends AppCompatActivity {

    private ViewFlipper flipper;
    private List testList;
    private int count;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        flipper = (ViewFlipper) findViewById(R.id.flipper);
        //初始化list数据
        testList = new ArrayList();
        testList.add(0, "爸妈爱的“白”娃娃，真是孕期吃出来的吗？");
        testList.add(1, "如果徒步真的需要理由，十四个够不够？");
        testList.add(2, "享受清爽啤酒的同时，这些常识你真的了解吗？");
        testList.add(3, "三星Galaxy S8定型图无悬念");
        testList.add(4, "家猫为何如此高冷？");
        count = testList.size();
        for (int i = 0; i < count; i++) {
            final View ll_content = View.inflate(MainActivity.this, R.layout.item_flipper, null);
            TextView tv_content = (TextView) ll_content.findViewById(R.id.tv_content);
            ImageView iv_closebreak = (ImageView) ll_content.findViewById(R.id.iv_closebreak);
            tv_content.setText(testList.get(i).toString());
            iv_closebreak.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //对当前显示的视图进行移除
                    flipper.removeView(ll_content);
                    count--;
                    //当删除后仅剩 一条 新闻时，则取消滚动
                    if (count == 1) {
                        flipper.stopFlipping();
                    }
                }
            });
            flipper.addView(ll_content);
        }
    }

5.插入子视图的思路

设置一个子视图item_flipper.xml,写好子视图布局

• item_flipper.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:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_height="wrap_content"
        android:background="@drawable/scrollview_bg"
        android:text="热议"
        android:textColor="#F14C00"
        android:textSize="12sp" />
    <TextView
        android:id="@+id/tv_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:layout_weight="1"
        android:gravity="top"
        android:paddingBottom="10dp"
        android:paddingLeft="@dimen/dp_16"
        android:paddingTop="@dimen/dp_12"
        android:text="BreakingNews"
        android:textColor="@android:color/black"
        android:textSize="@dimen/font_16"></TextView>

    <ImageView
        android:id="@+id/iv_closebreak"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="@dimen/dp_12"
        android:paddingRight="@dimen/dp_16"
        android:src="@drawable/close" />
</LinearLayout>

• scrollview_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <stroke
        android:width="0.1dp"
        android:color="#F14C00" />
    <solid android:color="#fff" />
    <padding
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp" />
</shape>

总结：

1.利用一个for循环，将子视图进行添加
2.对子视图设置点击，通过.removeView（） .addView()方法进行增加和删除子视图