2016-08-19 4 views
-2

enter image description hereнастраиваемое представление OnClick Стиль изменить

Я пользовательские анимированные кнопки воспроизведения/паузы, которая становится выделенной, когда я нажимаю его. Как удалить выделенный серый цвет вокруг кнопки. Настройка фона на прозрачный не работает.

public class PlayPauseMiniView extends FrameLayout { 
private static final long PLAY_PAUSE_ANIMATION_DURATION = 200; 

private final PlayPauseDrawable mDrawable; 
private final Paint mPaint = new Paint(); 

private AnimatorSet mAnimatorSet; 
private int mWidth; 
private int mHeight; 

public PlayPauseMiniView(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    setWillNotDraw(false); 
    mPaint.setAntiAlias(true); 
    mPaint.setStyle(Paint.Style.FILL); 
    mDrawable = new PlayPauseDrawable(context); 
    mDrawable.setCallback(this); 
} 

@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    final int size = Math.min(getMeasuredWidth(), getMeasuredHeight()); 
    setMeasuredDimension(120, 120); 
} 

@Override 
protected void onSizeChanged(final int w, final int h, int oldw, int oldh) { 
    super.onSizeChanged(w, h, oldw, oldh); 
    mDrawable.setBounds(0, 0, w, h); 
    mWidth = w; 
    mHeight = h; 

} 


@Override 
protected boolean verifyDrawable(Drawable who) { 
    return who == mDrawable || super.verifyDrawable(who); 
} 

@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    mDrawable.draw(canvas); 
} 

public void toggle() { 
    if (mAnimatorSet != null) { 
     mAnimatorSet.cancel(); 
    } 

    mAnimatorSet = new AnimatorSet(); 
    final Animator pausePlayAnim = mDrawable.getPausePlayAnimator(); 
    mAnimatorSet.setInterpolator(new DecelerateInterpolator()); 
    mAnimatorSet.setDuration(PLAY_PAUSE_ANIMATION_DURATION); 
    mAnimatorSet.playTogether(pausePlayAnim); 
    mAnimatorSet.start(); 
} 

}

public class PlayPauseDrawable extends Drawable { 

private static final Property<PlayPauseDrawable, Float> PROGRESS = 
     new Property<PlayPauseDrawable, Float>(Float.class, "progress") { 
      @Override 
      public Float get(PlayPauseDrawable d) { 
       return d.getProgress(); 
      } 

      @Override 
      public void set(PlayPauseDrawable d, Float value) { 
       d.setProgress(value); 
      } 
     }; 

private final Path mLeftPauseBar = new Path(); 
private final Path mRightPauseBar = new Path(); 
private final Paint mPaint = new Paint(); 
private final RectF mBounds = new RectF(0,0,10,10); 
private final float mPauseBarWidth; 
private final float mPauseBarHeight; 
private final float mPauseBarDistance; 

private float mWidth; 
private float mHeight; 

private float mProgress; 
private boolean mIsPlay; 

public PlayPauseDrawable(Context context) { 
    final Resources res = context.getResources(); 
    mPaint.setAntiAlias(true); 
    mPaint.setStyle(Paint.Style.FILL); 
    mPaint.setColor(Color.DKGRAY); 
    mPauseBarWidth = res.getDimensionPixelSize(R.dimen.pause_bar_width); 
    mPauseBarHeight = res.getDimensionPixelSize(R.dimen.pause_bar_height); 
    mPauseBarDistance = res.getDimensionPixelSize(R.dimen.pause_bar_distance); 
} 

@Override 
protected void onBoundsChange(Rect bounds) { 
    super.onBoundsChange(bounds); 
    mBounds.set(bounds); 
    mWidth = mBounds.width(); 
    mHeight = mBounds.height(); 
} 

@Override 
public void draw(Canvas canvas) { 
    mLeftPauseBar.rewind(); 
    mRightPauseBar.rewind(); 

    // The current distance between the two pause bars. 
    final float barDist = lerp(mPauseBarDistance, 0, mProgress); 
    // The current width of each pause bar. 
    final float barWidth = lerp(mPauseBarWidth, mPauseBarHeight/2f, mProgress); 
    // The current position of the left pause bar's top left coordinate. 
    final float firstBarTopLeft = lerp(0, barWidth, mProgress); 
    // The current position of the right pause bar's top right coordinate. 
    final float secondBarTopRight = lerp(2 * barWidth + barDist, barWidth + barDist, mProgress); 

    // Draw the left pause bar. The left pause bar transforms into the 
    // top half of the play button triangle by animating the position of the 
    // rectangle's top left coordinate and expanding its bottom width. 
    mLeftPauseBar.moveTo(0, 0); 
    mLeftPauseBar.lineTo(firstBarTopLeft, -mPauseBarHeight); 
    mLeftPauseBar.lineTo(barWidth, -mPauseBarHeight); 
    mLeftPauseBar.lineTo(barWidth, 0); 
    mLeftPauseBar.close(); 

    // Draw the right pause bar. The right pause bar transforms into the 
    // bottom half of the play button triangle by animating the position of the 
    // rectangle's top right coordinate and expanding its bottom width. 
    mRightPauseBar.moveTo(barWidth + barDist, 0); 
    mRightPauseBar.lineTo(barWidth + barDist, -mPauseBarHeight); 
    mRightPauseBar.lineTo(secondBarTopRight, -mPauseBarHeight); 
    mRightPauseBar.lineTo(2 * barWidth + barDist, 0); 
    mRightPauseBar.close(); 

    canvas.save(); 

    // Translate the play button a tiny bit to the right so it looks more centered. 
    canvas.translate(lerp(0, mPauseBarHeight/8f, mProgress), 0); 

    // (1) Pause --> Play: rotate 0 to 90 degrees clockwise. 
    // (2) Play --> Pause: rotate 90 to 180 degrees clockwise. 
    final float rotationProgress = mIsPlay ? 1 - mProgress : mProgress; 
    final float startingRotation = mIsPlay ? 90 : 0; 
    canvas.rotate(lerp(startingRotation, startingRotation + 90, rotationProgress), mWidth/2f, mHeight/2f); 

    // Position the pause/play button in the center of the drawable's bounds. 
    canvas.translate(mWidth/2f - ((2 * barWidth + barDist)/2f), mHeight/2f + (mPauseBarHeight/2f)); 

    // Draw the two bars that form the animated pause/play button. 
    canvas.drawPath(mLeftPauseBar, mPaint); 
    canvas.drawPath(mRightPauseBar, mPaint); 

    canvas.restore(); 
} 

public Animator getPausePlayAnimator() { 
    final Animator anim = ObjectAnimator.ofFloat(this, PROGRESS, mIsPlay ? 1 : 0, mIsPlay ? 0 : 1); 
    anim.addListener(new AnimatorListenerAdapter() { 
     @Override 
     public void onAnimationEnd(Animator animation) { 
      mIsPlay = !mIsPlay; 
     } 
    }); 
    return anim; 
} 

public boolean isPlay() { 
    return mIsPlay; 
} 

private void setProgress(float progress) { 
    mProgress = progress; 
    invalidateSelf(); 
} 

private float getProgress() { 
    return mProgress; 
} 

@Override 
public void setAlpha(int alpha) { 
    mPaint.setAlpha(alpha); 
    invalidateSelf(); 
} 

@Override 
public void setColorFilter(ColorFilter cf) { 
    mPaint.setColorFilter(cf); 
    invalidateSelf(); 
} 

@Override 
public int getOpacity() { 
    return PixelFormat.TRANSLUCENT; 
} 

/** 
* Linear interpolate between a and b with parameter t. 
*/ 
private static float lerp(float a, float b, float t) { 
    return a + (b - a) * t; 
} 

}

+0

Я также хотел бы знать, почему этот вопрос помечен, чтобы я мог улучшить качество задаваемых вопросов. Спасибо. – Amit0191

+0

amit frm Вы использовали изображение, может быть, у вас нет фона, прозрачного для значка trybotton frm здесь https://github.com/google/material-design-icons –

+0

Я не использую никакого изображения. Кнопка рисуется с помощью холста – Amit0191

ответ

0

Вы можете использовать ImageView вместо ImageButton

+0

, это нестандартный вид. Кнопка рисуется с использованием холста. – Amit0191

0

Вы пробовали андроида: фон = "@ нуль"?

+0

Это не сработало. – Amit0191

Смежные вопросы