2016-08-05 17 views
5

Ich habe eine einfache Wellenform wie das Bild unten mit meinem Code generiert.Wie bekomme ich eine Soundcloud wie Wellenformen in Android

enter image description here

Aber ich will mehr Lücke zwischen jeder Zeile geben, die ich es unten wie die Soundcloud Wellen wie die picutre sein wollen.

enter image description here

Hier ist mein Code:

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

} 

drauf Fest von so vielen Stunden bitte jemand mich aus ihm heraus

+0

Ändern Können Sie mir bitte mitteilen, wie Sie diese Sache umgesetzt? Ich meine, wie man diese Klasse verwendet, um die Wellenform zu zeigen? –

Antwort

7

ich die zufällige Veränderungen versucht, in Ihre Code und bekam den gewünschten Ausgang, den Sie benötigten

durch diese beiden Linien

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

okay, lass mich es versuchen –

+0

Das hat perfekt funktioniert danke: D –

+0

Ich habe ein Problem mit Ihrer Lösung. Wenn ich 'curX + = LINE_WIDTH + 5;' verwende, beginnt die Wellenform nach einer langen Zeit zu scrollen. Die Verwendung von 'curX + = LINE_WIDTH' funktioniert gut mit Scrollproblemen. –