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="&#xeb80;"
        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="&#xeb80;"
        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…