Canvas的实际使用

这个就是一个大致的实现效果，左右滑动用的是一个自定义的HorizontalScrollView，图片渐变用的是一个自定义Drawable；

1、自定义HorizontalScrollView实现实现左右滑动

1.1、extends HorizontalScrollView 并进行相应的初始化

public class GallaryHorizonalScrollView extends HorizontalScrollView implements View.OnTouchListener {
private LinearLayout container;
private int iconWidth;
private int centerX;

public GallaryHorizonalScrollView(Context context) {
this(context, null);
}

public GallaryHorizonalScrollView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public GallaryHorizonalScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

private void init() {
//在ScrollView里面放置一个水平线性布局，再往里面放置很多的ImageView
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT
);
container = new LinearLayout(getContext());
container.setLayoutParams(params);
setOnTouchListener(this);
}
}

1.2、重写onLayout方法进行摆放

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
//得到某一张图片的宽度
View v = container.getChildAt(0);
iconWidth = v.getWidth();
//得到中间x坐标
centerX = getWidth() / 2;
//处理中心坐标改成中心图片的左边界
centerX = centerX - iconWidth / 2;
//给LinearLayout和HorizontalScrollView之间设置边框距离
container.setPadding(centerX, 0, centerX, 0);
}

1.3、设置setOnTouchListener进行事件处理

@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_MOVE) {
//处理移动
//渐变图片
reveal();
}
return false;
}

private void reveal() {
//渐变效果
//得到HorizontalScrollView滑出去的距离
int scrollX = getScrollX();
//找到两张渐变的图片的下标--左  右
int indexLeft = scrollX / iconWidth;
int indexRight = indexLeft + 1;
//设置图片的level
for (int i = 0; i < container.getChildCount(); i++) {
if (i == indexLeft || i == indexRight) {
//变化
//比例
float ratio = 5000f / iconWidth;
ImageView ivLeft = (ImageView) container.getChildAt(indexLeft);
//scrollX%icon_width:代表滑出去的距离
//滑出去了icon_width/2  icon_width/2%icon_width
ivLeft.setImageLevel((int) (5000 - scrollX % iconWidth * ratio));
//右边
if (indexRight < container.getChildCount()) {
ImageView ivRight = (ImageView) container.getChildAt(indexRight);
//scrollX%icon_width:代表滑出去的距离
//滑出去了icon_width/2  icon_width/2%icon_width
ivRight.setImageLevel(
(int) (10000 - scrollX % iconWidth * ratio)
);
}
} else {
//灰色
ImageView iv = (ImageView) container.getChildAt(i);
iv.setImageLevel(0);
}

}
}

这里只需要对ACTION_MOVE进行处理，对应的提供了一个添加图片数据源的方法；

/**
* 添加图片
*
* @param revealDrawables 传入的Drawable数组资源
*/
public void addImageViews(Drawable[] revealDrawables) {
for (int i = 0; i < revealDrawables.length; i++) {
ImageView img = new ImageView(getContext());
img.setImageDrawable(revealDrawables[i]);
container.addView(img);
if (i == 0) {
img.setImageLevel(5000);
}
}
addView(container);
}

2、自定义Drawable对图片进行处理

图片的渐变效果其实利用了Canvas的裁剪，将画布裁剪成两个区域，左边为未选状态，右边为已选状态，根据滑动的距离去做相应的显示；

public class RevealDrawable extends Drawable {
//未被选
private Drawable mUnselectedDrawable;
//被选
private Drawable mSelectedDrawable;
//显示方向
private int mOrientation;
//横向
public static final int HORIZONTAL = 1;
//纵向
public static final int VERTICAL = 2;
//绘制和裁剪的矩形区域
private final Rect mTmpRect = new Rect();

public RevealDrawable(Drawable unselected, Drawable selected, int orientation) {
mUnselectedDrawable = unselected;
mSelectedDrawable = selected;
mOrientation = orientation;
}

@Override
public void draw(Canvas canvas) {
//绘制
int level = getLevel();//from 0 (minimum) to 10000
//右边区域和左边区域--设置成灰色
if (level == 10000 || level == 0) {
mUnselectedDrawable.draw(canvas);
} else if (level == 5000) {
//全部选中  设置成彩色
mSelectedDrawable.draw(canvas);
} else {
//混合效果的Drawable
/**
* 将画板切割成两块--左边和右边
*/
Rect r = mTmpRect;
//得到当前自身Drawable的矩形区域
Rect bounds = getBounds();
{
//先绘制灰色部分   level 0--5000--10000
//比例
float ratio = (level / 5000f) - 1f;
int w = bounds.width();
if (mOrientation == HORIZONTAL) {
w = (int) (w * Math.abs(ratio));
}
int h = bounds.height();
if (mOrientation == VERTICAL) {
h = (int) (h * Math.abs(ratio));
}
int gravity = ratio < 0 ? Gravity.LEFT : Gravity.RIGHT;
//从一个已有的bounds矩形边界范围中抠出一个矩形r
Gravity.apply(
gravity,//从左边还是从右边开始抠
w,//目标矩形的宽度
h,//目标矩形的高度
bounds,//被抠出来的rect
r//目标rect
);
//保存当前画布
canvas.save();
//进行切割
canvas.clipRect(r);
//进行绘制
mUnselectedDrawable.draw(canvas);
//恢复之前的画布
canvas.restore();
}
{
//绘制彩色部分   level 0--5000--10000
//比例
float ratio = (level / 5000f) - 1f;
int w = bounds.width();
if (mOrientation == HORIZONTAL) {
w -= (int) (w * Math.abs(ratio));
}
int h = bounds.height();
if (mOrientation == VERTICAL) {
h -= (int) (h * Math.abs(ratio));
}
int gravity = ratio < 0 ? Gravity.RIGHT : Gravity.LEFT;
//从一个已有的bounds矩形边界范围中抠出一个矩形r
Gravity.apply(
gravity,//从左边还是从右边开始抠
w,//目标矩形的宽度
h,//目标矩形的高度
bounds,//被抠出来的rect
r//目标rect
);
//保存当前画布
canvas.save();
//进行切割
canvas.clipRect(r);
//进行绘制
mSelectedDrawable.draw(canvas);
//恢复之前的画布
canvas.restore();
}
}
}

@Override
protected void onBoundsChange(Rect bounds) {
//定义好两个Drawable图片的宽高--边界bounds
mUnselectedDrawable.setBounds(bounds);
mSelectedDrawable.setBounds(bounds);
}

@Override
public int getIntrinsicWidth() {
//得到Drawable的实际宽度
return Math.max(mSelectedDrawable.getIntrinsicWidth(),
mUnselectedDrawable.getIntrinsicWidth());
}

@Override
public int getIntrinsicHeight() {
//得到Drawable的实际高度
return Math.max(mSelectedDrawable.getIntrinsicHeight(),
mUnselectedDrawable.getIntrinsicHeight());
}

@Override
protected boolean onLevelChange(int level) {
//当设置level的时候就会回调该方法
//进行重新绘制
invalidateSelf();
return true;
}

@Override
public void setAlpha(int alpha) {

}

@Override
public void setColorFilter(ColorFilter colorFilter) {

}

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

3、使用

public class MainActivity extends AppCompatActivity {
private int[] mImgIds = new int[] { //7个
R.mipmap.avft,
R.mipmap.box_stack,
R.mipmap.bubble_frame,
R.mipmap.bubbles,
R.mipmap.bullseye,
R.mipmap.circle_filled,
R.mipmap.circle_outline,

R.mipmap.avft,
R.mipmap.box_stack,
R.mipmap.bubble_frame,
R.mipmap.bubbles,
R.mipmap.bullseye,
R.mipmap.circle_filled,
R.mipmap.circle_outline
};
private int[] mImgIds_active = new int[] {
R.mipmap.avft_active, R.mipmap.box_stack_active, R.mipmap.bubble_frame_active,
R.mipmap.bubbles_active, R.mipmap.bullseye_active, R.mipmap.circle_filled_active,
R.mipmap.circle_outline_active,
R.mipmap.avft_active, R.mipmap.box_stack_active, R.mipmap.bubble_frame_active,
R.mipmap.bubbles_active, R.mipmap.bullseye_active, R.mipmap.circle_filled_active,
R.mipmap.circle_outline_active
};
public Drawable[] revealDrawables;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
initView();
}

private void initView() {
for (int i = 0; i < mImgIds.length; i++) {
RevealDrawable rd=new RevealDrawable(
getResources().getDrawable(mImgIds[i]),
getResources().getDrawable(mImgIds_active[i]),
RevealDrawable.HORIZONTAL
);
revealDrawables[i]=rd;
}
GallaryHorizonalScrollView hsv = (GallaryHorizonalScrollView) findViewById(R.id.hsv);
hsv.addImageViews(revealDrawables);
}

private void initData() {
revealDrawables=new Drawable[mImgIds.length];
}
}

源码地址：

http://download.csdn.net/download/wangwo1991/9971873