Android自定义控件实现多行文字自动向上滚动轮播效果(伪文字轮播)

转载请注明出处:http://blog.csdn.net/CHX_W/article/details/74855521

最近一个朋友有个需求,需要实现多行文字自动向上翻滚的效果,上网找了很多没有特别满意的,只有一个demo其展示效果大体满意,其实现原理是通过onDraw方法动态画出来的效果,但是无法实现对每行的item点击响应事件,感觉改起来比较棘手,果断被pass掉自己写了一个,在这里将源码分享给需要的朋友!

思路

既要实现文字滚动又要实现点击的事件,最直观的想法就是创建多个TextView,通过遍历控件得到子View,先将第一个子View通过addView()添加进来,再将第一个子View删除,看上去就好像队列中的第一个人出队列排到最后依次循环达到伪轮播效果(此处有坑哦~)
这里写图片描述

使用说明

  1. 此控件传入的数据源为String集合,我们可以根据自己需要更改为对象也可以
  2. 开始调用:只需要在Activity或Fragment里通过setData()方法将数据传进来,剩下的就大胆的交给VerticalScrolledListview 控件吧!(当然记得要在xml里引用控件哦~)调用入口
  3. 点击事件监听已实现,需要自己手动调用哦~

注意的几点坑

  1. initTextView()方法需要在传入数据的时候被调用,如果直接放在初始化或者onDraw()中,控件显示为空,因为控件在初始化的时候数据还没有传进来!
  2. 注意了,反正我是被坑了一次,在操作子View的时候要注意需要先将要删除的remove掉,再添加,原因是必须先解除子view与父类关系,再添加进去,否则会报异常,就好比这个孩子已经有一个爸爸了,你硬把他塞给其他爸爸,一个孩子不可能有两个爸爸啊,所以必须把第一个爸爸给干掉,ok,合法了!
    java.lang.IllegalStateException The specified child already has a parent. You must call removeView() on the child’s parent first这里写图片描述
  3. 大功告成!是不是很简单,哈哈~

完整VerticalScrolledListview代码如下

public class VerticalScrolledListview extends LinearLayout {
    private Context mContext;
    private List<String> data = new ArrayList<String>();
    private OnItemClickListener itemClickListener;

    public VerticalScrolledListview(Context context) {
        super(context);
        init(context);
    }

    public VerticalScrolledListview(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context){
        mContext = context;
        this.setOrientation(VERTICAL);
    }

    /**
     * 更新文字需要在UI线程
     */
    Handler mHandler = new Handler();
    Runnable mUpdateResults = new Runnable() {
        public void run() {
            traversalView(VerticalScrolledListview.this);
        }
    };

    private void initTextView(){
        if (data != null && data.size() != 0){
            for (int i = 0;i< data.size();i++){
                TextView textView = new TextView(mContext);
                textView.setText(data.get(i));
                textView.setGravity(Gravity.CENTER);
                textView.setTextColor(Color.BLACK);
                this.addView(textView);
                textView.setClickable(true);
                final int index = i;
                textView.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        itemClickListener.onItemClick(index);
                    }
                });
            }
            //初始化控件结束调用计时器
            startTimer();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    /**
     * @param data
     * view初始化优先于此方法
     * so控件需要手动调动填充
     */
    public void setData(List<String> data){
        this.data = data;
        initTextView();
    }

    public void startTimer(){
        Timer timer = new Timer();
        TimerTask task = new TimerTask() {
            @Override
            public void run() {
                //将数据源重新排序
                mHandler.post(mUpdateResults);
            }
        };
        timer.schedule(task, 2000, 2000);

    }

    /**
     * 遍历view的所有子控件设值,不用在创建
     * @param viewGroup
     */
    public void traversalView(final ViewGroup viewGroup) {
        if (viewGroup.getChildCount() != 0){
            for (int i = 0; i < viewGroup.getChildCount(); i++){
                if (i == 0){
                    mHandler.post(new Runnable() {
                        @Override
                        public void run() {
                            /**
                             * 此处必须这么处理,先removeview子view,解除与父类关系,再添加进去
                             * 否则会报错java.lang.IllegalStateException
                             */
                            TextView newView = (TextView) viewGroup.getChildAt(0);
                            viewGroup.removeView(viewGroup.getChildAt(0));
                            viewGroup.addView(newView);
                        }
                    });

                }
            }
        }
    }

    /**
     * 设置点击事件监听
     * @param itemClickListener
     */
    public void setOnItemClickListener(VerticalScrolledListview.OnItemClickListener itemClickListener) {
        this.itemClickListener = itemClickListener;
    }

    /**
     * 轮播文本点击监听器
     */
    public interface OnItemClickListener {
        /**
         * @param position 当前点击ID
         */
        void onItemClick(int position);
    }
}
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android自定义轮播控件可以使用ViewPager和Handler实现: 1. 首先创建一个自定义的ViewPager类,并重写onTouchEvent()方法,实现手势滑动效果。 ``` public class MyViewPager extends ViewPager { private float startX; private float startY; private OnItemClickListener onItemClickListener; public MyViewPager(Context context) { super(context); } public MyViewPager(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: startX = ev.getX(); startY = ev.getY(); break; case MotionEvent.ACTION_UP: float endX = ev.getX(); float endY = ev.getY(); if (startX == endX && startY == endY) { if (onItemClickListener != null) { onItemClickListener.onItemClick(getCurrentItem()); } } break; } return super.onTouchEvent(ev); } public void setOnItemClickListener(OnItemClickListener onItemClickListener) { this.onItemClickListener = onItemClickListener; } public interface OnItemClickListener { void onItemClick(int position); } } ``` 2. 创建一个自定义的轮播控件类,继承自LinearLayout,并在该类中初始化ViewPager和指示器,并设置自动轮播。 ``` public class MyBanner extends LinearLayout { private Context mContext; private MyViewPager mViewPager; private LinearLayout mIndicatorLayout; private List<ImageView> mIndicatorViews; private List<String> mImageUrls; private int mCurrentItem = 0; private Handler mHandler = new Handler(); public MyBanner(Context context) { super(context); initView(context); } public MyBanner(Context context, AttributeSet attrs) { super(context, attrs); initView(context); } private void initView(Context context) { mContext = context; View view = LayoutInflater.from(mContext).inflate(R.layout.my_banner_layout, this); mViewPager = (MyViewPager) view.findViewById(R.id.viewpager); mIndicatorLayout = (LinearLayout) view.findViewById(R.id.indicator_layout); } public void setImageUrls(List<String> imageUrls) { mImageUrls = imageUrls; initIndicator(); mViewPager.setAdapter(new MyBannerAdapter()); mViewPager.setCurrentItem(Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % mImageUrls.size())); startAutoScroll(); } private void initIndicator() { mIndicatorViews = new ArrayList<>(); for (int i = 0; i < mImageUrls.size(); i++) { ImageView indicatorView = new ImageView(mContext); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.rightMargin = 20; indicatorView.setLayoutParams(params); if (i == 0) { indicatorView.setImageResource(R.drawable.indicator_selected); } else { indicatorView.setImageResource(R.drawable.indicator_normal); } mIndicatorLayout.addView(indicatorView); mIndicatorViews.add(indicatorView); } } private void startAutoScroll() { mHandler.postDelayed(new Runnable() { @Override public void run() { mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1); mHandler.postDelayed(this, 2000); } }, 2000); } private class MyBannerAdapter extends PagerAdapter { @Override public int getCount() { return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public Object instantiateItem(ViewGroup container, final int position) { ImageView imageView = new ImageView(mContext); imageView.setScaleType(ImageView.ScaleType.FIT_XY); Glide.with(mContext).load(mImageUrls.get(position % mImageUrls.size())).into(imageView); container.addView(imageView); imageView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(mContext, "点击了第" + (position % mImageUrls.size() + 1) + "张图片", Toast.LENGTH_SHORT).show(); } }); return imageView; } } } ``` 3. 在布局文件中使用自定义的轮播控件。 ``` <com.example.myapplication.MyBanner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="200dp" /> ``` 4. 在代码中设置轮播的图片地址。 ``` List<String> imageUrls = new ArrayList<>(); imageUrls.add("http://img2.imgtn.bdimg.com/it/u=202085641,1798154443&fm=27&gp=0.jpg"); imageUrls.add("http://img5.imgtn.bdimg.com/it/u=2746360890,4221331673&fm=27&gp=0.jpg"); imageUrls.add("http://img0.imgtn.bdimg.com/it/u=3054917406,3471798182&fm=27&gp=0.jpg"); mBanner.setImageUrls(imageUrls); ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值