【Android 控件】垂直滚动广告栏控件实现（跑马灯效果）

最新推荐文章于 2024-04-28 18:50:09 发布

置顶 Colin_Mindset

最新推荐文章于 2024-04-28 18:50:09 发布

阅读量1.2k

点赞数 1

分类专栏： Android 文章标签： Android 跑马灯垂直滚动广告仿淘宝

本文链接：https://blog.csdn.net/colinandroid/article/details/78785762

版权

Android 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

跑马灯TextView是每个学过android开发的人在入门阶段都会去自己实现一遍的。然而，在实际应用当中，要在跑马灯中展示的不仅仅是一行文字，常常是一幅幅图片，甚至是图文混排的广告。

这种场景下，集成了跑马灯效果的TextView肯定就不能满足我们的需求了。经过一番调研，我找到了一种能非常好实现垂直滚动广告栏的控件——ViewFlipper。

先看下实现效果。

具体实现起来，代码也是非常清爽。

1、xml布局

（1）ViewFlipper布局

<ViewFlipper
                            android:id="@+id/nearby_flipper"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_marginLeft="6dp"
                            android:layout_weight="1"
                            android:autoStart="true"
                            android:flipInterval="2000"
                            android:inAnimation="@anim/anim_come_in"
                            android:outAnimation="@anim/anim_come_out" />

（2）子View布局

<?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="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ellipsize="end"
            android:singleLine="true"
            android:textColor="#222222"
            android:textSize="16dp" />

        <TextView
            android:id="@+id/price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:textColor="#cccccc"
            android:textSize="16dp" />
    </LinearLayout>

    <TextView
        android:id="@+id/distance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:gravity="center_vertical"
        android:textColor="#cccccc"
        android:textSize="16dp" />
</LinearLayout>

2、android代码

实现起来非常简单，其实就是add View到viewFlipper中。

for (int i = 0; i < list.size(); i++) {
            View view = LayoutInflater.from(context).inflate(R.layout.cttour_around_scroll_tv, null);
            ((TextView) view.findViewById(R.id.name)).setText(list.get(i).getName());
            String str = "¥" + list.get(i).getPrice() + "起";
            SpannableString s = new SpannableString(str);
            s.setSpan(new ForegroundColorSpan(context.getResources().getColor(R.color.cttour_blue_independent_travel_yellow)), str.indexOf("¥"), str.indexOf("起"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            ((TextView) view.findViewById(R.id.price)).setText(s);
            ((TextView) view.findViewById(R.id.distance)).setText(revisedDistance(list.get(i).getDistance()));
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    String url = "/ticket/index.html#/webapp/ticket/dest/n-附近-0/s-tickets?radiusmax=10&sort=6&target=ticket" + "&lon=" + cityModel.getLongitude() + "&lat=" + cityModel.getLatitude();
                    CtripH5Manager.openUrl(context, url, null);
                }
            });
            viewFlipper.addView(view);
        }

如需要demo，或者有任何问题，可以邮件联系我zhshan@ctrip.com