Introduction to the
Scalable Vector Graphics (SVG) is a graphical format based on extensible Markup Language (XML) for describing two-dimensional Vector Graphics. SVG is an open standard developed by the W3C. — From Wikipedia
As opposed to bitmaps, SVG does not degrade images due to scaling, as bitmaps do. Image has nothing to do with resolution, easy to put, for android machine pit dad’s resolution is once and for all. Its advantage is that it saves space and is easy to use
Android also added support for using SVG vectors in 5.0
Before the article begins, first wall crack amway a website, Ali iconfont, massive online vector map, early collection early wealth
VectorDrawable
Android 5.0 introduces VectorDrawable to support vector graphics (SVG), and AnimatedVectorDrawable to support vector animation
First download an SVG image from iconFont
When you open it with Editplus, the style you see when you format it is
Create a Vector Asset file
New -> Vector Asset
Select Local File select the Local SVG File to import, and then the next step, finish
View the newly added file:
* Although it is a class, it is usually set by configuring the XML to the control to be used. In the Android project, in the resource folder res/drawable/, it is described by the tag
ImageView use
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_arrows_down_line"/>
Copy the code
TextView use
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="@drawable/ic_arrows_down_line"
android:drawablePadding="4dp"
android:text="drawable right"/>
Copy the code
MenuItem MenuItem can perfect support vector graph, you can view the following article links the last chestnuts blog.csdn.net/u010356768/…
attribute
Width, height: the width and height of the image. ViewportHeight, viewportWidth: corresponds to the above height width equal number of copies. Taking IC_arrows_down_line as an example, it can be imagined that the square with length and width of 24dp is divided into a grid of 1024×1024. In this grid, the coordinates of points can be easily described. The image is the fillColor formed by connecting these points. It is better to write the color value # XXXXXXXX here instead of @color/some_color to avoid the pathData error that may be reported by some models below 5.0: The path to paint in the grid described in 2. The specific grammar is not the focus of this article, so it will not be expanded
Turn VectorDrawable Bitmap
public Bitmap getBitmapFromVectorDrawable(Context context, int drawableId) {
Drawable drawable = ContextCompat.getDrawable(context, drawableId);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
drawable = (DrawableCompat.wrap(drawable)).mutate();
}
Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
}
Copy the code
The use of iconfont
The use of Iconfont in Android is described in great detail on the website
Let me summarize it again:
1. Find the icon and download the code
2. Place the downloaded TTF file in the Assets folder
3. Open the demo_Unicode.html file and look for the required character code
4. Assign a value to TextView
<TextView
android:id="@+id/tv_down_load"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="30dp"
android:textColor="#ff0000"/>
Copy the code
It’s a waste of memory to read the iconfont. TTF text all the time. We can pull this out
The first thing we need to read is the iconfont. TTF file in assets; So I’m just going to put it in my custom Application, so I only have to read it once, and it looks like this
public class Myapplication extends Application {
public static Typeface iconfont;
public static Typeface getIconfont(Context context) {
if (iconfont != null) {
return iconfont;
} else {
iconfont = Typeface.createFromAsset(context.getAssets(), "iconfont.ttf");
}
return iconfont;
}
}
Copy the code
So here we instantiate iconfont. And then we’re going to set a Typeface for each TextView, which is definitely not what we want, so we’re going to have a custom TextView and then when we initialize it we’re going to have a setTypeface that looks like this
public class TextViewIcon extends AppCompatTextView { public TextViewIcon(Context context) { super(context); init(context); } public TextViewIcon(Context context, AttributeSet attrs) { super(context, attrs); init(context); } public TextViewIcon(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context); } private void init(Context context) { setTypeface(Myapplication.getIconfont(context)); }}Copy the code
Use it directly in the Layout file
<com.example.xx.myapplication.TextViewIcon
android:id="@+id/tv_down_load"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="30dp"
android:textColor="#ff0000"/>
Copy the code
The effect is the same as before
Iconfont Dynamic setting
textView.setTextColor(Color.parseColor("#0000ff")); textView.setTextSize(30); textView.setText("\ueb68;" );Copy the code
It’s worth noting
Replace "&#x" with "\u" in setText, using unicode charactersCopy the code
The last
There are many advantages to vector drawings, but they are not omnipotent. Vector graphics are especially suitable for icon applications, but should not be used for applications such as placeholder or Error, which require frequent reclaims, because vector graphics are not supported by hardware acceleration
Reference:
Blog.csdn.net/dick_zeng/a…