Android 小贴士播报

要做什么

最近在做“叮咚钱包”时，有这样的一个需求，类似“招商银行掌上生活”小贴士如下图（红色框）：

再来一张更清楚动态图（这个动态gif可是研究了半天才制作完成，如有人感兴趣就分享）

构建思路

一开始是想用View来绘制，考虑到有图片和文字，单用view来绘制难度过大。最后采用LinearLayout布局，滚动用动画来实现。如果封装成一个类最好不过了。let do it！

步骤一：layout布局

<?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="44dp"android:orientation="horizontal"><ImageView
        android:id="@+id/iv_icon"android:layout_width="wrap_content"android:layout_height="44dp"android:layout_centerVertical="true"android:layout_marginLeft="9.3dp"android:layout_marginRight="10dp"android:src="@mipmap/tips_title" /><TextView
        android:id="@+id/tv_line"style="@style/SingleLineVertical"android:layout_marginBottom="8dp"android:layout_marginTop="8dp"android:layout_toRightOf="@+id/iv_icon" /><LinearLayout
        android:id="@+id/ll_tips"android:layout_width="wrap_content"android:layout_height="88dp"android:layout_toRightOf="@+id/tv_line"android:orientation="vertical"><LinearLayout
            android:layout_width="wrap_content"android:layout_height="44dp"android:orientation="horizontal"><TextView
                android:id="@+id/tv_title1"android:layout_width="wrap_content"android:layout_height="24dp"android:layout_gravity="center"android:layout_marginLeft="11dp"android:background="@drawable/tips_text"android:gravity="center"android:paddingLeft="9dp"android:paddingRight="9dp"android:text="累计成交额"android:textColor="#eb1212"android:textSize="12dp" /><TextView
                android:id="@+id/tv_content1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginLeft="13dp"android:text="10000元"android:textColor="#313131"android:textSize="14.6dp" /></LinearLayout><LinearLayout
            android:layout_width="wrap_content"android:layout_height="44dp"android:orientation="horizontal"><TextView
                android:id="@+id/tv_title2"android:layout_width="wrap_content"android:layout_height="24dp"android:layout_gravity="center"android:layout_marginLeft="11dp"android:background="@drawable/tips_text"android:gravity="center"android:paddingLeft="9dp"android:paddingRight="9dp"android:text="累计成交额"android:textColor="#eb1212"android:textSize="12dp" /><TextView
                android:id="@+id/tv_content2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginLeft="13dp"android:text="20000元"android:textColor="#313131"android:textSize="14.6dp" /></LinearLayout></LinearLayout>
</LinearLayout>

我们很快就能完成布局。从上面代码23~89行，可以看出是使用两个44dp高度的LinearLayout组合而成。一个可以显示，一个则被限制隐藏着。被隐藏的我们将会使用动画效果来实现滚动。

步骤二：优化layout布局

一般我们是不会去做这样的事，既然闲来无事。那就研究研究。我们使用android自带工具hierarchyviewer.bat，这个是在模拟器上使用，现在很多真机很难root成功。

红色框是系统生成的，从后面LinearLayout开始才是我们绘制的。优化空间还是有的，我们可以用merge来优化 LinearLayout-》TipsView-》LinearLayout。

后面的两个LinearLayout可以考虑定义一个xml布局后，使用include同样再用merge。考虑到实际项目中，不应该切得太碎片了，文件多也未必是好事。就先暂时这样。

下面是优化后的布局，在布局代码中外最外层的LinearLayout改为merge即可

这是对改后对比，很明显红框1三个变成红框2两个。

这是讲解merge的链接：http://www.infoq.com/cn/articles/android-optimise-layout

步骤三：编写控制类

public class TipsView extends LinearLayout {private static final int INTERVAL = 3000;private Context context;private LinearLayout ll_tips;private TextView tv_title1, tv_content1, tv_title2, tv_content2;private List<TipsBean> list = new ArrayList<>();private int cursor = 0;private Handler handler = new Handler();private Timer timer;public TipsView(Context context) {super(context);this.context = context;initView(context);}public TipsView(Context context, AttributeSet attrs) {super(context, attrs);this.context = context;initView(context);}private void initView(Context context) {LayoutInflater.from(context).inflate(R.layout.tips_ll, this);ll_tips = (LinearLayout) findViewById(R.id.ll_tips);tv_title1 = (TextView) findViewById(R.id.tv_title1);tv_content1 = (TextView) findViewById(R.id.tv_content1);tv_title2 = (TextView) findViewById(R.id.tv_title2);tv_content2 = (TextView) findViewById(R.id.tv_content2);timer = new Timer();timer.schedule(new TimerTask() {@Overridepublic void run() {if (list != null && list.size() != 0) {handler.post(new Runnable() {@Overridepublic void run() {startRolling();}});}}}, 0, INTERVAL);}public void destroy() {if (timer != null) {timer.cancel();}}public void setContext(List<TipsBean> list) {if (list.size() < 2) return;// 复位数据this.list.clear();this.list.addAll(list);cursor = 0;// 设置数据tv_title1.setText((this.list.get(0).getTips()));tv_content1.setText((this.list.get(0).getContent()));tv_title2.setText((this.list.get(1).getTips()));tv_content2.setText((this.list.get(1).getContent()));}private void startRolling() {Animation animation = AnimationUtils.loadAnimation(context, R.anim.tips_roll);animation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {ll_tips.clearAnimation();cursor++;if (cursor > list.size() - 1) cursor = 0;tv_title1.setText((list.get(cursor).getTips()));tv_content1.setText((list.get(cursor).getContent()));tv_title2.setText((list.get(cursor + 1 >= list.size() ? 0 : cursor + 1).getTips()));tv_content2.setText((list.get(cursor + 1 >= list.size() ? 0 : cursor + 1).getContent()));}@Overridepublic void onAnimationRepeat(Animation animation) {}});ll_tips.startAnimation(animation);}
}

我们是使用Timer 和 Handler结合来实现定时轮播的。这里有一个非常重要需要注意一下，在使用完Timer后必须cancel()如果没有的话，那么你的定时器将一直执行，直到应用退出。这里将存在内存泄漏的可能。

public void onAnimationEnd(Animation animation) {ll_tips.clearAnimation();cursor++;if (cursor > list.size() - 1) cursor = 0;tv_title1.setText((list.get(cursor).getTips()));tv_content1.setText((list.get(cursor).getContent()));tv_title2.setText((list.get(cursor + 1 >= list.size() ? 0 : cursor + 1).getTips()));tv_content2.setText((list.get(cursor + 1 >= list.size() ? 0 : cursor + 1).getContent()));
}

我们是使用list来循环，大于后则置0.
ll_tips.clearAnimation();在动画执行完后要清除，不然会有卡顿的现象。

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

这是动画xml，从以下图我们可以知道是向上移动。动画时间是500ms。
想学习动画的同学，可以参考以下链接。
http://blog.csdn.net/scyatcs/article/details/26764641

步骤四：还有哪些可以做的？

这样代码似乎看似没有什么问题了。不过也确实一般我也只做到这步骤，上班时没有我们多余时间去总结优化。现在我们不妨多多考虑内存，性能方面。大家可以发散性思维讨论，做测试。

如果多个线程调用setContext()来设置播报内容，会不会出问题？是否考虑线程安全？
我们试着加快滚动速度，看下内存是否泄漏，cpu是否正常。能否优化？
视图是否过度渲染？