android灰色滤镜布局

h5网页灰色滤镜

只要给 html 加下列css 样式就可以了

html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);
}

Android组件灰色滤镜

ColorMartrix类，这个类对外提供了很多 API，大家直接调用 API 就能得到大部分想要的效果了，除非你有特别特殊的操作，那么可以自己通过矩阵去运算。

像灰度这样的效果，我们可以通过饱和度 API来操作：

 //设置 1：彩色  0：黑白
setSaturation(float sat)

传入 0 就可以了，底层传入了一个特定的矩阵去做的运算。

自定义ImagView灰色滤镜

自定义ImagView

/*** 灰色滤镜 ImageView*/
public class GrayImageView extends AppCompatImageView {private Paint mPaint = new Paint();public GrayImageView(Context context, AttributeSet attrs) {super(context, attrs);ColorMatrix cm = new ColorMatrix();//设置 1：彩色  0：黑白cm.setSaturation(0);mPaint.setColorFilter(new ColorMatrixColorFilter(cm));}@Overridepublic void draw(Canvas canvas) {canvas.saveLayer(null, mPaint, Canvas.ALL_SAVE_FLAG);super.draw(canvas);canvas.restore();}/*** @desc 设置灰色页面*/public void setGray(boolean isGray) {ColorMatrix cm = new ColorMatrix();//设置 1：彩色  0：黑白cm.setSaturation(isGray ? 0 : 1);mPaint.setColorFilter(new ColorMatrixColorFilter(cm));//重新绘制画布invalidate();}
}

layout

使用

  GrayImageView givImg= findViewById(R.id.giv_main_img);//false 彩色  true灰色givImg.setGray(false);

效果

自定义LinearLayout灰色滤镜

自定义LinearLayout

/*** 灰色滤镜 线性布局*/
public class GrayLinearLayout extends LinearLayout {private Paint mPaint = new Paint();public GrayLinearLayout(Context context, AttributeSet attrs) {super(context, attrs);ColorMatrix cm = new ColorMatrix();//设置 1：彩色  0：黑白cm.setSaturation(1);mPaint.setColorFilter(new ColorMatrixColorFilter(cm));}@Overridepublic void draw(Canvas canvas) {canvas.saveLayer(null, mPaint, Canvas.ALL_SAVE_FLAG);super.draw(canvas);canvas.restore();}@Overrideprotected void dispatchDraw(Canvas canvas) {canvas.saveLayer(null, mPaint, Canvas.ALL_SAVE_FLAG);super.dispatchDraw(canvas);canvas.restore();}/*** @desc 设置灰色页面*/public void setGray(boolean isGray) {ColorMatrix cm = new ColorMatrix();//设置 1：彩色  0：黑白cm.setSaturation(isGray ? 0 : 1);mPaint.setColorFilter(new ColorMatrixColorFilter(cm));//重新绘制画布invalidate();}
}

layout

使用

   GrayLinearLayout gllLayout = findViewById(R.id.gll_main_layout);//false 彩色  true灰色gllLayout.setGray(false);

效果


其他布局类似