サーチ…


備考

アイコンフォントは、文字の代わりにシンボルを持つ通常のフォントタイプと似ています。ほとんどの場合、アプリケーションで使用できます。

彼らです:

  • フレキシブル
  • スケーラブル
  • ベクトル
  • 迅速処理可能
  • 軽量
  • アクセス可能な

サイズへの影響

アンドロイドデバイス用にさまざまなサイズの画像を書き出すと、アプリケーションごとに費用がかかり、画像あたり約30kBのアセットサイズが追加されます。フォントファイル(.ttf)に約36個のアイコンを追加すると、わずか9kBのコストがかかります。さまざまな設定の36個の個別ファイルを追加する場合は、1000kB程度になるでしょう。これは、アイコンフォントを使用することで節約できるスペースです。

アイコンフォントの制限。

  • アイコンフォントはナビゲーションドロワーで使用できます。タイトルを指定せずにメニューファイルを作成することはできないため、ナビゲーションビューでメニュー項目のアイコンとして使用することはできません。したがって、これらのアイコンのリソースとしてsvgファイルを使用することをお勧めします。

  • 浮動アクションボタンではアイコンフォントを使用できません。 setText()属性を持たないためです。

  • xmlから外部フォントを適用することはできません。それらはjavaファイルを使用して指定する必要があります。それ以外の場合は、基本的なビューを拡張し、このポストで指定されたビューを作成する必要があります

アイコンフォントを統合する方法

アイコンフォントを使用するには、次の手順に従ってください:

  • プロジェクトにフォントファイルを追加する

    icomoonなどのオンラインWebサイトからフォントアイコンファイルを作成して、必要なアイコンのSVGファイルをアップロードし、作成したアイコンフォントをダウンロードすることができます。次に、 .ttfフォントファイルをassetsフォルダにfontsという名前のフォルダに入れます。

    フォントファイルを置く場所

  • ヘルパークラスを作成する

    次に、フォントの初期化コードを繰り返さないように、次のヘルパークラスを作成します。

    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);
      }
    }
    

    アセットからフォントを選択するためにTypefaceクラスを使用することができます。このようにして、タイプフェイスをさまざまなビュー(ボタンなど)に設定できます。

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

    今、ボタンの書体が新しく作成されたアイコンフォントに変更されました。

  • あなたが望むアイコンを選ぶ

    アイコンフォントに添付されているstyles.cssファイルを開きます。そこにあなたのアイコンのUnicode文字でスタイルを見つけることができます:

    .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”;
    }
    

    このリソースファイルは辞書として機能し、特定のアイコンに関連付けられたUnicode文字を人間が読める名前にマップします。次に、文字列リソースを次のように作成します。

    <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>
    
  • コード内のアイコンを使用する

    さて、次のように、あなたのフォントをさまざまなビューで使うことができます:

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

    アイコンフォントを使用してボタンテキストビューを作成することもできます。

    アイコンが表示されたボタンの例

アイコンフォント付きTabLayout

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
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow