如何用移动线指示器显示QR码扫描进度?

时间:2016-04-16 11:20:30

标签: android qr-code

我希望在我的Android应用程序中打开相机时显示一条在屏幕上移动的线。类似于在条形码扫描仪应用程序中移动的线。就像图中显示的白线一样。该线可以从上到下,从下到上连续移动。

enter image description here

2 个答案:

答案 0 :(得分:1)

为此,您需要创建自定义视图并覆盖onDraw方法,如下所示:

public class MyScanningView extends View {
private Paint paint = new Paint();
private int mPosY = 0;
private boolean runAnimation = true;
private boolean showLine = true;
private Handler handler;
private Runnable refreshRunnable;
private boolean isGoingDown = true;
private int mHeight;

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

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

public MyScanningView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    paint.setColor(Color.WHITE);
    //Add anything else you want to customize your line, like the stroke width
    handler = new Handler();
    runnable = new Runnable() {
                        @Override
                        public void run() {
                          refreshView();
                        }
                    }
}

@Override
public void onDraw(Canvas canvas) {
    mHeight = canvas.getHeight();
    if (showLine) {
      canvas.drawLine(0, mPosY, canvas.getWidth(), mPosY, paint);
    }
    if (runAnimation) {
      handler.postDelayed(refreshRunnable, DELAY);
    }
}

public void startAnimation() {
    runAnimation = true;
    showLine = true;
    this.invalidate();
}

public void stopAnimation() {
    runAnimation = false;
    showLine = false;
    reset();
    this.invalidate();
}

private void reset() {
  mPosY = 0;
  isGoingDown = true;
}

private void refreshView() {
  //Update new position of the line
  if (isGoingDown) {
    mPosY += 5;
    if (mPosY > mHeight) {
      //We invert the direction of the animation
      mPosY = mHeight;
      isGoingDown = false;
  } else {
    mPosY -= 5;
    if (mPosY < 0) {
      //We invert the direction of the animation
      mPosY = 0;
      isGoingDown = true;
    }
this.invalidate();
}

}

然后只需将此视图添加到您的activy_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/main_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
  <com.//wherever_is_your_view.MyScanningView
    android:id="@+id/scanningView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

在您的MainActivity中:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    MyScanningView scanningView = (MyScanningView) findViewById(R.id.scanningView);
}

答案 1 :(得分:0)

使用下面的代码并在xml中创建它的视图,限制在drawline方法上扫描的限制。 使用ScanningIndicator的object.startAnimation()开始动画。

public class ScanningIndicator extends View {
private Paint paint = new Paint();
private int mPosY = 0;
private boolean runAnimation = true;
private boolean showLine = true;
private Handler handler;
private Runnable refreshRunnable;
private boolean isGoingDown = true;
private int mHeight;

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

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

public ScanningIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    paint.setColor(Color.RED);
    paint.setStrokeWidth(5.0f);
    //Add anything else you want to customize your line, like the stroke width
    handler = new Handler();
    refreshRunnable = new Runnable() {
        @Override
        public void run() {
            refreshView();
        }
    };
}

@Override
public void onDraw(Canvas canvas) {
    mHeight = canvas.getHeight();
    if (showLine) {
         canvas.drawLine(0, mPosY, canvas.getWidth(), mPosY, paint);
    }
    if (runAnimation) {
        handler.postDelayed(refreshRunnable, 0);
    }
}

public void startAnimation() {
    runAnimation = true;
    showLine = true;
    this.invalidate();
}

public void stopAnimation() {
    runAnimation = false;
    showLine = false;
    reset();
    this.invalidate();
}

private void reset() {
    mPosY = 0;
    isGoingDown = true;
}

private void refreshView() {
    //Update new position of the line
    if (isGoingDown) {
        mPosY += 5;
        if (mPosY > mHeight) {            
            mPosY = mHeight;
            isGoingDown = false;
        }
    } else {
        //We invert the direction of the animation
        mPosY -= 5;
        if (mPosY < 0) {
            mPosY = 0;
            isGoingDown = true;
        }
    }
    this.invalidate();
}
}