UI效果仿写Android 自定义view

仿豆瓣的title变色方案 android

2018-06-05  本文已影响287人  75c38b1db5c6

写文章写的正在兴头上,把一年前做的一个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即可。
不算简单,我中间跳过了是因为项目里有。
谢谢

上一篇下一篇

猜你喜欢

热点阅读