color
The concept of color is not so familiar to programmers, this article will make a more detailed introduction to the concept of color.
Color pattern
| Color pattern | note |
|---|---|
| ARGB8888 | Four-channel high precision (32 bits) |
| ARGB4444 | Four-channel low precision (16 bits) |
| RGB565 | Screen Default mode (16 bits) |
| Alpha8 | Transparent channel only (8 bits) |
Color definition using ARGB8888 as an example:
| type | explain | 0(0x00) | 255(0xff) |
|---|---|---|---|
| A(Alpha) | transparency | transparent | opaque |
| R(Red) | red | Colorless, | red |
| G(Green) | green | Colorless, | green |
| B(Blue) | blue | Colorless, | blue |
The values of A, R, G and B range from 0 to 255(0x00 to 0xFF in hexadecimal format).
A from 0x00 to 0xFF indicates from transparent to opaque. RGB from 0x00 to 0xFF indicates a light to dark color.
The color is black when RGB is all minimal (0 or 0x000000) and white when RGB is all maximum (255 or 0xFFFFFF)
Methods to create colors
Color gives you several colors
val color = Color.BLACK / / black
val color = Color.DKGRAY / / dark grey
val color = Color.GRAY / / gray
val color = Color.LTGRAY / / light grey
val color = Color.WHITE / / white
val color = Color.RED / / red
val color = Color.GREEN / / green
val color = Color.BLUE / / blue
val color = Color.YELLOW / / yellow
val color = Color.CYAN / / cyan
val color = Color.MAGENTA / / magenta
val color = Color.TRANSPARENT / / transparent
Copy the codeDefined in code
val color = Color.argb(127.255.0.0) // Translucent red
val color = 0xaaff0000 // Red with transparency
Copy the code/ res/values/color. In the XML definition
<resources>
<color name="red">#ff0000</color>
<color name="green">#00ff00</color>
</resources>
Copy the codeThere are several different definitions:
# F00 // Low precision - no transparent channel red # AF00 // Low precision - transparent channel red # FF0000 // High precision - no transparent channel red # aAFF0000 // High precision - transparent channel redCopy the codeA way to reference a defined color in code:
public static int getColor(@NonNull Context context, @ColorRes int id) {
if (Build.VERSION.SDK_INT >= 23) {
return context.getColor(id);
} else {
returncontext.getResources().getColor(id); }}Copy the codeAndroid provides a compatible method to be compatible with different versions of color acquisition, you can use different methods according to the corresponding SDK version.
Reference or create colors in XML:
<! --> < span style = "box-sizing: border-box! Important;
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/red</item>
</style>Android :background="@color/red" // Reference the color defined in /res/values/color.xml android:background="#ff0000" // create and use the colorCopy the codeColor blending mode
Since our display screen cannot be transparent, the final color displayed on the screen can be considered as having no Alpha channel. The Alpha channel works mainly when two images are mixed.
By default, the blending mode when a color is drawn to the Canvas is calculated as follows: (RGB channel) Final color = drawn color + (1 – transparency of drawn color) x original color on Canvas
The following table is the mixed calculation formula of each PorterDuff mode :(D refers to the original content on Canvas DST, S refers to the input content SRC, a refers to the alpha channel, and c refers to each RGB channel)
| PorterDuff.Mode | algorithm | role |
|---|---|---|
| CLEAR | [0, 0] | The alpha and RGB values of the image are 0 |
| SRC | [Sa, Sc] | Take the value of the source image |
| DST | [Da, Dc] | Takes the value of the target image |
| SRC_OVER | [Sa + (1 – Sa)Da, Rc = Sc + (1 – Sa)Dc] | The result is that Src overlays Dst. Note the effect of alpha, not necessarily this result |
| DST_OVER | [Sa + (1 – Sa)Da, Rc = Dc + (1 – Da)Sc] | The result is that Dst overlays Src. Note the effect of alpha, not necessarily this result |
| SRC_IN | [Sa * Da, Sc * Da] | The result is that the composite image is visible where the Src color value is not 0 and the Dst transparency value is not 0 |
| DST_IN | [Sa * Da, Sa * Dc] | The result is that the resultant image is visible where the Dst color value is not 0 and the Src transparency value is not 0 |
| SRC_OUT | [Sa * (1 – Da), Sc * (1 – Da)] | The result is that the composite image is visible where the Src color value is not 0 and the Dst transparency value is not 1 |
| DST_OUT | [Da * (1 – Sa), Dc * (1 – Sa)] | The result is that the resultant image is visible where the Dst color value is not 0 and the Src transparency value is not 1 |
| SRC_ATOP | [Da, Sc * Da + (1 – Sa) * Dc] | The result is to see the composite image where Src and Dst are both 0 and the Dst transparency is not 0, and where Src is 0 but Src transparency is not 1 |
| DST_ATOP | [Sa, Sa * Dc + Sc * (1 – Da)] | The result is to see the composite image where Src and Dst are both 0 and the Src transparency value is not 0, and where Dst is 0 but the Dst transparency value is not 1 |
| XOR | [Sa + Da – 2 * Sa * Da, Sc * (1 – Da) + (1 – Sa) * Dc] | The source image and the target image are drawn as is where they do not intersect, and the intersection is affected by the corresponding alpha and color value |
| DARKEN | [Sa + Da – SaDa, Sc(1 – Da) + Dc*(1 – Sa) + min(Sc, Dc)] | The calculation of color value is relatively complicated when the dark transparent value is taken |
| LIGHTEN | [Sa + Da – SaDa, Sc(1 – Da) + Dc*(1 – Sa) + max(Sc, Dc)] | The calculation of color value is relatively complicated |
| MUTIPLY | [Sa * Da, Sc * Dc] | The result is that the composite image is seen where neither Src nor Dst transparency values are 0, and neither color value is 0 |
| SCREEN | [Sa + Da – Sa * Da, Sc + Dc – Sc * Dc] | As you can see, it can have multiple cases that require actual calculation |
| ADD Saturate(S + D) | ||
| OVERLAY |
Mixed effect picture:
The specific color blending mode will be explained in the next article, and this article will only make a summary.
conclusion
Color in fact, there are a lot of very in-depth knowledge points, for our Android development programmers, the above knowledge points are basically enough, more interesting content can consult the company’s design sister, stare ~ ~ ~