美文网首页UI效果仿写Android 自定义view
仿豆瓣的title变色方案 android

仿豆瓣的title变色方案 android

作者: 75c38b1db5c6 | 来源:发表于2018-06-05 16:26 被阅读287次

    写文章写的正在兴头上,把一年前做的一个title拿出来给大家看一下。因为是一个仿豆瓣的app,里边有一个title变色

    1528185742690.gif

    不太会用制图软件,没错你看到的上边的这个就是成品,图的原因不太流畅,实际上还可以。基本还原 ,不是单纯的变色,是两种渐变,由不透明到透明,再到不透明,颜色在从透明到半白。

    一年前写的了。不太能记得清晰了,但是我尽量解释到位

    项目地址:点这里 具体位置在com.example.douban.douban4_b.ui.activity.MovieDetilActivity 欢迎查看

    具体实现是一个behavior ToolbarAlphaDependBehavior 这是android后来提供的一个组件,专门用来进行titlebar的变形。

    继承CoordinatorLayout.Behavior<LinearLayout> 之后就可以对Linearlayout进行控制

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, MyTitleBar child, View dependency) {
        return dependency instanceof Toolbar;
    }
    

    该方法使用来制定一个观察者,指定我们依据那个view来进行变化


    Screenshot_20180605-162042.jpg

    该图片上半部分整体用了一个framelayout进行装载,在下边放了一个高度为0的toolbar。
    我们观察的对象就指定了这个toolbar。这样往上滑的时候就可以依据toolbar的位置进行控制。

    这是一个具体的方案变色实现,基本思想就是计算toolbar从开始到最后移动的距离占整个framelayout的百分比。这样得到百分比之后就依据百分比来进行控制颜色,控制透明度。

     @Override
        public boolean onDependentViewChanged(CoordinatorLayout parent, MyTitleBar child, View dependency) {
    
            Drawable drawable = dependency.getBackground();
            dra = (ColorDrawable) drawable;
            float percent;
            if (mStartY == 0) {
                mStartY = (int) dependency.getY() - context.getResources().getDimensionPixelOffset(R.dimen.toolbar_padding_top);
            }
            Logger.w(dependency.getY() + "");
            float endpercent = Math.abs((mStartY - child.getY() * 2) / mStartY);
            Logger.w("childheight" + child.getY() + "");
            //计算toolbar从开始到最后移动的百分比
            if (dependency.getY() >= 0) {
                percent = 1 - Math.abs((dependency.getY() - (int) child.getY()) / mStartY);
                Logger.w("percent" + percent + "");
                Logger.w("endpercent" + endpercent + "");
                //改变textview的坐标值
    
                if (percent <= 0) {
                    child.setBackgroundColor(0x00FFFFFF);
                    child.getBackground().setAlpha(0);
                } else if (0 < percent && percent <= 0.6) {
                    child.setBackgroundColor(toobal_old);
                    int alpha = (int) Math.abs(percent * 255);
                    child.getBackground().setAlpha(alpha);
                } else if (percent >= 0.6 && percent < endpercent) {
                    float percenttemp = (float) ((percent - 0.6) / 0.4);
                    final int evaluate1 = (Integer) evaluator.evaluate(percenttemp, toobal_old, dra.getColor());
                    child.setBackgroundColor(evaluate1);
                    int alpha = (int) Math.abs(percent * 255);
                    child.getBackground().setAlpha(alpha);
                } else if (percent >= endpercent && percent < 1) {
                    float percenttemp = (float) ((percent - 0.6) / 0.4);
                    final int evaluate1 = (Integer) evaluator.evaluate(percenttemp, toobal_old, dra.getColor());
                    child.setBackgroundColor(evaluate1);
                    int alpha = (int) Math.abs(percent * 255);
                    child.getBackground().setAlpha(alpha);
                    EventBus.getDefault().post(new onTitleMissing());
                } else if (percent >= 1) {
                    child.getBackground().setAlpha(255);
                    child.setBackgroundColor(dra.getColor());
                    EventBus.getDefault().post(new onTitleComplete());
                }
            } else {
                child.getBackground().setAlpha(0);
                child.setBackgroundColor(0x00FFFFFF);
            }
    
            return true;
        }
    

    最后将这个behavior赋给自己的title即可。
    不算简单,我中间跳过了是因为项目里有。
    谢谢

    相关文章

      网友评论

        本文标题:仿豆瓣的title变色方案 android

        本文链接:https://www.haomeiwen.com/subject/jhqmsftx.html