Android自定义View实现仿1号店垂直滚动广告条代码

发布时间 - 2026-01-10 22:38:26    点击率:

效果图展示,图片有点卡,耐心看会,原程序是很流畅的

实现步骤:

  • 声明变量
  • 初始化画笔、文本大小和坐标
  • onMeasure()适配wrap_content的宽高
  • onDraw()画出根据坐标画出两段Text
  • 监听点击事件
  • 在Activity中实现点击事件

实现原理(坐标变换原理):整个过程都是基于坐标Y的增加和交换进行处理的,Y值都会一直增加到endY,然后进行交换逻辑

步骤一:声明变量

由于1号店是两句话的滚动,所以我们也是使用两句话来实现的

private Paint mPaint;
private float x, startY, endY, firstY, nextStartY, secondY;
//整个View的宽高是以第一个为标准的,所以第二句话长度必须小于第一句话
private String[] text = {"今日特卖:毛衣3.3折>>>", "公告:全场半价>>>"};
private float textWidth, textHeight;
//滚动速度
private float speech = 0;
private static final int CHANGE_SPEECH = 0x01;
//是否已经在滚动
private boolean isScroll = false;

步骤二:初始化画笔、文本大小和坐标

以第一句话为标准来做控件的宽高标准

//初始化画笔
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setTextSize(30);
//测量文字的宽高,以第一句话为标准
Rect rect = new Rect();
mPaint.getTextBounds(text[0], 0, text[0].length(), rect);
textWidth = rect.width();
textHeight = rect.height();
//文字开始的x,y坐标
//由于文字是以基准线为基线的,文字底部会突出一点,所以向上收5px
x = getX() + getPaddingLeft();
startY = getTop() + textHeight + getPaddingTop() - 5;
//文字结束的x,y坐标
endY = startY + textHeight + getPaddingBottom();
//下一个文字滚动开始的y坐标
//由于文字是以基准线为基线的,文字底部会突出一点,所以向上收5px
nextStartY = getTop() - 5;
//记录开始的坐标
firstY = startY;
secondY = nextStartY;

步骤三:onMeasure()适配wrap_content的宽高

如果学习过自定义View的话,下面的代码应该很熟悉,就是适配warp_content的模板代码:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 int width = measureWidth(widthMeasureSpec);
 int height = measureHeight(heightMeasureSpec);
 setMeasuredDimension(width, height);
}
private int measureHeight(int heightMeasureSpec) {
 int result = 0;
 int size = MeasureSpec.getSize(heightMeasureSpec);
 int mode = MeasureSpec.getMode(heightMeasureSpec);
 if (mode == MeasureSpec.EXACTLY) {
  result = size;
 } else {
  result = (int) (getPaddingTop() + getPaddingBottom() + textHeight);
  if (mode == MeasureSpec.AT_MOST) {
   result = Math.min(result, size);
  }
 }
 return result;
}
private int measureWidth(int widthMeasureSpec) {
 int result = 0;
 int size = MeasureSpec.getSize(widthMeasureSpec);
 int mode = MeasureSpec.getMode(widthMeasureSpec);
 if (mode == MeasureSpec.EXACTLY) {
  result = size;
 } else {
  result = (int) (getPaddingLeft() + getPaddingRight() + textWidth);
  if (mode == MeasureSpec.AT_MOST) {
   result = Math.min(result, size);
  }
 }
 return result;
}

步骤四:onDraw()画出根据坐标画出两段Text(已修复:Text停下来时闪一下的bug)

通过Handler来改变速度

通过isScroll锁,来控制Handler只改变一次

通过invalidate一直重绘两句话的文字

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 //启动滚动
 if (!isScroll) {
  mHandler.sendEmptyMessageDelayed(CHANGE_SPEECH, 2000);
  isScroll = true;
 }
 canvas.drawText(text[0], x, startY, mPaint);
 canvas.drawText(text[1], x, nextStartY, mPaint);
 startY += speech;
 nextStartY += speech;
 //超出View的控件时
 if (startY > endY || nextStartY > endY) {
  if (startY > endY) {
   //第一次滚动过后交换值
   startY = secondY;
   nextStartY = firstY;
  } else if (nextStartY > endY) {
   //第二次滚动过后交换值
   startY = firstY;
   nextStartY = secondY;
  }
  speech = 0;
  isScroll = false;
 }
 invalidate();
}

private Handler mHandler = new Handler() {
 @Override
 public void handleMessage(Message msg) {
  super.handleMessage(msg);
  switch (msg.what) {
   case CHANGE_SPEECH:
    speech = 1f;
    break;
  }
 }
};

步骤五:监听点击事件(已修复:点击事件错乱的问题)

在自定义View重写dispatchTouchEvent处理点击事件,这个也是模板代码:

public onTouchListener listener;
public interface onTouchListener {
 void touchListener(String s);
}
public void setListener(onTouchListener listener) {
 this.listener = listener;
}
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
 switch (event.getAction()) {
  case MotionEvent.ACTION_DOWN:
  case MotionEvent.ACTION_MOVE:
   //点击事件
   if (listener != null) {
    if (startY >= firstY && nextStartY < firstY) {
     listener.touchListener(text[0]);
    } else if (nextStartY >= firstY && startY < firstY) {
     listener.touchListener(text[1]);
    }
   }
   break;
 }
 return true;
}

步骤六:在Activity中实现点击事件

public class VerTextViewActivity extends AppCompatActivity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_ver_text_view);
  VerTextView tv_ver = (VerTextView) findViewById(R.id.tv_ver);
  tv_ver.setListener(new VerTextView.onTouchListener() {
   @Override
   public void touchListener(String s) {
    Toast.makeText(VerTextViewActivity.this, s, Toast.LENGTH_LONG).show();
   }
  });
 }
}

布局文件

<?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">
 <ImageView
  android:layout_width="120dp"
  android:layout_height="30dp"
  android:background="@drawable/vertextview" />
 <com.handsome.app3.Custom.VerTextView.VerTextView
  android:id="@+id/tv_ver"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="#ffffff"
  android:padding="8dp" />
</LinearLayout>

整个类的源码:

/**
 * =====作者=====
 * 许英俊
 * =====时间=====
 * 2016/10/11.
 */
public class VerTextView extends View {
 private Paint mPaint;
 private float x, startY, endY, firstY, nextStartY, secondY;
 //整个View的宽高是以第一个为标准的,所以第二句话长度必须小于第一句话
 private String[] text = {"今日特卖:毛衣3.3折>>>", "公告:全场半价>>>"};
 private float textWidth, textHeight;
 //滚动速度
 private float speech = 0;
 private static final int CHANGE_SPEECH = 0x01;
 //是否已经在滚动
 private boolean isScroll = false;
 private Handler mHandler = new Handler() {
  @Override
  public void handleMessage(Message msg) {
   super.handleMessage(msg);
   switch (msg.what) {
    case CHANGE_SPEECH:
     speech = 1f;
     break;
   }
  }
 };
 public VerTextView(Context context, AttributeSet attrs) {
  super(context, attrs);
  //初始化画笔
  mPaint = new Paint();
  mPaint.setColor(Color.RED);
  mPaint.setTextSize(30);
  //测量文字的宽高,以第一句话为标准
  Rect rect = new Rect();
  mPaint.getTextBounds(text[0], 0, text[0].length(), rect);
  textWidth = rect.width();
  textHeight = rect.height();
  //文字开始的x,y坐标
  //由于文字是以基准线为基线的,文字底部会突出一点,所以向上收5px
  x = getX() + getPaddingLeft();
  startY = getTop() + textHeight + getPaddingTop() - 5;
  //文字结束的x,y坐标
  endY = startY + textHeight + getPaddingBottom();
  //下一个文字滚动开始的y坐标
  //由于文字是以基准线为基线的,文字底部会突出一点,所以向上收5px
  nextStartY = getTop() - 5;
  //记录开始的坐标
  firstY = startY;
  secondY = nextStartY;
 }
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  int width = measureWidth(widthMeasureSpec);
  int height = measureHeight(heightMeasureSpec);
  setMeasuredDimension(width, height);
 }
 private int measureHeight(int heightMeasureSpec) {
  int result = 0;
  int size = MeasureSpec.getSize(heightMeasureSpec);
  int mode = MeasureSpec.getMode(heightMeasureSpec);
  if (mode == MeasureSpec.EXACTLY) {
   result = size;
  } else {
   result = (int) (getPaddingTop() + getPaddingBottom() + textHeight);
   if (mode == MeasureSpec.AT_MOST) {
    result = Math.min(result, size);
   }
  }
  return result;
 }
 private int measureWidth(int widthMeasureSpec) {
  int result = 0;
  int size = MeasureSpec.getSize(widthMeasureSpec);
  int mode = MeasureSpec.getMode(widthMeasureSpec);
  if (mode == MeasureSpec.EXACTLY) {
   result = size;
  } else {
   result = (int) (getPaddingLeft() + getPaddingRight() + textWidth);
   if (mode == MeasureSpec.AT_MOST) {
    result = Math.min(result, size);
   }
  }
  return result;
 }
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //启动滚动
  if (!isScroll) {
   mHandler.sendEmptyMessageDelayed(CHANGE_SPEECH, 2000);
   isScroll = true;
  }
  canvas.drawText(text[0], x, startY, mPaint);
  canvas.drawText(text[1], x, nextStartY, mPaint);
  startY += speech;
  nextStartY += speech;
  //超出View的控件时
  if (startY > endY || nextStartY > endY) {
   if (startY > endY) {
    //第一次滚动过后交换值
    startY = secondY;
    nextStartY = firstY;
   } else if (nextStartY > endY) {
    //第二次滚动过后交换值
    startY = firstY;
    nextStartY = secondY;
   }
   speech = 0;
   isScroll = false;
  }
  invalidate();
 }
 public onTouchListener listener;
 public interface onTouchListener {
  void touchListener(String s);
 }
 public void setListener(onTouchListener listener) {
  this.listener = listener;
 }
 @Override
 public boolean dispatchTouchEvent(MotionEvent event) {
  switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:
   case MotionEvent.ACTION_MOVE:
    //点击事件
    if (listener != null) {
     if (startY >= firstY && nextStartY < firstY) {
      listener.touchListener(text[0]);
     } else if (nextStartY >= firstY && startY < firstY) {
      listener.touchListener(text[1]);
     }
    }
    break;
  }
  return true;
 }
}

以上所述是小编给大家介绍的Android自定义View实现仿1号店垂直滚动广告条代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


# android滚动广告条  # android  # 自定义view  # Android_RecyclerView实现上下滚动广告条实例(带图片)  # Android仿淘宝头条向上滚动广告条ViewFlipper  # Android控件ViewFlipper仿淘宝头条垂直滚动广告条  # Android完美实现平滑过渡的ViewPager广告条  # Android新闻广告条滚动效果  # Android自定义控件之广告条滚动效果  # 利用MVC编写广告条轮播效果  # 第一句话  # 画出  # 自定义  # 两句话  # 第一个  # 句话  # 小编  # 两段  # 都是  # 今日  # 在此  # 给大家  # 重写  # 来做  # 来实现  # 点卡  # 所述  # 给我留言  # 很熟悉  # 高标准 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 装修招标网站设计制作流程,装修招标流程?  如何在自有机房高效搭建专业网站?  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  Laravel怎么自定义错误页面_Laravel修改404和500页面模板  实现点击下箭头变上箭头来回切换的两种方法【推荐】  个人摄影网站制作流程,摄影爱好者都去什么网站?  Linux系统命令中screen命令详解  深圳防火门网站制作公司,深圳中天明防火门怎么编码?  公司网站制作需要多少钱,找人做公司网站需要多少钱?  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  香港代理服务器配置指南:高匿IP选择、跨境加速与SEO优化技巧  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  独立制作一个网站多少钱,建立网站需要花多少钱?  Laravel如何使用Socialite实现第三方登录?(微信/GitHub示例)  Laravel怎么连接多个数据库_Laravel多数据库连接配置  敲碗10年!Mac系列传将迎来「触控与联网」双革新  用v-html解决Vue.js渲染中html标签不被解析的问题  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  如何在IIS中新建站点并配置端口与IP地址?  今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  微信小程序 配置文件详细介绍  如何在万网利用已有域名快速建站?  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  智能起名网站制作软件有哪些,制作logo的软件?  CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】  在线教育网站制作平台,山西立德教育官网?  如何在阿里云域名上完成建站全流程?  详解ASP.NET 生成二维码实例(采用ThoughtWorks.QRCode和QrCode.Net两种方式)  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  Python数据仓库与ETL构建实战_Airflow调度流程详解  如何在阿里云虚拟服务器快速搭建网站?  米侠浏览器网页背景异常怎么办 米侠显示修复  LinuxShell函数封装方法_脚本复用设计思路【教程】  打造顶配客厅影院,这份100寸电视推荐名单请查收  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  音乐网站服务器如何优化API响应速度?  Laravel如何优化应用性能?(缓存和优化命令)  Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程  高防服务器租用首荐平台,企业级优惠套餐快速部署  网站广告牌制作方法,街上的广告牌,横幅,用PS还是其他软件做的?  Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】  Laravel如何与Docker(Sail)协同开发?(环境搭建教程)  Internet Explorer官网直接进入 IE浏览器在线体验版网址  如何在阿里云高效完成企业建站全流程?