2016-08-05 15 views
5

以下の図のような簡単な波形を自分のコードで生成しました。Androidで波形のようなサウンドクラウドを取得する方法

enter image description here

しかし、私は、私はそれが以下のようなpicutreてSoundcloud波のようになりたい各行の間に複数のギャップを与えたいです。ここで

enter image description here

私のコードです:ように多くの時間からそれに引っかかっ

public class VisualizerView extends View { 
    private static final int LINE_WIDTH = 15; // width of visualizer lines 
    private static final int LINE_SCALE = 55; // scales visualizer lines 
    private List<Float> amplitudes; // amplitudes for line lengths 
    private int width; // width of this View 
    private int height; // height of this View 
    private Paint linePaint; // specifies line drawing characteristics 

    // constructor 
    public VisualizerView(Context context, AttributeSet attrs) { 
     super(context, attrs); // call superclass constructor 
     linePaint = new Paint(); // create Paint for lines 
     linePaint.setColor(Color.parseColor("#a4410e")); // set color to green 
     linePaint.setStrokeWidth(LINE_WIDTH); // set stroke width 
    } 

    // called when the dimensions of the View change 
    @Override 
    protected void onSizeChanged(int w, int h, int oldw, int oldh) { 
     width = w; // new width of this View 
     height = h; // new height of this View 
     amplitudes = new ArrayList<Float>(width/LINE_WIDTH); 
    } 

    // clear all amplitudes to prepare for a new visualization 
    public void clear() { 
     amplitudes.clear(); 
    } 

    // add the given amplitude to the amplitudes ArrayList 
    public void addAmplitude(float amplitude) { 
     amplitudes.add(amplitude); // add newest to the amplitudes ArrayList 

     // if the power lines completely fill the VisualizerView 
     if (amplitudes.size() * LINE_WIDTH >= width) { 
      amplitudes.remove(0); // remove oldest power value 
     } 
    } 

    // draw the visualizer with scaled lines representing the amplitudes 
    @Override 
    public void onDraw(Canvas canvas) { 
     int middle = height/2; // get the middle of the View 
     float curX = 0; // start curX at zero 

     // for each item in the amplitudes ArrayList 
     for (float power : amplitudes) { 
      float scaledHeight = power/LINE_SCALE; // scale the power 
      curX += LINE_WIDTH; // increase X by LINE_WIDTH 

      Log.e("crux",String.valueOf(curX)); 

      // draw a line representing this item in the amplitudes ArrayList 
      canvas.drawLine(curX, middle + scaledHeight/2, curX, middle 
        - scaledHeight/2, linePaint); 
     } 
    } 

} 

誰かがそれから

+0

を変更することにより、あなたは私はあなたがこの事を実装する方法教えてくださいことはできますか?私はこのクラスを使って波形を表示する方法を意味しますか? –

答えて

7

私を取得してください私はあなたの中にランダムな変化を試してみました必要な出力を得ました

は、次の2行

private static final int LINE_WIDTH = 2 (from 15 to 2); // width of visualizer lines 
curX += LINE_WIDTH+5; // increase X by LINE_WIDTH (adding +5) 

public class VisualizerView extends View { 
    private static final int LINE_WIDTH = 2; // width of visualizer lines 
    private static final int LINE_SCALE = 55; // scales visualizer lines 
    private List<Float> amplitudes; // amplitudes for line lengths 
    private int width; // width of this View 
    private int height; // height of this View 
    private Paint linePaint; // specifies line drawing characteristics 

    // constructor 
    public VisualizerView(Context context, AttributeSet attrs) { 
     super(context, attrs); // call superclass constructor 
     linePaint = new Paint(); // create Paint for lines 
     linePaint.setColor(Color.parseColor("#a4410e")); // set color to green 
     linePaint.setStrokeWidth(LINE_WIDTH); // set stroke width 
    } 

    // called when the dimensions of the View change 
    @Override 
    protected void onSizeChanged(int w, int h, int oldw, int oldh) { 
     width = w; // new width of this View 
     height = h; // new height of this View 
     amplitudes = new ArrayList<Float>(width/LINE_WIDTH); 
    } 

    // clear all amplitudes to prepare for a new visualization 
    public void clear() { 
     amplitudes.clear(); 
    } 

    // add the given amplitude to the amplitudes ArrayList 
    public void addAmplitude(float amplitude) { 
     amplitudes.add(amplitude); // add newest to the amplitudes ArrayList 

     // if the power lines completely fill the VisualizerView 
     if (amplitudes.size() * LINE_WIDTH >= width) { 
      amplitudes.remove(0); // remove oldest power value 
     } 
    } 

    // draw the visualizer with scaled lines representing the amplitudes 
    @Override 
    public void onDraw(Canvas canvas) { 
     int middle = height/2; // get the middle of the View 
     float curX = 0; // start curX at zero 

     // for each item in the amplitudes ArrayList 
     for (float power : amplitudes) { 
      float scaledHeight = power/LINE_SCALE; // scale the power 
      curX += LINE_WIDTH+5; // increase X by LINE_WIDTH 

      Log.e("crux",String.valueOf(curX)); 

      // draw a line representing this item in the amplitudes ArrayList 
      canvas.drawLine(curX, middle + scaledHeight/2, curX, middle 
        - scaledHeight/2, linePaint); 
     } 
    } 

} 
+0

大丈夫私にお試しください –

+0

それは完全に感謝しました:D –

+0

私はあなたの解決策に問題に直面している。 'curX + = LINE_WIDTH + 5; 'を使用すると、長い時間の経過後に波形がスクロールし始めます。 'curX + = LINE_WIDTH'を使うと、スクロールの問題でうまく動作します。 –

関連する問題