Shulou(Shulou.com)06/02 Report--

Today I will show you how to analyze Tint in Android Material Design. The content of the article is good. Now I would like to share it with you. Friends who feel in need can understand it. I hope it will be helpful to you. Let's read it along with the editor's ideas.

What is Tint?

When I first came into contact with the word Tint, I didn't quite understand its meaning, and I didn't know why Google invented it. It is usually used with Background, but now that I have Background, why do I need Tint?

Tint is translated into shading.

Coloring, what color is it? It has something to do with the background, of course, the color of the background. When I develop the client and use the appcompat-v7 package, in order to achieve the effect of Material Design, we will set several colors in the theme, such as primaryColor,colorControlNormal,colorControlActived, etc., and some components we use, such as EditText, will automatically become the background color we want, which greatly reduces the size of our apk package when there is only one background image.

The way to do this is to set tint for our background image with a color.

Example:

Take a look at the upcoming release of SegmentFault for Android 2.7. the release problem feature, the color of this EditText is the same as our main color. It takes advantage of the TintManager class to color its background (green).

So what does this original picture look like? We found this diagram in the appcompat-v7 package, which is a .9 figure, which looks like this:

In fact, it is just a black bar, through the green color, into a green bar. It is this way of design that makes us save how many resource files in Material Design!

Well, now that we understand the meaning of tint, let's take a look at how it all works.

In fact, the bottom layer is very simple. Students who have learned about rendering should know that PorterDuffColorFilter. We use SRC_IN to render the Drawable in terms of color, that is, where there are pixels in this Drawable, we use our filter to color it again.

In fact, if we want to implement it ourselves, all we have to do is to get the backgroundDrawable of View and set colorFilter.

Take a look at the core code, just a few lines.

If (filter = = null) {/ / Cache miss, so create a color filter and add it to the cache filter = new PorterDuffColorFilter (color, mode);} d.setColorFilter (filter)

Normally, our mode is usually SRC_IN. If you want to know more about this attribute, here is the portal: http://blog.csdn.net/t12x3456/article/details/10432935 (Chinese)

Since API Level 21 did not previously support the setting of background tint in xml, the ViewCompat.setBackgroundTintList method and ViewCompat.setBackgroundTintMode are provided to manually change the color that needs to be shaded, but the relevant View is required to inherit the TintableBackgroundView interface.

Source code parsing

Take a look at how the source code is implemented. Let's take AppCompatEditText as an example:

Take a look at the constructor (omitting extraneous code)

Public AppCompatEditText (Context context, AttributeSet attrs, int defStyleAttr) {super (TintContextWrapper.wrap (context), attrs, defStyleAttr); ColorStateList tint = a.getTintManager () .getTintList (a.getResourceId (0,-1)); / / gets the built-in shading color based on the resource id of the background. If (tint! = null) {setInternalBackgroundTint (tint); / / set shading}.} private void setInternalBackgroundTint (ColorStateList tint) {if (tint! = null) {if (mInternalBackgroundTint = = null) {mInternalBackgroundTint = new TintInfo ();} mInternalBackgroundTint.mTintList = tint; mInternalBackgroundTint.mHasTintList = true;} else {mInternalBackgroundTint = null;} / / the above code records tint-related information. ApplySupportBackgroundTint (); / / A pair of background applications tint} private void applySupportBackgroundTint () {if (getBackground ()! = null) {if (mBackgroundTint! = null) {TintManager.tintViewBackground (this, mBackgroundTint);} else if (mInternalBackgroundTint! = null) {TintManager.tintViewBackground (this, mInternalBackgroundTint) / / most importantly, apply tint} then we go to tintViewBackground and take a look at the source code public static void tintViewBackground (View view, TintInfo tint) {final Drawable background = view.getBackground (); if (tint.mHasTintList) {/ / if tint is set, set PorterDuffColorFilter setPorterDuffColorFilter (background, tint.mTintList.getColorForState (view.getDrawableState (), tint.mTintList.getDefaultColor ()), tint.mHasTintMode? Tint.mTintMode: null);} else {background.clearColorFilter ();} if (Build.VERSION.SDK_INT

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.