Android搜索栏之文字轮播控件TextBanner

相信大多数App都会有搜索这一功能,而搜索栏里会放置提示文字(热搜词,亦或个性化推荐)。当多个提示文字的时候,为了能“公平”的显示这些文字提示,就需要轮播切换显示这些文字。
虽然这个功能实现起来很简单,但是用的场景还是很多的,搜索栏文字提示,淘宝京东App首页的头条资讯。
闲话不多说,先看效果图:

text_banner.gif

Github传送门 biu biu biu ~~~

实现思路

  1. 想要达到轮播效果,两个View交替出现即可,既然是两个View那么就需要一个父容器(TextBanner继承FrameLayout):
public class TextBanner extends FrameLayout {
    /**
     * 两个View交替出现
     */
    private View viewFirst, viewSecond;
}
  1. 间隔性就用Handler的postDelayed来实现就行了,为了防止内存泄漏,这里采用WeakHandler
mHandler.postDelayed(task, mDelayTime);

/**
 * 轮播的定时任务:当页数大于1时轮播
 */
private Runnable task = new Runnable() {
    @Override
    public void run() {
        updateTipAndPlayAnimation();
        mHandler.postDelayed(this, mDelayTime);
    }
};
  1. 交替出现的动画(TextBanner只用了一个简单的Y方向平移动画,并不支持动画设置,因为我觉得没必要花里胡哨的,如果后期有需要,可以考虑提示自定义)
/**
 * 生成动画
 *
 * @param fromYValue 起始值
 * @param toYValue   结束值
 * @return 动画
 */
private Animation newAnimation(float fromYValue, float toYValue) {
    Animation anim = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0,
            Animation.RELATIVE_TO_SELF, fromYValue, Animation.RELATIVE_TO_SELF, toYValue);
    anim.setDuration(mDuration);
    anim.setInterpolator(new DecelerateInterpolator());
    return anim;
}
  1. 动画交替View并设置数据(说明一下,currentPosition是用来记录显示的View数据所在的数据集合的位置)
/**
 * 动画替换下一个View
 */
private void updateTipAndPlayAnimation() {
    checkAdapterNotNull();
    if (mAdapter.getCount() == 0) {
        return;
    }
    currentPosition++;
    if (currentPosition % SIZE == 0) {
        bindViewData(viewFirst, currentPosition % mAdapter.getCount());
        startAnimation(viewFirst, viewSecond);
        this.bringChildToFront(viewSecond);
    } else {
        bindViewData(viewSecond, currentPosition % mAdapter.getCount());
        startAnimation(viewSecond, viewFirst);
        this.bringChildToFront(viewFirst);
    }
}
  1. 数据设置适配器,这里采用Adapter的形式(看方法名应该很好理解,似曾相识):
  • onCreateView设置显示View
  • getCount数据个数
  • onBindViewData给View设置数据显示
  • notifyDataChange数据更新通知
/**
 * 数据适配器
 */
public abstract static class Adapter {

    /**
     * 数据更新观察这
     */
    private Observable mObservable;

    /**
     * 注册数据更新观察
     *
     * @param observable 数据更新观察
     */
    private void registerObservable(Observable observable) {
        this.mObservable = observable;
    }

    /**
     * 通知数据更新
     */
    public void notifyDataChange() {
        if (mObservable != null) {
            mObservable.onChange();
        }
    }

    /**
     * Item个数
     *
     * @return Item个数
     */
    public abstract int getCount();

    /**
     * View生成
     *
     * @param parent 父容器
     * @return Item的View
     */
    public abstract View onCreateView(@NonNull ViewGroup parent);

    /**
     * 数据绑定View
     *
     * @param convertView 内容View
     * @param position    位置
     */
    public abstract void onBindViewData(@NonNull View convertView, int position);
}

到这里,简单的文字轮播就差不多完事了。这里只讲一些实现思路,具体如何使用就去Github上就好了:
Github传送门 biu biu biu ~~~

最后

如果你有什么意见和反馈,欢迎到Github提issue(最喜欢别人提issue了)哈哈哈~

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值