Development tips - Image Resource Management

Android Several schemes of image resource management

Preface

A complete project is inseparable from image resources , In a Apk In the composition of , Most of them are resource files , If too many resources lead to Apk Too big , How to manage resource images is a App Developer headaches ！ Except those resources are distributed through the background ...

Here are some common image resource management schemes ：

One 、png picture

I believe you have just come into contact Android Development is all about png Picture. , And it is divided into three parts according to the resolution 、 Four sizes hdpi xhdpi xxhdpi xxxhdpi etc. . If you only use one size , Then it will stretch on the matching other resolution devices / The compressed image .

If the picture is not used properly, it will take up more memory space , More likely to lead to OOM.

Put the same picture in different places drawable Folder （drawable-hdpi, drawable-xhdpi, drawable-xxhdpi） Next , same dpi The pictures loaded from the folder under ,bitmap Use the same amount of memory .

For the same picture , On different phones 、 Different screen density folders , The space occupied is different .

With mdpi For example ,mdpi The pixels of the next Icon correspond to hdpi The pixel Corresponding xhdpi The pixel Corresponding xxhdpi The pixel mdpi - 21 * 21
hdpi - 32 * 33 yes m Of 1.5 times xhdpi - 42 * 43 yes m Of 2 times xxhdpi - 63 * 64 yes m Of 3 times

Android It is also smart to find pictures , If there is no picture with the corresponding resolution, you will look up first , I can't find it. I'm looking down . If found, the image will be magnified by the corresponding multiple .

Formula for ： Take up memory = Image width X Picture height /(( Resource folder density / Cell phone screen density )^2) * The number of bytes per pixel of color format .

So the strategy is to use the corresponding resolution for the relative pictures , If you don't want to put so many pictures , Then try to put a high-resolution picture , Such as xhdpi xxhdpi Of . But high-resolution images often take up a lot of space , So compress the picture .

Two 、webp picture

comparison png,webp Format pictures save more space , Can reduce the Apk Size , We usually have 2 Two ways to convert .

Now? AS Can be very convenient to put a png Convert the picture to webp Pictures of the , Just click res Folder right-click , You can directly convert the entire res Catalog , If you want to accurately convert the specified drawable, Then you can do it directly drawable Folder right-click . as follows

Click Convert and go all the way next, The conversion can be completed .

Another way is through gradle plug-in unit , Dynamically generated during packaging webp file , The original picture is still png. What is more famous is booster plug-in unit .

 booster_version = '2.4.0'

 classpath "com.didiglobal.booster:booster-gradle-plugin:$booster_version"

 classpath "com.didiglobal.booster:booster-task-compression-cwebp:$booster_version"

stay App Of gradle below The use of plug-in apply plugin: 'com.didiglobal.booster' Then it can be generated when compiling webp picture , See for specific use here .

3、 ... and 、svg picture

If you worry that too many resolution images will lead to Apk Bigger , Then we can use SVG Vectorgraph , Just one picture , It can be enlarged and reduced without damage .

For example, we need to come from designers svg Pictures of the , as follows ：

Import into project

 

svg Will report an error directly , We need to turn to xml Description file , That is to say SVG to VectorDrawable . There are many tools on the Internet , Here I use one for my own use Tools .

 

Drag it in when you use it , Click download to complete .

 

xml File import to drawable In the folder , Preview below ： 

 

Yes, it is imported in this way svg It's colored ！

In the project build.gradle Middle configuration vectorDrawables.useSupportLibrary = true Now we can use it directly .

ImageView And AppCompatImageView You can use . The code is as follows ：

       <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/d_15dp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="@dimen/d_40dp"
                android:src="@drawable/kafei" />

            <ImageView
                android:layout_width="40dp"
                android:layout_height="@dimen/d_40dp"
                android:src="@drawable/kele" />

            <ImageView
                android:layout_width="40dp"
                android:layout_height="@dimen/d_40dp"
                android:src="@drawable/shutiao" />

            <ImageView
                android:layout_width="40dp"
                android:layout_height="@dimen/d_40dp"
                android:src="@drawable/xuegao" />

            <ImageView
                android:layout_width="40dp"
                android:layout_height="@dimen/d_40dp"
                android:src="@drawable/zhenzhunaicha" />

            <androidx.appcompat.widget.AppCompatImageView
                app:srcCompat="@drawable/mianhuatang"
                android:layout_width="40dp"
                android:layout_height="40dp"/>

        </LinearLayout>

effect ：

Use SVG Picture comparison png And webp In terms of pictures , Will further reduce APK Volume , There is no need for multiple sets of pictures with corresponding resolutions . It's very convenient .

Four 、iconfont

Android Font files can also be specified in , We can do it in iconfont Website Download the pictures , If it is our own design, we can also upload it to iconfont In my own project , Then download the code .

The core is through iconfont How to download code , The source of the image can be open source , They can also be designed by themselves .

After downloading and decompressing, the file is as follows ： 

 

What we need to use index.html It defines the image code ,iconfont.ttf Is what we need to import into the project . We need to take iconfont.ttf The assets Under the table of contents .

Then we define a custom TextView Specifically for loading iconfont.

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) {
        setTypeface(FontCache.getIconFontTypeFace("", context));
    }

}


public class FontCache {

    public static Typeface iconfont;

    // obtain IconFont Of TypeFace
    public static Typeface getIconFontTypeFace(String iconfontNum, Context context) {
        if (iconfont != null) {
            return iconfont;
        } else {
            iconfont = Typeface.createFromAsset(context.getAssets(), "iconfont" + iconfontNum + ".ttf");
        }
        return iconfont;
    }

}

We can use it directly TextView To load the font file . Open the font file in the compressed file index.html

We use it directly unicode It's just a string . The code is as follows ：

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/d_15dp"
            android:orientation="horizontal">

            <com.guadou.lib_baselib.font_text_view.IconFontTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="&#xe65e;"
                android:textColor="@color/gray"
                android:textSize="@dimen/d_40dp" />

            <com.guadou.lib_baselib.font_text_view.IconFontTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="&#xe660;"
                android:textColor="#E91E63"
                android:textSize="@dimen/d_40dp" />

            <com.guadou.lib_baselib.font_text_view.IconFontTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="&#xe661;"
                android:textColor="#009688"
                android:textSize="@dimen/d_40dp" />

            <com.guadou.lib_baselib.font_text_view.IconFontTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="&#xe690;"
                android:textColor="#FF9800"
                android:textSize="@dimen/d_40dp" />


            <com.guadou.lib_baselib.font_text_view.IconFontTextView
                android:id="@+id/tv_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#00BCD4"
                android:textSize="@dimen/d_40dp" />

        </LinearLayout>

effect ：

It is important to note that in xml You can use unicode Yes. , But in Java You can't use it directly in .

      mBinding.tvIcon.text = ""

The effect is ：

 

We need to know e6cc Is its real code , stay Java If it is set in, it needs to be changed to  

 

So that you don't make a mistake , If the format is wrong, it will be red , Compilation failed .

If it is uploaded by ourselves svg picture , Remember to remove the color from the picture . Pass in svg After the picture , Click the download code in my icon to use , It is the same as the above method .

Customize SVG Image upload , And download iconfont The effect after the code is as follows ：

 

The disadvantage is that the current display , The icon style can only be displayed on the preview page after compilation ：

 

After the compilation, the picture can be displayed normally ： 

 

This way can be considered as svg Upgraded version , And it takes up more space than SVG The picture of is smaller , For example, we iconfont.ttf It defines 10 individual SVG picture , But his size is 11k, Sometimes one of us svg The size of the picture may be 10k, It can be said to be the ultimate compression apk size .

And another advantage is that there is no need for resource confusion , Natural resources are confused , You can never be iconfont.ttf Find my picture resources in the file . Than wechat res The confusion scheme is better .

The disadvantage is that it is troublesome to use , At the same time, it needs to be in iconfont Create project management resources in , If the resource is updated or deleted , Unable to accurately manage . Don't want to png,svgn like that , I can directly find unused resources and delete them , With the iteration of the version , The renewal of resources ,iconfont Managing resources in this way can be cumbersome ！

summary

The above schemes , Each have advantages and disadvantages , Here we just introduce and discuss the advantages and disadvantages of several schemes and their basic implementation . In the actual project development, you can choose according to your needs .

this paper Source code Here it is ！ If there are more and better solutions , You can discuss in the message area ！

author ：newki
link ：https://juejin.cn/post/7111221172297007118
source ： Rare earth digs gold
The copyright belongs to the author . Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source .