2016-08-05 22 views
5

Wygenerowałem prosty przebieg analogiczny jak na poniższym obrazku z moim kodem.Jak uzyskać SoundCloud jak fale w Androidzie

enter image description here

Ale chcę dać więcej różnic między poszczególnymi wierszami chcę być jak fale SoundCloud jak poniżej picutre.

enter image description here

Oto mój kod:

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

} 

Stuck na nim od tylu godzin proszę kogoś żeby mnie z nim

+0

Czy możesz dać mi znać, jak realizowane tę rzecz? Chodzi mi o to, jak wykorzystać tę klasę do pokazania przebiegu? –

Odpowiedz

7

Próbowałem przypadkowych zmian w i uzyskałem pożądaną wydajność, której potrzebujesz, aby uzyskać

zmieniając te dwie linie

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

OK pozwól mi spróbować –

+0

To działało idealnie dzięki: D –

+0

Mam do czynienia z problemem z rozwiązaniem. Jeśli użyję 'curX + = LINE_WIDTH + 5;' wtedy przebieg falowy zacznie się przewijać po długim czasie. Użycie 'curX + = LINE_WIDTH' działa dobrze z przewijanym problemem. –

Powiązane problemy