Skip to content

tackor/Android

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

#Android 优化 图标文字

使用图标文字代替图片的实践

进入项目的main文件夹创建一个assets文件夹,并在assets下创建fonts文件夹, 把非系统字体放在fontsSnip20170218_2.png

###使用:

  1. 先在.xml文件,设置好文本

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="50sp"
            android:text="\ue900"
            android:fontFamily="IconMoon-Free.ttf"/>
    

Snip20170218_5.png

  1. .java文件中设置字体

    public class MainActivity extends AppCompatActivity {
    
        private TextView screenTitle;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
    		 // 设置TextView使用导入的文本
            screenTitle = (TextView) findViewById(R.id.main_text);
            Typeface iconMoonFont = Typeface.createFromAsset(getAssets(), "fonts/IcoMoon-Free.ttf");
            screenTitle.setTypeface(iconMoonFont);
    
        }
    }
    

Snip20170218_4.png

  1. 效果: Snip20170218_7.png

  2. 图标文本 & ImageView & TextView.drawableLeft 三者比较 Snip20170218_10.png

###图标文本的使用 图标文本一般使用在导航栏或标签栏上, 以 天猫 为例

  1. 图标文本使用在导航栏上 Snip20170218_13.png 补充说明: 之所以方括号后面有说明文字是 textview.contentDescription 属性 Snip20170218_23.png

  2. 在标签栏上使用图标文本 Snip20170218_18.png 注意: 上面的图标和下面的文字天猫都是文字

  3. 图标文本区别于TextView.drawableTopSnip20170218_17.png

标签文本的使用需要满足一个条件: 该图标是纯色的 只有满足这个条件如果能使用图标文本就尽量使用, 而不要讲图标制作成.png图片.

为什么要使用图标文本代替图片

使用图标文本可以将多个图标放在一个字体文件中(我这里是.ttf格式的), 文件的尺寸是非常小的. 而如果将所有的图标制作成.png图片会比较大, 通过图标文本可以优化Apk(Android) / ipa(iOS) 的大小. 属于安装包的优化, 而这种思想也可以用在iOSApp制作中

如何制作字体

使用该软件: Birdfont 如果想要一些现成的图标字体可以在该网址上找: https://icomoon.io

Demo 地址: https://github.com/tackor/Android

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages