使用TextView显示ImageView效果

最新推荐文章于 2021-11-07 17:00:11 发布
最新推荐文章于 2021-11-07 17:00:11 发布
阅读量343 收藏
点赞数
文章标签： 移动开发 javascript java ViewUI
原文链接：https://my.oschina.net/u/3015461/blog/915409
版权

可以解决图标适配、同种图标不同颜色、大小问题；可以携带字体。

一、矢量图标及其编号和字体库的准备

http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.1.MeYAlv

阿里的矢量图库，可下载，可自定义上传图标；选择下载代码，在下载文件中可以选择打开.html文件，查看图标对应字符设置。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">

    <style type="text/css">

        @font-face {font-family: "iconfont";
          src: url('iconfont.eot'); /* IE9*/
          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('iconfont.woff') format('woff'), /* chrome, firefox */
          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        .iconfont {
          font-family:"iconfont" !important;
          font-size:16px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xf0343;</i>
                    <div class="name">分享</div>
                    <div class="code">&amp;#xf0343;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0344;</i>
                    <div class="name">日历1</div>
                    <div class="code">&amp;#xf0344;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0345;</i>
                    <div class="name">票房</div>
                    <div class="code">&amp;#xf0345;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0346;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#xf0346;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0347;</i>
                    <div class="name">日历2</div>
                    <div class="code">&amp;#xf0347;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0348;</i>
                    <div class="name">更多</div>
                    <div class="code">&amp;#xf0348;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0349;</i>
                    <div class="name">日历4</div>
                    <div class="code">&amp;#xf0349;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf034a;</i>
                    <div class="name">日历3</div>
                    <div class="code">&amp;#xf034a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe602;</i>
                    <div class="name">评价-01</div>
                    <div class="code">&amp;#xe602;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe604;</i>
                    <div class="name">搜索-01</div>
                    <div class="code">&amp;#xe604;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe607;</i>
                    <div class="name">添加-01</div>
                    <div class="code">&amp;#xe607;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe608;</i>
                    <div class="name">系统管理-01</div>
                    <div class="code">&amp;#xe608;</div>
                </li>
            
        </ul>
        <h2 id="unicode-">unicode引用</h2>
        <hr>

        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
        <ul>
        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
        </ul>
        <blockquote>
        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
        </blockquote>
        <p>unicode使用步骤如下：</p>
        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
        <pre><code class="lang-js hljs javascript">@font-face {
  font-family: <span class="hljs-string">'iconfont'</span>;
  src: url(<span class="hljs-string">'iconfont.eot'</span>);
  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
}
</code></pre>
        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
        <pre><code class="lang-js hljs javascript">.iconfont{
  font-family:<span class="hljs-string">"iconfont"</span> !important;
  font-size:<span class="hljs-number">16</span>px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>

        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>


</body>
</html>

二、在studio工程java、src同级目录下建立assets文件夹，在其下面建立fonts文件夹，将下载的.ttf文件放入。

对全局的textview进行设置字体工具类

方式一、使用IconFontLayoutFactory 在Activity中LayoutInflaterCompat.setFactory进行设置

public class IconFontLayoutFactory implements LayoutInflaterFactory{

    private static Typeface mTypeface;
    private AppCompatDelegate mAppCompatDelegate;

    public IconFontLayoutFactory(Context context ,AppCompatDelegate appCompatDelegate){

        if(mTypeface==null) mTypeface=Typeface.createFromAsset(context.getAssets(),"fonts/fontawesome-webfont.ttf");
        mAppCompatDelegate=appCompatDelegate;
    }

    @Override
    public View onCreateView(View parent, String name, Context context, AttributeSet attrs) {

        View view=mAppCompatDelegate.createView(parent,name,context,attrs);

        if(view instanceof TextView){

            ((TextView)view).setTypeface(mTypeface);
        }

        return view;
    }

}

对于全局来说，一般有个BaseActivity.class;简单设置一个，对于所有子类都可以设置。

public class BaseActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
       LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconFontLayoutFactory(this, getDelegate()));
        super.onCreate(savedInstanceState);

        initDatas();
        initViews();

    }

    protected void initDatas() {
    }

    protected void initViews() {
    
    }
}

LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconFontLayoutFactory(this, getDelegate()));

注意上面这句代码需要放到 super.onCreate(savedInstanceState)的前面

在xml中布局使用

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="&#xf0a9;" />


<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello world &#xf242;" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:text="&#xf206;" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="40sp"
    android:textColor="#FF00FF00"
    android:text="&#xf206;" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#FFFF0000"
    android:text="&#xf206;" />

方式二、与方式一的主要区别就是对布局View递归的判断处理和使用内部Api处理View问题

public class FontHelper {

   public static final String FONTS_DIR = "fonts/";
   public static final String DEF_FONT = FONTS_DIR + "fontawesome-webfont.ttf";

   public static final void injectFont(View rootView) {

      injectFont(rootView, Typeface.createFromAsset(rootView.getContext().getAssets(), DEF_FONT));
   }

   public static final void injectFont(View rootView, Typeface tf) {
      if (rootView instanceof ViewGroup) {
         ViewGroup group = (ViewGroup) rootView;
         int count = group.getChildCount();
         for (int i = 0; i < count; i++) {
            injectFont(group.getChildAt(i), tf);
         }
      } else if (rootView instanceof TextView) {
         ((TextView) rootView).setTypeface(tf);
      }
   }

}

使用在actiivty中调用，两种方式运行效果相同。

FontHelper.injectFont(findViewById(R.id.ll));这个需要在加载布局的后面使用。

https://github.com/Qishuichixi/IconFontDemo

此文只为记录，向大神致敬

http://blog.csdn.net/qibin0506/article/details/48675839

http://mp.weixin.qq.com/s/VCTPXO49dp2x3w7tOFPvvw

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/u/3015461/blog/915409

chengniqie9367
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TextView+ImageView+LinearLayout实现底部导航栏
qq_40449414的博客
01-19 2111
效果图:activity_main.xml布局:xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xm
TextView ImageView组件
ZL_1205的博客
09-12 564
这一次介绍两个简单的组件的应用：TextView，ImageView。希望对大家能有所帮助~
使用TextView实现ImageView效果
qq_34963282的博客
10-30 793
要想TextView实现ImageView的效果，本质上还是加载的图片，只不过图片的格式变了， 从阿里巴巴矢量图库将需要的图片下载到购物车里，打开本地存储的位置，找到ttf结尾的文件，复制到项目的assets目录下，到这里初始化的工作就完成了， 此时java中需要做的是自定义类继承LayoutInflaterFactory，并重写其中的几个方法， package com.
android studio 学习-控件TextView，buttom，ImageView
GAOK11的博客
11-07 713
跑马灯 TextView <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> &
Android 基础组件TextView、ImageView、ScrollView等使用及属性说明
吕氏春秋i
03-06 768
基础组件用户布局 View属性 1.background 背景色 2.padding 内间距 3.gravity 对齐方式 4.id 找到组件的一个唯一标记 5.visibility 可见的 6.tag 找到组件的一个唯一标记 7.enable 设置是否可用，如果它的值为:&amp;quot;true&amp;quot;怎可用，若
Android TextView和ImageView简单说明
09-05
在布局设计中，`TextView`和`ImageView`的组合使用能够创建出各种各样的UI元素，如按钮、标签、列表项等。例如，一个带有图标的按钮可能由一个包含`TextView`和`ImageView`的`LinearLayout`或`RelativeLayout`组成。...
Android中TextView和ImageView实现倾斜效果
08-29
下面将详细介绍如何在Android中使用TextView和ImageView实现倾斜效果。 TextView倾斜 要实现TextView倾斜效果，我们可以通过自定义TextView来实现。首先，我们需要创建一个继承自TextView的类，例如MyTextView： `...
Android 中TextView的使用imageview被压缩问题解决办法
08-30
然而，当TextView中的文本内容过多时，可能会导致与其相邻的ImageView被压缩，影响显示效果。这个问题在给定的描述中有所体现，即在水平线性布局(LinearLayout)中，TextView的文字增多时，ImageView的宽度被挤压，...
android使用Textview实现伸缩效果
08-28
Android 使用 Textview 实现伸缩效果 Android 中，Textview 是一个常用的控件，用于显示文本信息。在实际开发中，我们经常会遇到 Textview 展示不完全的情况，这时我们需要使用一些技巧来解决这个问题。本文将详细...
安卓UI控件-TextView、ImageView及其子类
Hello World ^—^
10-13 941
View简介Android应用的绝大部分UI组件都放在android.widget包及其子包、android.view包及其子包中，android应用的所有UI组件都继承了View类，View的子类很繁杂。 这是网上的一张图片，表示了View及其子类的继承关系，红色的代表常用的控件。 TextView及其子类TextView从上图可以看出TextView最直接继承了View，还是EditText
自定义图文控件ImageTextView
12-22
自定义图文控件ImageTextView，支持垂直和水平方向的图文控件，并且支持右上显示小红点或者文字。
TextImageView,在图像上绘制可展开文本的imageview子类.zip
10-14
一个ImageView子类，它在图像上绘制一个或多个可扩展的、可旋转的、可伸缩的文本。
安卓基本控件（TextView、ImageView）以及布局（线性布局、相对布局）的介绍
weixin_51906150的博客
10-09 3052
安卓基本控件（TextView、ImageView）以及布局（线性布局、相对布局）的介绍 UI ​ 进行软件开发，我们经常会接触到UI，那UI是什么捏？UI全称为User Interface，即用户界面，简单的说，就是手机上可以看到的可以操作的界面。 ​ 在软件开发过程中，界面设计和功能开发同样重要，是Android 应用中直接影响用户体验最关键的部分。界面美观的应用程序不仅可以大大增加用户粘性，还能吸引更多的新用户。而Android给我们提供了大量的UI开发工具，只要合理使用它们，就可以编写出各种各样的好
TextView和EditText、ImageView的基本属性
qq_41829332的博客
09-06 761
TextView(显示文本的控件)： android:layout_width 控件宽度 android:layout_heigh 控件高度 android:id 控件id android:text 控件显示文字 android:textSize 文字大小 ...
TextView 控件的总结
ahubenkui的博客
07-15 278
1 在实际开发中 TextView 的使用 还是比较多的,常见的属性 是知道的，但是有些接口在特定场景使用，还是要总结下的我在代码中设置 文字的行间距，源码中提供相应的接口contentView.setLineSpacing(mTextLineSpace,1);mTextLineSpace 是设置的行间距的大小 ，1 是行间距的倍数，组合起来用的是话 行间距的最终的大小 是 mTextLineS
Android TextView中显示图片的4种方式
热门推荐
blastxc
03-17 4万+
我们知道，TextView控件一般是用来显示文本的，而图片一般是用ImageView控件来显示。那TextView能否显示图片呢？答案是肯定的！下面列出常见的4种方式。
android怎样将textview置于imageview之上
Dream It Possible
05-11 1万+
http://allenshao.iteye.com/blog/867581 目前看来有三种方法可以实现 1. framelayout, a framelayout is used to stack a TextView on top of an ImageView Java代码   "http://schemas.android.com/apk/r
Android布局优化之TextView、ImageView合二为一
qq_36523667的博客
12-23 4071
这样一个TextView+ImageView的组合，可以仅仅通过一个TextView来实现。利用的是TextView的drawableTop属性 <TextView android:drawableTop="@drawable/emoji1" android:layout_width="231dp" android:layout_height="wrap_conten
帮我安卓用JAVA给TextView和ImageView的组合设置热区，使用padding
最新发布
03-07
您可以使用android:padding属性来设置TextView和ImageView的热区。例如，您可以在布局文件中添加以下代码： android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值