Android改变边缘效果EdgeEffect的颜色

  我们平时经常可以看到,Android可滚动的控件像ScrollView、RecyclerView等滑动到顶部或者底部时会出现一个波浪形的边缘效果,在不同的版本系统上显示的颜色有所不同,如果项目中遇到要修改它的颜色的需求,那么要如何去做呢?


1.setColor方法可以直接使用吗?

setColor
  打开Android官方文档后找到EdgeEffect类,我们可以看到该类下有个直接设置颜色的方法setColor,那么如果我们如果想修改EdgeEffect的颜色的话,是不是直接调用该方法就可以直接大功告成了呢?答案是否定的(除非要适配的系统在5.0以上),我们可以看到setColor右边有一个醒目的字眼:added in API level 21。该方法是在Api21即5.0的版本中添加进去的,在5.0以下的版本是无法使用该方法的,那么如果要适配5.0以下的机型要怎么去做呢?

2.通过源码一窥究竟

  Android 4.4(api 20)EdgeEffect的部分源码

 public EdgeEffect(Context context) {
        final Resources res = context.getResources();
        mEdge = res.getDrawable(R.drawable.overscroll_edge);  // 获取图片
        mGlow = res.getDrawable(R.drawable.overscroll_glow);  // 获取图片

        mEdgeHeight = mEdge.getIntrinsicHeight();
        mGlowHeight = mGlow.getIntrinsicHeight();
        mGlowWidth = mGlow.getIntrinsicWidth();

        mMaxEffectHeight = (int) (Math.min(
                mGlowHeight * MAX_GLOW_HEIGHT * mGlowHeight / mGlowWidth * 0.6f,
                mGlowHeight * MAX_GLOW_HEIGHT) + 0.5f);

        mMinWidth = (int) (res.getDisplayMetrics().density * MIN_WIDTH + 0.5f);
        mInterpolator = new DecelerateInterpolator();
    }
    
     public boolean draw(Canvas canvas) {
        update();

        mGlow.setAlpha((int) (Math.max(0, Math.min(mGlowAlpha, 1)) * 255));

        int glowBottom = (int) Math.min(
                mGlowHeight * mGlowScaleY * mGlowHeight / mGlowWidth * 0.6f,
                mGlowHeight * MAX_GLOW_HEIGHT);
        if (mWidth < mMinWidth) {
            // Center the glow and clip it.
            int glowLeft = (mWidth - mMinWidth)/2;
            mGlow.setBounds(glowLeft, 0, mWidth - glowLeft, glowBottom);
        } else {
            // Stretch the glow to fit.
            mGlow.setBounds(0, 0, mWidth, glowBottom);
        }

        mGlow.draw(canvas); // 绘制图片

        mEdge.setAlpha((int) (Math.max(0, Math.min(mEdgeAlpha, 1)) * 255));

        int edgeBottom = (int) (mEdgeHeight * mEdgeScaleY);
        if (mWidth < mMinWidth) {
            // Center the edge and clip it.
            int edgeLeft = (mWidth - mMinWidth)/2;
            mEdge.setBounds(edgeLeft, 0, mWidth - edgeLeft, edgeBottom);
        } else {
            // Stretch the edge to fit.
            mEdge.setBounds(0, 0, mWidth, edgeBottom);
        }
        mEdge.draw(canvas); // 绘制图片

        if (mState == STATE_RECEDE && glowBottom == 0 && edgeBottom == 0) {
            mState = STATE_IDLE;
        }

        return mState != STATE_IDLE;
    }

  上面是4.4 EdgeEffect的部分源码,我们可以看出EdgeEffect的边缘效果是通过两张图片来进行绘制的,那么如果我们可以修改图片的颜色,那不就可以修改EdgeEffect所绘制出来的波浪效果的颜色了吗?

3.如何修改4.4以下的EdgeEffect的显示颜色

下面是具体步骤

1.找到系统绘制边缘的图片资源id

  从源码可以看出,绘制边缘的图片资源id如下:
  R.drawable.overscroll_edge
  R.drawable.overscroll_glow

2.替换为自己设置的图片

3.设置图片的颜色

直接上代码了

public class MyScrollView {

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

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

    public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
    // 通过ContextWrapperEdgeEffect里自定义的ResourcesEdgeEffect在系统获取R.drawable.overscroll_edge和R.drawable.overscroll_glow时替换为自己设置的图片
        super(new ContextWrapperEdgeEffect(context), attrs, defStyleAttr);
    }
    
    public void setEdgeEffectColor(int edgeEffectColor) {
        // 通过该方法修改颜色
        ((ContextWrapperEdgeEffect) getContext()).setEdgeEffectColor(edgeEffectColor);
    }
}
    
/**
 * 自定义滑动到顶部或者底部阴影颜色的ContextWrapper
 */
public class ContextWrapperEdgeEffect extends ContextWrapper {

    public static final String TAG = ContextWrapperEdgeEffect.class.getSimpleName();

    private ResourcesEdgeEffect mResourcesEdgeEffect;
    private int mColor;
    private Drawable mEdgeDrawable;
    private Drawable mGlowDrawable;

    public ContextWrapperEdgeEffect(Context context) {
        this(context, 0);
    }

    public ContextWrapperEdgeEffect(Context context, int color) {
        super(context);
        mColor = color;
        Resources resources = context.getResources();
        mResourcesEdgeEffect = new ResourcesEdgeEffect(resources.getAssets(), resources.getDisplayMetrics(), resources.getConfiguration());
    }

    public void setEdgeEffectColor(int color) {
        mColor = color;
        if (mEdgeDrawable != null) mEdgeDrawable.setColorFilter(color, PorterDuff.Mode.MULTIPLY);
        if (mGlowDrawable != null) mGlowDrawable.setColorFilter(color, PorterDuff.Mode.MULTIPLY);
    }

    @Override
    public Resources getResources() {
        return mResourcesEdgeEffect;
    }

    private class ResourcesEdgeEffect extends Resources {
        private int overscroll_edge = getPlatformDrawableId("overscroll_edge");
        private int overscroll_glow = getPlatformDrawableId("overscroll_glow");

        public ResourcesEdgeEffect(AssetManager assets, DisplayMetrics metrics, Configuration config) {
            //super(metrics, localConfiguration);
            super(assets, metrics, config);
        }

        private int getPlatformDrawableId(String name) {
            try {
                int i = ((Integer) Class.forName("com.android.internal.R$drawable").getField(name).get(null)).intValue();
                return i;
            } catch (ClassNotFoundException e) {
                Log.e(TAG, "Cannot find internal resource class");
                return 0;
            } catch (NoSuchFieldException e1) {
                Log.e(TAG, "Internal resource id does not exist: " + name);
                return 0;
            } catch (IllegalArgumentException e2) {
                Log.e(TAG, "Cannot access internal resource id: " + name);
                return 0;
            } catch (IllegalAccessException e3) {
                Log.e(TAG, "Cannot access internal resource id: " + name);
            }
            return 0;
        }

        @Override
        public Drawable getDrawable(int resId) throws Resources.NotFoundException {
            Drawable ret = null;
            if (resId == this.overscroll_edge) {
                mEdgeDrawable = ContextWrapperEdgeEffect.this.getBaseContext().getResources().getDrawable(R.drawable.community_overscroll_edge);
                ret = mEdgeDrawable;
            } else if (resId == this.overscroll_glow) {
                mGlowDrawable = ContextWrapperEdgeEffect.this.getBaseContext().getResources().getDrawable(R.drawable.community_overscroll_glow);
                ret = mGlowDrawable;
            } else return super.getDrawable(resId);

            if (ret != null) {
                ret.setColorFilter(mColor, PorterDuff.Mode.MULTIPLY);
            }

            return ret;
        }
    }
}

上面仅仅是ScrollView的示例,其他可滚动的View同样可以使用ContextWrapperEdgeEffect进行修改边缘颜色。

4.适配高低版本

  因为5.0以上版本ScrollView的acEdgeGlowTop和acEdgeGlowBottom是私有访问权限,所以要通过反射机制调用setColor方法。

public void setEdgeColor() {
    if (Build.VERSION.SDK_INT >= 21) {
        try {
            Class<?> c = Class.forName("android.widget.ScrollView");
            Field acEdgeGlowTop = c.getDeclaredField("mEdgeGlowTop");
            Field acEdgeGlowBottom = c.getDeclaredField("mEdgeGlowBottom");
            acEdgeGlowTop.setAccessible(true);
            acEdgeGlowBottom.setAccessible(true);
            EdgeEffect edgeEffect = new EdgeEffect(this);
            edgeEffect.setColor(Color.RED);
            acEdgeGlowTop.set(mScrollView, edgeEffect);
            acEdgeGlowBottom.set(mScrollView, edgeEffect);
        } catch (Exception e) {
            e.printStackTrace();
        }
    } else {
        mScrollView.setEdgeEffectColor(Color.YELLOW);
    }
}

  至此,就可以完成对可滑动View滑动到顶部或者底部出现的边缘效果的颜色进行修改了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,270评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,982评论 4 60
  • 在android系统中,它的根文件系统下有几个用于启动系统时需要的配置文件: [cpp]view plaincop...
    Amano阅读 515评论 0 0
  • (1) 生死,不可说。 身体发肤受之父母,我们无权随意处置,甚至浪费,一切皆应顺从自然法则。 但实际上,从你懂事起...
    粲然笑笑阅读 548评论 1 2
  • 对于未来越来越清晰,工资稳定过万,花几个月时间练习口才,看书继续,学习继续,之后成功转型。 找一份靠谱的感情,稳定...
    成长中的木木阅读 334评论 2 0