我将如何实现这样的基于滑动的循环控件? [英] How would I implement a swipe-based circular control like this?

问题描述

我正在使用Android应用程序，并且有一个TextView，其中显示了价格(例如50美元).

I am working on an Android application, and I have a TextView where I display a price (for example 50$).

我想要一个类似于此图片的圆形控件:

I would like to have a circular control similar to this picture:

• 在表盘上顺时针滑动手指可将金额增加$ 1步
• 在表盘上逆时针滑动手指会减少数量按$ 1步

我做了一些研究，但找不到可以执行此操作的有效实现方式.

I did some research but couldn't find a working implementation of something to do this.

如何创建由滑动驱动的圆形控件?

How could you create such a circular control driven by swipes?

推荐答案

我已经修改了 circularseekbar 的源你要.

I've modified the source of circularseekbar to work as you want.

您可以从修改后的cirucularseekbar

首先将控件包含在布局中，然后将拨号盘设置为背景

First Include the control in your layout and set your dial as a background

            <com.yourapp.CircularSeekBar
                android:id="@+id/circularSeekBar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/amount_wheel_bg" />

然后，在您的活动(应该实现OnCircularSeekBarChangeListener)中添加以下内容:

Then, in your activity (it should implement OnCircularSeekBarChangeListener) add the following:

//This is a reference to the layout control
private CircularSeekBar circularSeekBar;
//This is a reference to the textbox where you want to display the amount
private EditText amountEditText;
private int previousProgress = -1;

并添加以下回调方法:

@Override
   public void onProgressChanged(CircularSeekBar circularSeekBar,
                 int progress, boolean fromUser) {
          if(previousProgress == -1)
          {
                 //This is the first user touch we take it as a reference
                 previousProgress = progress;
          }
          else
          {
                 //The user is holding his finger down
                 if(progress == previousProgress)
                 {
                       //he is still in the same position, we don't do anything
                 }
                 else
                 {
                       //The user is moving his finger we need to get the differences

                       int difference = progress - previousProgress;                        

                       if(Math.abs(difference) > CircularSeekBar.DEFAULT_MAX/2)
                       {
                              //The user is at the top of the wheel he is either moving from the 0 -> MAx or Max -> 0
                              //We have to consider this as 1 step 

                              //to force it to be 1 unit and reverse sign;
                              difference /= Math.abs(difference); 
                              difference -= difference;

                       }                          
                       //update the amount
                       selectedAmount += difference;
                        previousProgress= progress;
                       updateAmountText();
                 }
          }

   }

   @Override
   public void onStopTrackingTouch(CircularSeekBar seekBar) {

          //reset the tracking progress
          previousProgress = -1;

   }

   @Override
   public void onStartTrackingTouch(CircularSeekBar seekBar) {

   }

   private void updateAmountText()
   {
          amountEditText.setText(String.format("%.2f", selectedAmount));
   }

selectedAmount是用于存储所选金额的双精度属性.

selectedAmount is a double property to store the amount selected.

我希望这可以为您提供帮助.

I hope this can help you.

这篇关于我将如何实现这样的基于滑动的循环控件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！