Android5.0 new features-images and Colors (drawable)

<span id="Label3"></p>Picture and color Tint properties<p><p>Tint Property A color value, you can do color rendering of the picture, we can set the background of the view tint color values, to ImageView image set Tint color value, You can also give any drawable or ninepatchdrawable set tint color Value.</p></p><p><p>You can also set a <code>android:tint</code> uniform color rendering for a theme in your App's Theme.</p></p><p><p>Tint has a total of 16 rendering modes, XML files can be used 6 kinds of code, we can set 16, rendering mode determines the rendering color and the original color of the trade-offs and composition Rules:</p></p><p><p></p></p> <ol> <li><li><code>PorterDuff.Mode.CLEAR</code>The drawing is not submitted to the Canvas.</li></li> <li><li><code>PorterDuff.Mode.SRC</code>Show Top Draw picture</li></li> <li><li><code>PorterDuff.Mode.DST</code>Show Lower drawing pictures</li></li> <li><li><code>PorterDuff.Mode.SRC_OVER</code>Normal drawing shows that the upper and lower layers are drawn with overlapping covers.</li></li> <li><li><code>PorterDuff.Mode.DST_OVER</code>The upper and lower layers are displayed. The lower level is shown on the Home.</li></li> <li><li><code>PorterDuff.Mode.SRC_IN</code>Draw the intersection of two Layers. Displays the upper Layer.</li></li> <li><li><code>PorterDuff.Mode.DST_IN</code>Draw the intersection of two Layers. Displays the lower Layer.</li></li> <li><li><code>PorterDuff.Mode.SRC_OUT</code>Draw the non-intersecting portion of the upper Layer.</li></li> <li><li><code>PorterDuff.Mode.DST_OUT</code>Remove the layer to draw the non-intersecting part.</li></li> <li><li><code>PorterDuff.Mode.SRC_ATOP</code>Remove the non-intersecting part of the layer from the upper intersection section</li></li> <li><li><code>PorterDuff.Mode.DST_ATOP</code>Take the upper non-intersecting part and the lower part of the intersection</li></li> <li><li><code>PorterDuff.Mode.XOR</code>Draw a non-intersection of two Layers. The two layers draw Non-intersecting.</li></li> <li><li><code>PorterDuff.Mode.DARKEN</code>The upper and lower layers are displayed. Darken</li></li> <li><li><code>PorterDuff.Mode.LIGHTEN</code>The upper and lower layers are displayed. Lighten</li></li> <li><li><code>PorterDuff.Mode.MULTIPLY</code>Draw the intersection of two layers</li></li> <li><li><code>PorterDuff.Mode.SCREEN</code>The upper and lower layers are displayed.</li></li> </ol><p><p>Tint color processing of the picture will show a different color, we can use a picture to make a picture selector effect, let the control in the press state to display another color:</p></p><pre><pre><code>通过给图片设置tint色生成另外一种图片<bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/ring" android:tintMode="multiply" android:tint="#5677fc" />利用新的图片生成图片选择器<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/tint_bitmap" android:state_pressed="true"/> <item android:drawable="@drawable/ring" /></selector></code></pre></pre>Palette Toner Version<p><p>The Palette palette makes it easy for us to extract colors from the Image. And you can specify that some type of color be extracted.</p></p> <ol> <ol> <li><code>Vibrant</code>The bright</li> <li><code>Vibrant</code>Dark Vivid Dark color</li> <li><code>Vibrant</code>light, Bright Colors</li> <li><code>Muted</code>Soft.</li> <li><code>Muted</code>Dark soft Dark Color</li> <li><code>Muted</code>Light soft bright colors</li> </ol> </ol><p><p>The color of the picture is a performance-intensive operation, and the Image's pixel values are traversed to analyze the contrast, so we're going to do it in an asynchronous thread.</p></p><pre><pre><code>如果操作本来就属于后台线程，可以使用：Palette p = Palette.generate(Bitmap bitmap);如果在主线程中，我们可以使用异步的方式：Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() { public void onGenerated(Palette palette) {  }});</code></pre></pre><p><p>When the operation is complete or an asynchronous callback, we can get the corresponding color value in the following way, and can specify the default value without getting it:</p></p><pre><pre><code>p.getVibrantColor(int defaultColor);p.getDarkVibrantColor(int defaultColor);p.getLightVibrantColor(int defaultColor);p.getMutedColor(int defaultColor);p.getDarkMutedColor(int defaultColor);p.getLightMutedColor(int defaultColor);</code></pre></pre><p><p>Before using palette, bitmap provides a pixel value to get the specified location:</p></p><pre><pre><code>bitmap.getPixel(x,y)</code></pre></pre><p><p>however, the method can only get the pixel value of a certain point, palette is to analyze all the pixel values of the whole bitmap, and select a number of pixels to compare more pixels, so that the selected color values to match the overall color value of the Picture.</p></p>Vector images of vectors<p><p>Vectors are also known as object-oriented images or drawing images, which are geometric entities that are based on mathematical equations such as points, lines, or polygons in computer graphics. The greatest advantage of vector graphics is that no distortion is possible, no matter magnification, reduction or rotation, and the biggest disadvantage is that it is difficult to perform realistic image effects with rich color levels.</p></p><p><p>Android L started to support vectors, and we can use it to handle some simple icons, which are easy to fit.</p></p><p><p>Support for vectors in Android L is built from an XML file, and a vector graph is generated from the path description of the vector graph, and the corresponding Java object is Vectordrawable.</p></p><p><p>Here is a vector map provided by the official documentation, using the change file, we can create a random zoom to reduce the heart shape is not distorted</p></p><pre><pre><code><vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="300dp" android:width="300dp" android:viewportHeight="40" android:viewportWidth="40"> <path android:fillColor="#ff00ff" android:pathData="M20.5,9.5 c-1.955,0,-3.83,1.268,-4.5,3 c-0.67,-1.732,-2.547,-3,-4.5,-3 C8.957,9.5,7,11.432,7,14 c0,3.53,3.793,6.257,9,11.5 c5.207,-5.242,9,-7.97,9,-11.5 C25,11.432,23.043,9.5,20.5,9.5z"/></vector></code></pre></pre><p><p>The pathdata data of a vector graph is the mathematical formula used to describe the vector graph, and its meanings are as follows:</p></p> <table> <thead> <tr> <th>Command Type</th> <th>Usage Description</th> <th>representative meaning</th> <th>examples Show</th> </tr> </thead> <tbody> <tr> <td>Move Instructions</td> <td>M x, y</td> <td>M move absolute position</td> <td>M 100,240</td> </tr> <tr> <td>Move Instructions</td> <td>M x, y</td> <td>M move relative to previous point</td> <td>M 100,240</td> </tr> <tr> <td>Drawing instructions</td> <td>L or L</td> <td>Draws a line from the current point to a specified point</td> <td>L 100,100</td> </tr> <tr> <td>Drawing instructions</td> <td>H or H</td> <td>Horizontal line</td> <td>H 100</td> </tr> <tr> <td>Drawing instructions</td> <td>V or V</td> <td>Vertical line</td> <td>V 100</td> </tr> <tr> <td>Drawing instructions</td> <td>C or C</td> <td>Three-time equation Bezier Curve</td> <td>C 100,200 200,400 300,200</td> </tr> <tr> <td>Drawing instructions</td> <td>Q or Q</td> <td>Two-time Equation Bezier curve</td> <td>Q 100,200 300,200</td> </tr> <tr> <td>Drawing instructions</td> <td>s or S</td> <td>Smoothing Three-time equation Bezier curves</td> <td>S 100,200 200,400 300,200</td> </tr> <tr> <td>Drawing instructions</td> <td>T or T</td> <td>Smoothing two-time equation Bezier curves</td> <td>T 100,200 300,200</td> </tr> <tr> <td>Drawing instructions</td> <td>A or a</td> <td>Elliptic</td> <td>A 5,5 0 0 1 10,10</td> </tr> <tr> <td>Close command</td> <td>Z or Z</td> <td>Connect the first and end points of a graph with a straight line</td> <td>Z</td> </tr> <tr> <td>Fill Rule</td> <td>F0</td> <td>EvenOdd Fill Rule</td> <td></td> </tr> <tr> <td>Fill Rule</td> <td>F1</td> <td>Nonzero fill rule</td> <td></td> </tr> </tbody> </table><p><p>Using the path command to do simple graphics is still possible, but complex graphics we need to use tools to generate, such as using Expression Design, you can directly paste from other software vector graphics, and then choose to export, when exported as a choice: file--export- > Export Properties---format->xaml Silverlight canvas to get vector graphics in XAML format, which is path.</p></p><p><p>Learn more about vector maps: http://www.w3.org/TR/SVG11/paths.html#</p></p><p><p>Android5.0 new features-images and Colors (drawable)</p></p></span>