垂直换行滚动广告

来源：互联网发布：炮打白宫事件知乎编辑：程序博客网时间：2024/05/16 15:34

上个月，公司有个项目需要做垂直换行实现播放广告（又称滚动式广告）。我的第一反应是，Android原生的TextView控件只支持水平移动，或者外面嵌套一层ScrollView实现垂直方向的渐进式移动。那么，要实现垂直换行得需要自定义控件了。后来在GitHub上找到一个类似项目，GitHub上面有很多开源项目（即AOSP），建议大家常去GitHub浏览。感谢孙福生这位作者提供思路：自定义一个控件MarqueeView实现动画切入切出的垂直换行，可设置动画时间、换行时间价间隔，控制广告的播放与暂停，动态配置广告。可是，后来发现切换Activity，有时会发生文字重叠混乱的情况；有些机型在屏幕关闭重新唤醒后无法继续播放；广告有数字、英文等字符时无法准确换行。下面具体来描述实现过程约解决思路：

不同机型的像素不同，所以需要把手机屏幕像素转成实际字体大小：

    // 将px值转换为sp值，保证文字大小不变    public static int px2sp(Context context, float pxValue) {        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;        return (int) (pxValue / fontScale + 0.5f);    }

自定义动画属性：

    <declare-styleable name="MarqueeViewStyle">        <attr name="mvInterval" format="integer|reference"/>        <attr name="mvAnimDuration" format="integer|reference"/>        <attr name="mvTextSize" format="dimension|reference"/>        <attr name="mvTextColor" format="color|reference"/>        <attr name="mvSingleLine" format="boolean"/>        <attr name="mvGravity">            <enum name="left" value="0"/>            <enum name="center" value="1"/>            <enum name="right" value="2"/>        </attr>    </declare-styleable>

xml布局引用自定义控件：

    <com.frank.marquee.view.MarqueeView    android:id="@+id/marquee_view"    android:layout_width="match_parent"    android:layout_height="30dp"    android:layout_marginLeft="10dp"    android:layout_marginRight="10dp"    MarqueeViewStyle:mvAnimDuration="1000"    MarqueeViewStyle:mvInterval="3000"    MarqueeViewStyle:mvTextColor="#555555"    MarqueeViewStyle:mvTextSize="16sp"    MarqueeViewStyle:mvSingleLine="true"/>

值得注意的是，需要在父布局指定引用动画资源：

xmlns:MarqueeViewStyle="http://schemas.android.com/apk/res-auto"

测量手机屏幕宽度以及每行所能容纳的字数、广告行数。经过反复测试，可精确测出包含中文、英文、数字等字符，实现准确换行（感谢陈卓同事提供的改良算法）：

  private void startWithFixedWidth(String notice,int width) {        char[] text = notice.toCharArray();        TextPaint paint = new TextPaint();        paint.setTextSize(realTextSize);        if (width == 0) {            throw new RuntimeException("Please set MarqueeView width !");        }        StringBuilder builder = new StringBuilder();        for (int j = 0; j < text.length; j++) {            builder.append(text[j]);            float textWidth = paint.measureText(builder.toString());            if (width < textWidth) {                builder.deleteCharAt(builder.length() - 1);                notices.add(builder.toString());                builder.delete(0,builder.length());                notice = notice.substring(j);                text = notice.toCharArray();                j = -1;            }        }        if (builder.length() > 0)            notices.add(builder.toString());    }

在Activity引用MarqueeView实现垂直换行：

        marqueeView.startWithText(notice2);//启动marqueeView的自动换行播放                List<String> mMarqueeList = new ArrayList<String>();        mMarqueeList.add(notice1);        mMarqueeList.add(notice2);        marqueeView.startWithList(mMarqueeList);//播放list集合，一条一条循环播放

Activity切换时，可能会发生文字重叠混乱的情况。原因是，广告换行有个时间间隔，切换Activity时并没有暂停广告的播放。如果切换Activity的时间差与换行的时间间隔相等，那么就会看到上一行与下一行文字重叠。根据Activity的生命周期，可以在onPause方法里调用自定义控件提供的stopFlipping，当再次切回广告所在的Activity，执行onResume时调用startFlipping方法重新播放广告。这样就可以解决文字重叠显示的问题。

  protected void onResume() {    // TODO Auto-generated method stub    super.onResume();    marqueeView.startFlipping();//从其他activity回到当前activity，重新启动播放    Log.d("MarqueeState", "onResume");    }        @Override    protected void onPause() {    // TODO Auto-generated method stub    super.onPause();    marqueeView.stopFlipping();//从当前activity跳转到其他activity，停止播放    Log.d("MarqueeState", "onPause");    }

至于有些机型在关闭屏幕再次唤醒后，无法继续播放广告的情况，是因为手机制造商修改FrameWork层的类ViewFlipper。我们重新该类就可以解决。

实现效果如下：

这是我在工作项目中遇到问题的总结，发现自定义控件是灵活多变的，可根据具体需求来实现。希望能帮助到其他有此需求的开发者，如有问题希望大家指出。最后附上实现源码。点击打开链接

0 0