Many times, we developers, whether it is to understand new technologies, or to find a side job for ourselves to increase income. We will all develop an APP (website) of our own. However, as an individual developer, during the development process, a considerable part of the time is not dealing with business. Instead, you're looking for or working with images for your own projects.
With the progress of society and the development of technology... the current projects no longer only use png and other pictures as icons.
Below, introduce several easy and other ways to generate icons. Let's save more time and conceive your own projects.
1. Using svg images
Svg Scalable vector graphics that can be set to any size without blurring the picture.
Taking Android as an example, Android supports svg after 5.0. Moreover, as far as the current equipment situation is concerned, the minimum version of the project can also reach 5. So, instead of doing what you did before,
use
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
Come backward compatible.
Next, let's try to load the svg image into our project
1. Use iconfont to download svg files
-
First, we open the Iconfont official website
-
Then, select a picture and click to download the svg file
In this way, the svg file is downloaded. However, we cannot use this file directly. Because it is not the same as the SVG (vector) used in android.
We need to convert the image to the SVG format required by Android.
There are two conversion methods, one is conversion through online tools, and the other is directly through the import function of Android (seamless docking).
- Convert to Android vector
- 1. Conversion by tools
Let me introduce first, through a tool to convert the svg file into Android, the vector to be used, we need to use the tool to convert it into the Vector required by Android: tool
address
After conversion, we download it locally and import it into the project
The content is as follows,
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="1024dp"
android:height="1024dp"
android:viewportWidth="1024"
android:viewportHeight="1024">
<path
android:fillColor="#5C5C66"
android:pathData="M149.333333 938.666667a21.333333 21.333333 0 0
1-21.333333-21.333334v-106.666666a85.426667 85.426667 0 0
1-85.333333-85.333334V213.333333a85.426667 85.426667 0 0 1
85.333333-85.333333h768a85.426667 85.426667 0 0 1 85.333333
85.333333v512a85.426667 85.426667 0 0 1-85.333333
85.333334H286.166667l-121.746667 121.753333A21.333333 21.333333 0 0 1 149.333333
938.666667zM128 170.666667a42.713333 42.713333 0 0 0-42.666667
42.666666v512a42.713333 42.713333 0 0 0 42.666667 42.666667h21.333333a21.333333
21.333333 0 0 1 21.333334 21.333333v76.5l91.58-91.586666A21.333333 21.333333 0 0
1 277.333333 768h618.666667a42.713333 42.713333 0 0 0
42.666667-42.666667V213.333333a42.713333 42.713333 0 0 0-42.666667-42.666666z" />
</vector>
Inside is the vector that Android needs.
- 2. For the Android platform, use Android studio to import directly. When importing from Android studio
as follows
, you can reset the width and height.
Finally, when using. Can be modified by width, height. to control the size of the image
android:width="128dp"
android:height="128dp"
Control the color of the picture through the following properties
android:fillColor="#00000000"
android:strokeWidth="0.8"
android:strokeColor="#33FFFFFF"
Finally, in the project, use
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_test_svg"
android:orientation="vertical">
In this way, we can use svg pictures happily, and we don't need to waste time and effort to find pictures anymore.
2. Use the iconfont image library
iconfont provides us with a set of ttf libraries. In this way, we can load our pictures just like loading font libraries.
The overall process is very similar to using a custom font library.
The overall process is:
- 1. Select the desired picture, if the shopping cart
- 2. In the shopping cart, download the code of the picture (the picture will be represented by characters)
- 3. Put the ttf library in the code into the project
- 4. Use TextView to load Typeface
- 5. Add the picture through the TextView#setText method
Next, let's run through the overall process to see how to play.
iconfont instructions - official links (including Web, Android, iOS)
Take the Android platform as an example
2.1. Select the pictures we want to use and put them all into the shopping cart
Open the official website of iconfont, click on the picture we want to use, and the following icon will appear
Here, we choose to add to the shopping cart. Because, we may need to import a lot of pictures, and finally through the shopping cart, it will be much more convenient to import at one time.
2.2, click the shopping cart, download the code
The downloaded code structure
After downloading the code, we will add the selected image to the project.
2.3, put the ttf file into the project
Put the icon-font.ttf file under the assets-iconfont of the project (as long as it can be found under assets)
Now, we have imported the library. Later, the image is loaded using
2.4, import the code corresponding to the picture
Open in the browser and download index.html in the file
Copy the code to the project
corresponding to the project
<!-- 钱包-->
<string name="icon_wallet"></string>
2.5, Write a control for loading pictures
public class IconFontTypeface {
public static String ASSETS_FONT = "iconfont/iconfont.ttf";
private static Typeface sTypeface;
/***
* 设置图片
*/
public static Typeface config(Context context) {
if (sTypeface == null) {
sTypeface = Typeface.createFromAsset(context.getAssets(), ASSETS_FONT);
}
return sTypeface;
}
}
custom control
public class IconFontTextView extends AppCompatTextView {
public IconFontTextView(@NonNull Context context) {
super(context);
init(context);
}
public IconFontTextView(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
public IconFontTextView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
Typeface typeface = IconFontTypeface.config(context);
setTypeface(typeface);
}
}
2.6, use controls to load pictures
<com.export.pdf.iconfont.IconFontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#00FF00"
android:textSize="200sp"
android:text="@string/icon_wallet"
/>
android:textColor="#00FF00" , control the color of the picture
android:textSize="200sp" , control the size of the picture
Effect
At this point, the entire loading process is complete
If you want to add a new iconfont picture, remember to change the iconfont.ttf too (the newly downloaded picture is not in the previous ttf)~