Android自定义垂直触摸控制进度条实现

本文还有配套的精品资源,点击获取 menu-r.4af5f7ec.gif

简介:在Android开发中,通过继承 ProgressBar 类和重写 onTouchEvent 方法,可以创建一个可触摸控制的垂直进度条。用户可以通过上下滑动来调整进度,为应用提供直观的交互。实现时,需要记录触摸开始的位置,并在触摸移动时根据位置计算进度变化。在触摸结束时,可以通知监听器进度已完成。此外,还需在布局文件中配置自定义进度条的属性,以及在Activity或Fragment中设置进度改变的监听器,以响应用户的操作。开发者可以根据需要自定义进度条的外观和行为。 触摸控制垂直进度条的进度

1. 触摸控制垂直进度条的进度

在移动应用开发中,进度条是一个常见的用户界面元素,用于显示任务的执行进度。本章我们将探讨如何通过触摸控制垂直进度条的进度,以及相关的开发细节。

触摸控制基础

要实现触摸控制进度条,我们需要理解两个关键的方法: onInterceptTouchEvent onTouchEvent onInterceptTouchEvent 允许一个View在其子View上拦截触摸事件,而 onTouchEvent 则处理具体的触摸事件。

示例代码

以下是一个简单的示例代码,展示如何开始实现触摸控制垂直进度条:

public class VerticalSeekBar extends SeekBar {

    public VerticalSeekBar(Context context) {
        super(context);
    }

    public VerticalSeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public VerticalSeekBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isEnabled()) {
            return false;
        }

        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_UP:
                setProgress(getMax() - (int)(getMax() * event.getY() / getHeight()));
                onProgressChanged(this, getProgress(), false);
                break;
        }
        return true;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
    }
}

在这个示例中,我们重写了 onTouchEvent 方法,并根据触摸位置更新进度条的进度值。这只是一个基础的实现,更高级的功能如滑动速度检测、触摸反馈等将在后续章节中讨论。

通过本章的介绍,我们已经对触摸控制进度条的基本原理有了初步了解,并通过实际代码演示了进度条进度的控制。在下一章中,我们将深入探讨如何创建自定义进度条类,并在继承自ProgressBar类的基础上进行扩展。

2. 自定义进度条的创建与继承

2.1 创建自定义进度条类

2.1.1 继承ProgressBar类的优势

在Android开发中,为了适应特定的UI需求,开发者常常需要创建自定义的视图组件。继承现有的组件,特别是像 ProgressBar 这样的基础组件,是实现自定义控件的有效途径之一。

继承 ProgressBar 类,我们可以获得以下几个优势:

  • 继承现有的功能 ProgressBar 已经具备了进度条的基本功能,如显示进度、更改进度颜色等。继承它可以使我们从这些基础功能开始,快速构建出更复杂的自定义进度条。
  • 简化开发过程 :直接继承可以让我们减少重复编写相同的代码,专注于自定义逻辑的实现。

  • 易于维护和扩展 :由于是在现有类的基础上进行扩展,所以未来对进度条的更新和维护会变得相对简单。

创建自定义进度条的第一步就是创建一个继承自 ProgressBar 的类,如下所示:

public class CustomProgressBar extends ProgressBar {
    // 构造函数
    public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 初始化自定义属性
    }

    // 可以在这里添加自定义方法来实现特定的功能
}
2.1.2 设计类的结构和属性

设计自定义进度条类时,要考虑类的结构和属性如何反映其独特的需求。例如,如果我们要实现一个带有触摸控制功能的进度条,那么我们的类可能需要以下属性:

  • 最大值(max) :用于确定进度条的最大范围。
  • 当前值(current) :表示当前进度条的位置。
  • 触摸模式(touchMode) :用来标记进度条是否正在被触摸。

除了这些属性,我们还需要在自定义的进度条类中定义方法来更新这些属性。比如,一个 setCurrentProgress 方法可以用来更新进度条当前的位置。同时,我们需要在XML布局文件中为自定义进度条添加属性,以便在布局文件中使用时可以设置这些属性值。

2.2 实现触摸事件的继承与重写

2.2.1 触摸事件的种类与功能

在自定义进度条中,处理触摸事件是提供交互体验的关键。触摸事件主要可以分为以下几种类型:

  • ACTION_DOWN :手指刚接触到屏幕时触发。
  • ACTION_MOVE :手指在屏幕上移动时触发。
  • ACTION_UP :手指离开屏幕时触发。
  • ACTION_CANCEL :由于某些原因手指离开屏幕而没有触发ACTION_UP时触发。

对于进度条来说,我们主要关注 ACTION_DOWN ACTION_MOVE 事件,因为这些事件能够帮助我们跟踪用户触摸屏幕时的进度位置。 ACTION_UP 可以用来确认用户完成操作,而 ACTION_CANCEL 可以用来处理触摸被取消时的逻辑。

2.2.2 onInterceptTouchEvent与onTouchEvent的协同作用

在自定义进度条中, onInterceptTouchEvent onTouchEvent 方法的协同工作至关重要。 onInterceptTouchEvent 方法允许我们的自定义进度条拦截触摸事件,而 onTouchEvent 则是处理具体的触摸事件。

在某些情况下,进度条需要决定是处理触摸事件还是让事件继续传递给更上层的视图。例如,如果我们正在触摸进度条上滑动以改变进度,那么我们拦截事件并处理它。如果触摸并不影响进度条的显示(比如触摸的是进度条旁边的空间),则可以允许事件传递给父视图。

一个简单的实现方式如下:

@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // 拦截触摸事件
            return true;
        case MotionEvent.ACTION_MOVE:
            // 根据需要决定是否拦截
            return true;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            // 不拦截,允许事件传递给onTouchEvent处理
            return false;
    }
    return super.onInterceptTouchEvent(event);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (mIsBeingTouched) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                // 根据滑动距离计算进度变化
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                // 停止触摸
                mIsBeingTouched = false;
                break;
        }
    }
    return true;
}

通过上述代码,我们实现了触摸事件的基本处理逻辑,并且可以根据实际情况来调整进度条的进度值。在 ACTION_MOVE 的处理逻辑中,我们可以获取手指在屏幕上的移动距离,并据此更新进度条的显示。

3. 进度条触摸事件处理及进度计算

3.1 触摸事件的处理方法

3.1.1 onInterceptTouchEvent的作用与实现

onInterceptTouchEvent ViewGroup 中一个非常重要的方法,其作用是在事件传递给子视图之前,让父容器有机会拦截触摸事件。在实现自定义进度条时,我们可以通过重写此方法来控制触摸事件的流向。

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    final int action = ev.getAction();
    if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
        // 如果是抬起或取消事件,则不拦截,直接传递给子视图处理
        return false;
    }
    // 根据当前进度条的状态和触摸点的坐标,决定是否拦截事件
    // 例如,可以判断触摸点是否在进度条的可拖动区域内
    if (isInDraggableArea(ev.getX(), ev.getY())) {
        return true; // 拦截事件,自己处理
    }
    return false; // 不拦截,传递给子视图
}

private boolean isInDraggableArea(float x, float y) {
    // 判断触摸点是否在进度条可拖动区域内
    // 具体实现取决于进度条的设计与布局
    // 返回true表示触摸点在可拖动区域,返回false则表示不在
}

在上述代码中,我们首先检查触摸事件的类型,如果是抬起或取消,则直接返回false以不拦截事件。否则,通过自定义的 isInDraggableArea 方法判断触摸点是否在进度条的可拖动区域内,如果在则返回true拦截事件,否则返回false不拦截。这种方式允许我们精确控制触摸事件的流向,为进度条的使用提供更多的灵活性。

3.1.2 onTouchEvent中的事件处理逻辑

onTouchEvent 方法是所有 View 都能响应的触摸事件处理方法,自定义进度条自然也不例外。它用于处理触摸事件,包括按压、移动、抬起等动作。

@Override
public boolean onTouchEvent(MotionEvent event) {
    // 这里处理具体的触摸逻辑,例如拖动滑块改变进度
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // 按下事件,标记为按下状态,并记录按下的位置
            break;
        case MotionEvent.ACTION_MOVE:
            // 移动事件,计算移动距离并更新进度
            break;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            // 抬起或取消事件,标记为非按下状态,执行必要的操作
            break;
    }
    return true; // 返回true表示此事件已经处理完毕,后续事件可继续传递给此视图
}

onTouchEvent 中,我们通过检查 event.getAction() 来判断当前是哪种类型的触摸事件,并作出相应的处理。例如,在按下事件中,我们记录按下的位置;在移动事件中,计算移动距离并更新进度条的进度值;在抬起或取消事件中,结束拖拽并完成进度更新。

重要的是,在 onTouchEvent 方法中,我们可以通过 event.getX() event.getY() 获取触摸点的坐标,进一步结合进度条的状态与布局来计算和更新进度。例如,根据触摸点的位置和进度条的总长度计算出触摸点在进度条上的相对位置,然后根据这个位置来更新进度条的进度值。

3.2 进度变化的计算与反馈

3.2.1 进度计算公式与算法

进度条的进度变化计算是通过数学公式来实现的,需要根据触摸点的位置和进度条的总长度来计算进度值。这里我们介绍一个常见的计算方式。

private int calculateProgress(float touchX) {
    // 假设进度条的宽度为progressWidth,总长度为totalLength
    float progressWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
    float totalLength = getLayoutWidth(); // 布局文件中定义的进度条长度
    // 计算触摸点在进度条上的位置比例
    float positionRatio = touchX / totalLength;
    // 根据比例计算进度值,这里假设进度值范围为0到maxProgress
    int progress = (int) (positionRatio * getMaxProgress());
    return progress;
}

在上述代码中, calculateProgress 方法接收触摸点的X坐标作为参数,计算触摸点在进度条上的位置比例,然后通过这个比例来计算出实际的进度值。这个方法在 onTouchEvent 的移动事件处理中被调用。

3.2.2 进度更新机制与用户反馈

进度更新机制是进度条中最关键的部分之一,它负责根据用户的操作来更新进度条显示的进度,并向用户反馈进度变化。

private void updateProgress(int newProgress) {
    // 更新进度条的进度值
    setProgress(newProgress);
    // 刷新进度条的显示
    invalidate();
    // 回调进度更新事件(如果有)
    if (onProgressChangeListener != null) {
        onProgressChangeListener.onProgressChanged(newProgress);
    }
}

// 触摸事件中更新进度条
@Override
public boolean onTouchEvent(MotionEvent event) {
    // ... 其他事件处理代码 ...
    case MotionEvent.ACTION_MOVE:
        // 计算新进度值
        int newProgress = calculateProgress(event.getX());
        // 更新进度条进度并刷新显示
        updateProgress(newProgress);
        break;
    // ... 其他事件处理代码 ...
}

在上面的代码示例中, updateProgress 方法负责更新进度条的进度值并刷新显示。在触摸事件处理中,当检测到移动事件时,我们计算出新的进度值并调用 updateProgress 方法来更新进度条。此外,如果进度条类实现了进度变化监听器(例如 OnProgressChangeListener ),那么在进度更新时,还可以回调监听器的方法通知外部进度变化事件。

进度更新的反馈机制不仅包括视觉上的变化,如进度条的长度或颜色变化,还可以包括听觉反馈,如进度变化时播放声音,以及触觉反馈,如通过手机振动来提醒用户进度完成。这些反馈机制可以显著提升用户体验,让用户更加直观地感知到进度条的状态变化。

4. 进度条完成事件回调与界面布局

4.1 进度完成事件的回调机制

在任何进度条控件中,完成进度是一个重要的事件点,它允许开发者在进度达到100%时执行特定的逻辑。设置与触发进度完成事件是通过回调机制实现的,我们可以通过实现特定的接口或覆写方法来完成此功能。

4.1.1 设置与触发进度完成事件

我们首先定义一个回调接口,该接口包含一个方法用于处理进度完成事件。进度条的实例需要调用这个接口中的方法,以便在进度完成时通知应用程序。

public interface OnProgressCompleteListener {
    void onProgressComplete();
}

然后,我们在自定义进度条类中添加一个成员变量来持有此接口的实例,并在进度完成时调用该实例的 onProgressComplete 方法。

public class CustomProgressBar extends ProgressBar {

    private OnProgressCompleteListener listener;

    public CustomProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    // 设置进度完成事件的监听器
    public void setOnProgressCompleteListener(OnProgressCompleteListener listener) {
        this.listener = listener;
    }

    // 模拟进度完成事件的触发
    public void simulateProgressComplete() {
        // 假设进度完成
        if (this.listener != null) {
            this.listener.onProgressComplete();
        }
    }
}

4.1.2 回调接口的设计与实现

回调接口的设计需要考虑易用性和灵活性。在实现此接口的类中,我们需要定义进度完成时所需执行的具体逻辑。

public class ProgressCompleteHandler implements OnProgressCompleteListener {
    @Override
    public void onProgressComplete() {
        // 进度完成时的逻辑
        Toast.makeText(getContext(), "Progress Complete!", Toast.LENGTH_SHORT).show();
    }
}

我们创建了一个 ProgressCompleteHandler 类来实现 OnProgressCompleteListener 接口,并在 onProgressComplete 方法中执行了弹出Toast提示的逻辑。这个处理类可以被绑定到我们的自定义进度条上,用于处理进度完成事件。

CustomProgressBar progressBar = findViewById(R.id.custom_progressbar);
progressBar.setOnProgressCompleteListener(new ProgressCompleteHandler());
progressBar.simulateProgressComplete(); // 模拟进度完成事件的触发

以上代码展示了如何在Android应用程序中设置进度完成事件的回调,并通过模拟触发来测试其功能。

4.2 垂直进度条在布局文件中的定义

在界面布局中,进度条通常通过XML布局文件定义,以便开发者可以灵活地控制其外观和行为。自定义进度条的XML属性可以帮助开发者在布局中实现期望的视觉效果。

4.2.1 XML布局属性的设置

通过XML文件,开发者可以设置进度条的大小、颜色和其他样式属性。下面是一个简单的例子,展示了如何在一个布局文件中定义一个垂直进度条:

<com.example.customview.CustomProgressBar
    android:id="@+id/custom_progressbar"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:progressDrawable="@drawable/custom_progress_bar_drawable"
    android:max="100"
    android:progress="50"
    android:indeterminate="false"
    android:padding="16dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

在这里,我们设置了进度条的宽度和高度、进度绘制器(通过 android:progressDrawable 属性)、进度的最大值和当前值。我们还可以添加一些内边距以及约束其在布局中的位置。

4.2.2 布局属性对进度条外观的影响

布局属性不仅影响进度条在屏幕上的位置和尺寸,还会影响用户的交互体验。例如, padding 属性增加了进度条四周的空间,使得用户更容易触摸进行操作。

进度条的外观也可以通过进度绘制器( progressDrawable )自定义。进度绘制器是一个可绘制资源文件(drawable resource),它定义了进度条的视觉表现。开发者可以通过定义一个shape drawable或者使用其他复杂的图形文件来设定进度条的颜色、渐变、形状等属性。

下面是一个简单的自定义进度条绘制器的XML代码:

<!-- res/drawable/custom_progress_bar_drawable.xml -->
<layer-list xmlns:android="***">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="3dp" />
            <gradient
                android:angle="270"
                android:endColor="#666666"
                android:startColor="#999999"
                android:type="linear" />
            <size android:height="10dp" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="3dp" />
                <gradient
                    android:angle="270"
                    android:endColor="#87CEFA"
                    android:startColor="#AFEEEE"
                    android:type="linear" />
                <size android:height="10dp" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="3dp" />
                <gradient
                    android:angle="270"
                    android:endColor="#FFD700"
                    android:startColor="#FF8C00"
                    android:type="linear" />
                <size android:height="10dp" />
            </shape>
        </clip>
    </item>
</layer-list>

通过调整这些XML布局属性和可绘制资源,我们可以创建出适应应用设计和用户体验需求的垂直进度条。

5. 自定义进度条外观与行为

5.1 实现自定义进度条外观

5.1.1 属性动画与进度条视觉效果

为了提升用户体验,我们需要对进度条的外观进行自定义。通过使用属性动画,我们可以实现进度条的平滑过渡和多种视觉效果。例如,进度条在加载时显示颜色渐变效果,或者在完成时显示跳动的动画。

在Android开发中,我们可以使用 ObjectAnimator 类来实现属性动画,改变进度条的颜色或大小。下面的代码展示了如何通过属性动画逐渐改变进度条的颜色:

ObjectAnimator colorAnim = ObjectAnimator.ofInt(mProgressBar, "backgroundColor", 0xFFFF0000, 0xFF00FF00);
colorAnim.setDuration(1000);
colorAnim.setRepeatCount(ObjectAnimator.INFINITE);
colorAnim.setRepeatMode(ObjectAnimator.REVERSE);
colorAnim.start();

此代码片段定义了一个颜色动画,使得进度条背景颜色在红色和绿色之间无限循环变化。

5.1.2 横线、圆形等多样进度条样式实现

除了线性的进度条,开发者还可以实现不同形状的进度条,如圆形进度条和环形进度条。这需要我们自定义一个 View 来绘制这些形状,并在其中实现进度更新逻辑。

下面是一个简单的圆形进度条绘制示例,使用了 Canvas 类来绘制进度条:

protected void onDraw(Canvas canvas) {
    // 绘制外圆
    Paint paint = new Paint();
    paint.setColor(Color.GRAY);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(10);
    canvas.drawCircle(mCenterX, mCenterY, mRadius, paint);

    // 绘制内圆(进度部分)
    paint.setColor(Color.BLUE);
    paint.setStyle(Paint.Style.FILL);
    canvas.drawArc(mRectF, -90, 360 * mProgress, true, paint);
}

这段代码在 onDraw 方法中,使用 Canvas 类绘制了一个圆形进度条,其中 mCenterX mCenterY 定义了圆心位置, mRadius 定义了圆的半径。 mRectF 定义了绘制进度条的矩形区域。

5.2 扩展进度条行为与监听器

5.2.1 OnProgressChangedListener监听器的实现

为了在进度变化时触发特定行为,我们需要扩展进度条的行为,并提供相应的监听器。例如, OnProgressChangedListener 监听器可以在进度条进度发生变化时触发。

下面是一个简单的监听器接口实现示例:

public interface OnProgressChangedListener {
    void onProgressChanged(ProgressBar progressBar, int progress, boolean fromUser);
}

public void setOnProgressChangedListener(OnProgressChangedListener listener) {
    mProgressChangedListener = listener;
}

protected void onProgressUpdate(int progress) {
    if (mProgressChangedListener != null) {
        mProgressChangedListener.onProgressChanged(this, progress, true);
    }
}

在此示例中,我们定义了一个 OnProgressChangedListener 接口,并在进度条更新时调用此接口的方法。

5.2.2 进度条行为的扩展与优化

为了使进度条更符合不同的应用场景,我们需要根据具体需求对进度条的行为进行扩展。这可能包括增加触摸反馈、增加最大值/最小值的设定、甚至是引入多线程处理以优化性能。

例如,可以设计进度条在达到特定值时改变颜色,或者在用户拖动进度条时显示即时反馈:

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_MOVE:
            // 更新进度条并显示触摸反馈
            updateProgress(event.getX());
            setProgressColorBasedOnTouch();
            return true;
        case MotionEvent.ACTION_UP:
            // 触摸结束,重置触摸反馈
            resetTouchFeedback();
            return true;
    }
    return super.onTouchEvent(event);
}

private void updateProgress(float x) {
    // 计算进度更新逻辑
    int progress = (int) (x / mProgressBar.getWidth() * mProgressBar.getMax());
    setProgress(progress);
}

private void setProgressColorBasedOnTouch() {
    // 根据触摸位置改变进度条颜色
    mProgressBar.setProgressDrawable(ContextCompat.getDrawable(getContext(), R.drawable.progress_barTouchable));
}

private void resetTouchFeedback() {
    // 重置触摸反馈,如恢复原进度条颜色
    mProgressBar.setProgressDrawable(ContextCompat.getDrawable(getContext(), R.drawable.progress_barNormal));
}

在该代码片段中,我们通过覆盖 onTouchEvent 方法来响应用户的触摸事件,并根据触摸的位置更新进度条的颜色状态。这样,用户在拖动进度条时可以看到即时的视觉反馈。

以上示例展示了如何通过监听触摸事件和调整进度条的视觉反馈来增强进度条的行为。通过这些技术手段,可以使进度条的行为更加丰富,并且提升用户交互体验。

本文还有配套的精品资源,点击获取 menu-r.4af5f7ec.gif

简介:在Android开发中,通过继承 ProgressBar 类和重写 onTouchEvent 方法,可以创建一个可触摸控制的垂直进度条。用户可以通过上下滑动来调整进度,为应用提供直观的交互。实现时,需要记录触摸开始的位置,并在触摸移动时根据位置计算进度变化。在触摸结束时,可以通知监听器进度已完成。此外,还需在布局文件中配置自定义进度条的属性,以及在Activity或Fragment中设置进度改变的监听器,以响应用户的操作。开发者可以根据需要自定义进度条的外观和行为。

本文还有配套的精品资源,点击获取 menu-r.4af5f7ec.gif

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值