Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

In the last article, we successfully obtained the sliding distance of RecyclerView. In this article, we will change the status bar and title bar according to the sliding distance.

First of all, we need to define a fixed distance that we can use to change the gradient state. For example, if the distance is 300, then we will change the title to black and white, and the status bar icon to white. As the sliding distance shrinks, the text will whiten and the background will become more transparent.

So let’s define a fixed value, so I’m going to set it to 100dp

int S100 = ImageUtil.dp2px(this, 100);
Copy the code

Imageutil. dp2px is a utility class that converts DP to PX. If you want to screen fit, you can use the conversion class in your project. Here I will post our utility class

Public class ImageUtil {/** * @param context * @param dp * @return dip pix */ public static int dp2px(context) float dp) { if (context ! = null && dp ! = 0) { final float scale = context.getResources().getDisplayMetrics().density; Return (int) (dp * scale + 0.5f); } return (int) dp; }}Copy the code

The second step, we need to judge whether the distance of recyclerView sliding has exceeded the fixed distance defined by us, and then switch the icon color to the status bar

if (test < S100) {
    ImmersionBar.with(this).statusBarDarkFont(false).init();
    
} else {
    ImmersionBar.with(this).statusBarDarkFont(true).init();
}
Copy the code

ImmersionBar is a status bar three party library, our country Android magic changed the system is very much, what Xiaomi, Meizu, Huawei, OPpo, Vivo, some of their models can use Google official Api to adapt to the status bar and some will have to go to their official developer website to find the corresponding Settings In order to reduce this unnecessary work, direct reference to the tripartite library is our best choice.

Step three, our slide callback when we go to the top of the slide callback returns 0, and we’re also going to add a judgment to set the color

if (test < S100) {
    ImmersionBar.with(this).statusBarDarkFont(false).init();
    if (test == 0) {
        mTv.setTextColor(ContextCompat.getColor(this, R.color.white));
        mTv.setBackgroundColor(ContextCompat.getColor(this, R.color.trans));
    } else {
        int alpha = test * 255 / S100;
        mTv.setTextColor(Color.argb(alpha, 0, 0, 0));
        mTv.setBackgroundColor(Color.argb(alpha, 255, 255, 255));
    }
} else {
    ImmersionBar.with(this).statusBarDarkFont(true).init();
}
Copy the code

When we slide to the top, set the font to white and the background color to transparent.

int alpha = test * 255 / S100;
Copy the code

Test is the parameter we passed in, that is, the sliding distance, and S100 is the fixed value of the sliding judgment mentioned above from the beginning. And that’s how we calculate the alpha that we’re going to eventually set.

Color.argb()
Copy the code

This one is even easier, just set alpha for the color, followed by RGB color. Let’s see what happens

Ok, effect done, good-bye old commercial ┛