从零开始打造垂直SeekBar

最新推荐文章于 2022-08-30 11:29:46 发布
最新推荐文章于 2022-08-30 11:29:46 发布
阅读量361 收藏
点赞数
分类专栏： UI 文章标签： 自定义 view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccw0054/article/details/79422952
版权

从零开始打造垂直SeekBar

偶然中需要使用到垂直的seekbar控件，却发现居然原生没有提供，本来打算直接将控件进行简单的rotation，结果需求要自定义seekbar的样式，而样式是一张固定长宽和方向的图片，直接旋转有各种莫名其妙的问题，嫌麻烦就自己手写一个好了。顺便写个简单的功能性自定义View的教程。

市面上已经实现的垂直Seekbar

一开始是打算在网上找个实现好的直接使用的，然后发现大致实现都是一样，创建一个view类继承于原生seekbar，在onDraw中旋转画布（rotate），并且修正view的位置（translate）。最后重写onTouchEvent，修成progress等等，而且google官方实现中也是类似的方式（这里吐个槽，既然你都知道会有人用到垂直的了，还写了demo，干嘛不不直接提供出来）。当然以上只是核心内容，实际上很多实现的相当繁琐。

由于我本身的需求需要深度定制Seekbar，上面的思路对我来说有很大的局限性，而且网上的代码也是鱼龙混杂，就决定自己从头开始写了。

效果图

这里写图片描述

从零开始

之所以说从零开始，是因为我不打算借助google已经实现的seekbar或者progressbar进行继承封装，我会直接基于FrameLayout进行编写。没有从更底层的viewGroup和view进行是因为本人比较懒，懒的去自己measure和layout了。

思路

简单拆分下需求，seekbar分为两部分，一个滑动轨道、一个拖拽点。将一个Layout看做成轨道，实际上我们需要的只是在Layout中添加一个子View来充当拖拽点就行了。然后重写onTouchListener判断当前滑动距离，并用translate等方式移动view，并且在移动时计算移动的progress。以下是核心代码：

  • 创建thumbView，手动设置LayoutParams，告诉轨道自己的布局属性。
        //显示部分
        View thumb = new View(getContext());
        thumb.setBackgroundColor(Color.WHITE);
        int thumbHeight = (int) PublicUtil.getInstance().dpToPx(getContext(), 4);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, thumbHeight);
        layoutParams.topMargin = 5;
        layoutParams.bottomMargin = 5;
        thumb.setLayoutParams(layoutParams);
        addView(thumb);
  • 添加监听，这里说明一下，很多不熟悉的人会不知道监听事件应该添加到哪个布局，这里分为两种情况：
    • 一种是，全局可响应拖拽事件，也就是不用特意拖拽thumb也能达到效果，thumb的目的只是纯粹的将当前进度展示给用户。这种情况优点是简单粗暴，而且操作流畅，但是总感觉怪怪的，不知道的以为是出了bug，怎么明明没点到也能滑动。这种需要重写父布局即“轨道”的onTouch事件。
    • 另一种，就是普通的，必须拖拽thumb才能响应事件。优点是符合日常逻辑，缺点是操作比较繁琐，如果view面积太小很容易误触，说白了就是不容易点到。这种需要重写thumb的onTouch事件，同时，由于需要滑动，thumb的通常很小，滑动体验非常不好，这时候还是需要和父布局onTouch**配合使用**。
  • 这里采用的第二种方式，大致介绍下onTouch的配合使用，这是我自己总结出来的。
  • 首先先创建一个全局变量来存储点击状态，重写子view的点击事件，判断ACTION_DOWN事件，这时候将点击状态变更为true，注意重写的点击事件方法返回值必须为faslse。
  • 然后重写父布局的点击事件，判断当前点击状态，如果为true则开始监听滑动并更新布局，并且在ACTION_UP后就点击状态变更为false。如果对手势消费事件不清楚的可以看我的另一篇文章：Android 触摸事件传递
    //拖拽事件
    thumbView.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                isTouch = true;
            }
            return false;
        }
    });

    private float lastY;
    private float transY = 0;
    private boolean isTouch = false;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isTouch) {
            return false;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                float changY = event.getY() - lastY;
                lastY = event.getY();
                transY += changY;
                moveThumb(transY);
                break;
            case MotionEvent.ACTION_UP:
                isTouch = false;
                break;
        }
        return true;
    }

以上主体功能就实现了。

补充功能

一个seekbar除了能够被用户拖动外，还需要将拖动的距离转化成对应的进度，结合需求我这里需要一个回调来通知当前的进度改变。

  • 计算进度

    我们需要计算初滑条能够被拖拽的总长度，得到总长度之后用当前拖拽距离除以总长度就能得到实际的进度。总长度=layoutHeight-thumbHeight。

    int width = View.MeasureSpec.makeMeasureSpec(0,
    View.MeasureSpec.UNSPECIFIED);
int height = View.MeasureSpec.makeMeasureSpec(0,
    View.MeasureSpec.UNSPECIFIED);
measure(width,height);
//总长度
if (totalTranY == 0) {
totalTranY = getMeasuredHeight() - thumb.getMeasuredHeight() - ((LinearLayout.LayoutParams) thumb.getLayoutParams()).topMargin * 2;
}

  • 设置回调

      //最大进度
  private int maxProgress = 100;
  //进度改变监听
  private ProgressListener mProgressListener = null;
      public interface ProgressListener {
      void onProgress(int progress);
  }
  public void setMaxProgress(int maxProgress) {
      this.maxProgress = maxProgress;
  }
  public void setOnProgressListener(ProgressListener progressListener) {
      this.mProgressListener = progressListener;
  }

优化

  • 正如刚才说的，由于拖拽条尺寸太小，很容易造成用户点不到的情况。在保证UI的不变的情况下增大拖拽面积，也就是将thumb“变大”，这里有两种方法：

    • 设置一张带有透明的图片，让拖拽条看上去很小实际上操作面积相对大。
    • 将thumb做成一个view组，由三个子view组成，分别是上透明区域、可视区域、下透明区域。
      //点击条为了方便用户点击 分为三部分，开始透明点击部分 中间显示部分 结束透明点击部分
  thumbView = new LinearLayout(getContext());
  thumbView.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
  thumbView.setOrientation(LinearLayout.VERTICAL);
  //透明点击部分高度
  mThumbHMargin = (int) PublicUtil.getInstance().dpToPx(getContext(), 10);
  //透明点击部分view
  View startView = new View(getContext());
  View endView = new View(getContext());
  LinearLayout.LayoutParams marginParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, mThumbHMargin);
  startView.setLayoutParams(marginParams);
  endView.setLayoutParams(marginParams);
  //显示部分
  View thumb = new View(getContext());
  thumb.setBackgroundColor(Color.WHITE);
  int thumbHeight = (int) PublicUtil.getInstance().dpToPx(getContext(), 4);
  LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, thumbHeight);
  layoutParams.topMargin = 5;
  layoutParams.bottomMargin = 5;
  //加入父布局
  thumb.setLayoutParams(layoutParams);
  thumbView.addView(startView);
  thumbView.addView(thumb);
  thumbView.addView(endView);
  addView(thumbView);

    ​

  • 在没有任何限制的情况下，thumb可能会被用户拖拽到页面之外，因此需要对可拖拽区域进行限制。

              case MotionEvent.ACTION_MOVE:
              float changY = event.getY() - lastY;
              lastY = event.getY();
              transY += changY;
              if (transY < 0) {
                  transY = 0;
              }
              if (transY > totalTranY) {
                  transY = totalTranY;
              }
              moveThumb(transY);
              if (mProgressListener != null) {
                  int progress = (int) (transY / totalTranY * maxProgress);
                  mProgressListener.onProgress(progress);
              }
              break;

    总结

    以上就是主要内容了，写这篇文章的目的是在不利用原生seekbar的情况下用尽可能简单的方式实现高度自定义的功能，在我看来这样要比修改seekbar更为简单和直观，出错率会更低。

    同时也是举一反三，为自定义View提供更多新的思路。

    完整代码

    /**
* Created by haoran-wang on 2/27/18.
*/
public class VerticalSeek extends FrameLayout {

  private LinearLayout thumbView;
  //最大可滑动距离
  private float totalTranY;
  //最大进度
  private int maxProgress = 100;
  //当前进度
  private int progress = 0;
  //进度改变监听
  private ProgressListener mProgressListener = null;

  private int mThumbHMargin;

  public VerticalSeek(@NonNull Context context) {
      this(context, null);
  }

  public VerticalSeek(@NonNull Context context, @Nullable AttributeSet attrs) {
      this(context, attrs, -1);
  }

  public VerticalSeek(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
      super(context, attrs, defStyleAttr);
      addThumb();
  }

  private void addThumb() {
      //点击条为了方便用户点击 分为三部分，开始透明点击部分 中间显示部分 结束透明点击部分
      thumbView = new LinearLayout(getContext());
      thumbView.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
      thumbView.setOrientation(LinearLayout.VERTICAL);
      //透明点击部分高度
      mThumbHMargin = (int) PublicUtil.getInstance().dpToPx(getContext(), 10);
      //透明点击部分view
      View startView = new View(getContext());
      View endView = new View(getContext());
      LinearLayout.LayoutParams marginParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, mThumbHMargin);
      startView.setLayoutParams(marginParams);
      endView.setLayoutParams(marginParams);
      //显示部分
      View thumb = new View(getContext());
      thumb.setBackgroundColor(Color.WHITE);
      int thumbHeight = (int) PublicUtil.getInstance().dpToPx(getContext(), 4);
      LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, thumbHeight);
      layoutParams.topMargin = 5;
      layoutParams.bottomMargin = 5;
      thumb.setLayoutParams(layoutParams);
      //拖拽事件
      thumbView.setOnTouchListener(new OnTouchListener() {
          @Override
          public boolean onTouch(View v, MotionEvent event) {
              if (event.getAction() == MotionEvent.ACTION_DOWN) {
                  isTouch = true;
              }
              return false;
          }
      });
      thumbView.addView(startView);
      thumbView.addView(thumb);
      thumbView.addView(endView);
      addView(thumbView);
      //归位
      moveThumb(0);
      //计算总长度
      int width = View.MeasureSpec.makeMeasureSpec(0,
              View.MeasureSpec.UNSPECIFIED);
      int height = View.MeasureSpec.makeMeasureSpec(0,
              View.MeasureSpec.UNSPECIFIED);
      measure(width,height);
      if (totalTranY == 0) {
          totalTranY = getMeasuredHeight() - thumb.getMeasuredHeight() - ((LinearLayout.LayoutParams) thumb.getLayoutParams()).topMargin * 2;
      }
  }

  private float lastY;
  private float transY = 0;
  private boolean isTouch = false;

  @Override
  public boolean onTouchEvent(MotionEvent event) {
      if (!isTouch) {
          return false;
      }
      switch (event.getAction()) {
          case MotionEvent.ACTION_DOWN:
              lastY = event.getY();
              break;
          case MotionEvent.ACTION_MOVE:
              float changY = event.getY() - lastY;
              lastY = event.getY();
              transY += changY;
              if (transY < 0) {
                  transY = 0;
              }
              if (transY > totalTranY) {
                  transY = totalTranY;
              }
              moveThumb(transY);
              if (mProgressListener != null) {
                  progress = (int) (transY / totalTranY * maxProgress);
                  mProgressListener.onProgress(progress);
              }
              break;
          case MotionEvent.ACTION_UP:
              isTouch = false;
              break;
      }
      return true;
  }

  private void moveThumb(float transY) {
      thumbView.setTranslationY(transY - mThumbHMargin);
  }

  public interface ProgressListener {
      void onProgress(int progress);
  }

  public void setMaxProgress(int maxProgress) {
      this.maxProgress = maxProgress;
  }

  public void setOnProgressListener(ProgressListener progressListener) {
      this.mProgressListener = progressListener;
  }

  public void setProgress(int progress) {
      this.progress = progress;
      transY = totalTranY * (progress / (float) maxProgress);
      moveThumb(transY);
  }
}

    //将需要的背景直接设置为background
   <view.VerticalSeek
       android:id="@+id/vs"
       android:layout_width="25dp"
       android:layout_height="195dp"
       android:layout_gravity="center_horizontal"
       android:background="@drawable/gaiacam_tint"/>

    ​

落叶Ex
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一起Talk Android吧（第五百四十八回：如何创建垂直版SeekBar）
talk_8的专栏
06-21 960
本章回中主要介绍了垂直版SeekBar的概念和实现方法，并且通过文字结合代码的方式进行了讲解。
垂直方向的seekbar
fei900724的专栏
05-21 711
(1)首先创建一个自定义的垂直方向的seekbar类 VerticalSeekBar (2)在布局中添加这个控件(标签为类的包名)              android:id="@+id/verticalSeekBar"          android:layout_width="wrap_content"          android:layout_height="200s
Android 垂直拖动条，垂直SeekBar实现
Benlve的博客
08-30 1835
自定义垂直SeekBar及样式
垂直的SeekBar 及问题小结
hongcha36的博客
09-13 920
最近项目中需要用到垂直的SeekBar，网上一搜有最简单的例子： public class VerticalSeekBar extends SeekBar { public VerticalSeekBar(Context context) { super(context); } public VerticalSeekBar(Context cont...
Android 垂直seekbar
司马懿的西山居
06-01 2604
android系统自带的拖动条（seekbar）只有横向，这里分享一个垂直的seekbar。 原理很简单，就是在绘制的时候将拖动条（seekbar） package com.chy.view; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; im
Android应用源码之垂直SeekBar（拖动条）.zip
12-05
4. 处理触摸事件，将滑动事件从水平转换为垂直： ```java @Override public boolean onTouchEvent(MotionEvent event) { if (!isEnabled()) { return false; } switch (event.getAction()) { case MotionEvent...
android自定义垂直seekbar
04-19
然后，我们需要监听垂直SeekBar的各种状态，如改变进度、拖动开始、拖动结束等。这可以通过设置OnSeekBarChangeListener实现： ```java VerticalSeekBar verticalSeekBar = findViewById(R.id.vertical_seekbar); ...
Android自定义垂直拖动seekbar进度条
08-28
Android自定义垂直拖动SeekBar进度条 Android自定义垂直拖动SeekBar进度条是Android开发中一个常见的需求，特别是在某些特殊的场景中，需要垂直方向的SeekBar来满足特定的设计需求。在Android系统中，SeekBar默认是...
垂直SeekBar，完美同步
11-13
本教程将深入探讨如何实现垂直SeekBar，并确保进度与thumb（滑块）的移动能够完美同步。 首先，要创建垂直SeekBar，我们需要自定义一个View类，继承自SeekBar。这个自定义类需要覆盖onDraw()方法，以改变绘制的方向...
垂直SeekBar
03-04
在某些特定的设计需求或者创新界面中，可能需要将SeekBar改为垂直方向。本篇文章将深入探讨如何在Android中实现一个自定义的垂直SeekBar。 首先，我们来理解一下 SeekBar 的基本工作原理。SeekBar 是一个基于 ...
Android自定义竖直方向SeekBar多色进度条
09-01
主要介绍了Android自定义SeekBar实现多色竖直进度条效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android-VerticalSeekBar竖直滑动条用起来比较方便
08-13
VerticalSeekBar 竖直滑动条 ，用起来比较方便
Android SeekBar 自定义 背景图片 和 滑块图片
OneN的博客
01-04 3347
1.布局 说明：android:background="@null" 去除 滑块的点击效果，android:splitTrack="false" 去除滑块的白色背景 <SeekBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:max="4" android:progress="2" android:maxHeight="8dp"
Android SeekBar设置为垂直的布局
zyp009的专栏
03-14 3008
在网站找了垂直布局的seekbar方法http://blog.csdn.net/jiahui524/article/details/8188651 自己实践了下。在修改seekbar的背景图片时发现得把图片顺时针倾斜90度才能把图片完全显示出来。 如下图片heart7.png 图片heart8.png： 图片jian.png seekbar的垂直布局就是垂直显示完
Android开发之利用seekbar与网络实现图片的旋转与缩放（二）
wuluo的博客
03-09 552
在上一篇：https://blog.csdn.net/qq_43433255/article/details/88363948 简单介绍了，如何利用seekbar进行图片的旋转与缩放，但只能是一张图片，而且还只能是本地的图片，这次，利用网络的方式，实现多张图片的旋转与缩放； 界面的设计： 布局的代码： &lt;?xml version="1.0" encoding="utf-8"?&gt; &l...
自定义Seekbar
热门推荐
少爷
05-28 2万+
效果图： 好了直接上代码： 1：先看布局文件： <com.android.camera.ui.EffectSettingPopupModify xmlns:android="http://schemas.android.com/apk/res/android" style="@style/EffectSettingPopupWindow" an
自定义SeekBar样式
lplj717的博客
05-09 1828
首先来看看效果图： 这里的自定只定义了一个是seekBar的进度条颜色，另一个是thumb滑块的颜色 进度条的颜色drawable->seekbar.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/backgrou
垂直进度条VerticalSeekBar
明光的博客
07-23 5842
水平的进度条见多了，总会想见个垂直的进度条开开眼。今天咱就试试。 要说原理也简单，就是把宽高倒置，其他的理论上都不需要动，发现问题再补补也就行了。官方提供官方是提供了垂直进度条的例子源码的，位置在android-sdk-windows\sources\android-23\com\android\example\rscamera\VerticalSeekBar.java，当然首先你SDK中要有An
Android开发之如何自定义垂直方向的SeekBar
啊sir的专栏
12-12 3987
SeekBar进度条在项目开发过程中使用的太频繁了，比如媒体播放器当前播放的时间进度等。那么今天将对seekbar的使用做一个总结，后面写工作要用到直接过来copy就好。这边seekbar的使用分为横向和纵向两种显示方式。先上效果图，如下： 左边第一条是本人工作项目中EQ应用提取出来的，实现方式为自定义view继承自imageview来绘制完成，过程也是相当得简单，无非就是draw几张bitmap
android seekbar垂直
最新发布
08-18
要Android中实现垂直的SeekBar，可以通过自定义SeekBar的外观来实现。以下是一种可能的实现方式： 1. 创建一个自定义的垂直SeekBar类，继承自SeekBar类： ```java public class VerticalSeekBar extends SeekBar {...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值