Buscar..


Observaciones

Las fuentes de iconos son como los tipos de fuentes normales que tienen símbolos en lugar de letras. Se puede utilizar en su aplicación con la mayor facilidad.

Son:

  • Flexible
  • Escalable
  • Vectores
  • Procesable rapido
  • Peso ligero
  • Accesible

Efecto sobre el tamaño

Exportar una imagen en varios tamaños para dispositivos Android costaría su aplicación, un tamaño de activo adicional de alrededor de 30kB por imagen. Al agregar un archivo de fuente (.ttf) con alrededor de 36 iconos, solo costaría 9kB. Solo imagine el caso si está agregando 36 archivos individuales de varias configuraciones que serían alrededor de 1000kB. Es una cantidad razonable de espacio que ahorrará al usar fuentes de iconos.

Limitaciones de las fuentes de iconos.

  • Las fuentes de iconos se pueden utilizar en el cajón de navegación. No es posible utilizarlos en las vistas de navegación como icono de elementos de menú, ya que el archivo de menú no se puede crear sin especificar el título. Por lo tanto, es recomendable utilizar archivos svg como recursos para estos íconos.

  • Las fuentes de iconos no se pueden utilizar en el botón de acción flotante. ya que no tienen un atributo setText() .

  • Las fuentes externas no se pueden aplicar desde xml. Deben especificarse utilizando el archivo java. O bien, debe ampliar la vista básica y crear una vista como se especifica en esta publicación.

Cómo integrar fuentes de iconos

Para utilizar las fuentes de iconos, simplemente siga los pasos a continuación:

  • Agrega el archivo de fuente a tu proyecto

    Puede crear su archivo de icono de fuente a partir de sitios web en línea como icomoon , donde puede cargar archivos SVG de los iconos requeridos y luego descargar la fuente de icono creada. Luego, coloque el archivo de fuentes .ttf en una carpeta llamada fuentes (nombre como desee) en la carpeta de activos:

    Ubicación donde colocar el archivo de fuente

  • Crear una clase de ayuda

    Ahora, cree la siguiente clase auxiliar, de modo que pueda evitar repetir el código de inicialización para la fuente:

    public class FontManager {
      public static final String ROOT = "fonts/";
      FONT_AWESOME = ROOT + "myfont.ttf";
      public static Typeface getTypeface(Context context) {
        return Typeface.createFromAsset(context.getAssets(), FONT_AWESOME);
      }
    }
    

    Puede utilizar la clase Typeface para elegir la fuente de los activos. De esta manera puede establecer el tipo de letra para varias vistas, por ejemplo, para un botón:

    Button button=(Button) findViewById(R.id.button);
    Typeface iconFont=FontManager.getTypeface(getApplicationContext());
    button.setTypeface(iconFont);
    

    Ahora, el tipo de letra del botón se ha cambiado a la fuente de icono recién creada.

  • Recoge los iconos que quieras.

    Abra el archivo styles.css adjunto a la fuente del icono. Allí encontrarás los estilos con caracteres Unicode de tus iconos:

    .icon-arrow-circle-down:before {
      content: “\e001”;
    }
    .icon-arrow-circle-left:before {
      content: “\e002”;
    }
    .icon-arrow-circle-o-down:before {
      content: “\e003”;
    }
    .icon-arrow-circle-o-left:before {
      content: “\e004”;
    }
    

    Este archivo de recursos servirá como un diccionario, que asigna el carácter Unicode asociado con un icono específico a un nombre legible para el ser humano. Ahora, crea los recursos de cadena de la siguiente manera:

    <resources>
      <! — Icon Fonts -->
      <string name=”icon_arrow_circle_down”>&#xe001; </string>
      <string name=”icon_arrow_circle_left”>&#xe002; </string>
      <string name=”icon_arrow_circle-o_down”>&#xe003; </string>
      <string name=”icon_arrow_circle_o_left”>&#xe004; </string>
    </resources>
    
  • Usa los iconos en tu código

    Ahora, puede usar su fuente en varias vistas, por ejemplo, de la siguiente manera:

    button.setText(getString(R.string.icon_arrow_circle_left))
    

    También puede crear vistas de texto de botón usando las fuentes de iconos:

    Ejemplo de botones con iconos en ellos.

TabLayout con fuentes de iconos

public class TabAdapter extends FragmentPagerAdapter {

CustomTypefaceSpan fonte;
List<Fragment> fragments = new ArrayList<>(4);
private String[] icons = {"\ue001","\uE002","\uE003","\uE004"};

public TabAdapter(FragmentManager fm, CustomTypefaceSpan fonte) {
    super(fm);
    this.fonte = fonte
    for (int i = 0; i < 4; i++){
        fragments.add(MyFragment.newInstance());
    }
}

public List<Fragment> getFragments() {
    return fragments;
}

@Override
public Fragment getItem(int position) {
    return fragments.get(position);
}

@Override
public CharSequence getPageTitle(int position) {
    SpannableStringBuilder ss = new SpannableStringBuilder(icons[position]);
    ss.setSpan(fonte,0,ss.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);
    ss.setSpan(new RelativeSizeSpan(1.5f),0,ss.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE );
    return ss;
}



@Override
public int getCount() {
    return 4;
}

}
//..
TabLayout tabs;
ViewPager tabs_pager;
public CustomTypefaceSpan fonte;
//..

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //...
    fm = getSupportFragmentManager();
    fonte = new CustomTypefaceSpan("icomoon",Typeface.createFromAsset(getAssets(),"myfont.ttf"));
    this.tabs = ((TabLayout) hasViews.findViewById(R.id.tabs));
    this.tabs_pager = ((ViewPager) hasViews.findViewById(R.id.tabs_pager));
    //...
}

@Override
protected void onStart() {
    super.onStart();
    //..
    tabs_pager.setAdapter(new TabAdapter(fm,fonte));
    tabs.setupWithViewPager(tabs_pager);
    //..


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow