如何顯示正在移動的線條以顯示進行中的掃描？

Question

我想從我的android應用程序打開相機時顯示一條線來回移動屏幕。 （就像在條碼掃描器應用程序中移動的那條線一樣）。 Like the white line shown in the image. The line can move from top to bottom and bottom to top continuously

Answer 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); 
} 

Answer 2

使用下面的代碼並在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(); 
} 
}