development

기본 Android 애플리케이션에서“Font Awesome”의 아이콘 및 기호를 사용하는 방법

big-blog 2020. 6. 10. 07:50
반응형

기본 Android 애플리케이션에서“Font Awesome”의 아이콘 및 기호를 사용하는 방법


내 응용 프로그램에서 Font Awesome 을 사용하려고 하는데을 사용하여 글꼴 을 통합 할 수 Typeface.createFromAsset()있었지만이 글꼴에서 제공하는 아이콘을 사용하고 싶지만 지금까지는 그렇게 할 수 없었습니다.

이 특정 글꼴에는 미디어 플레이어 컨트롤, 파일 시스템 액세스, 화살표 등과 같은 PUA (Unicode Private Use Area) 내에 아이콘이 포함되어 있습니다.

안드로이드에서 아이콘과 기호가 포함 된 글꼴을 사용한 사람이 있습니까?


Font Awesome이 내 안드로이드 앱에서 제대로 작동하는 것 같습니다. 나는 다음을 수행했다.

  1. 복사 fontawesome-webfont.ttf내 assests 폴더에
  2. 이 페이지를 사용하여 원하는 아이콘의 문자 엔티티를 찾았습니다. http://fortawesome.github.io/Font-Awesome/cheatsheet/
  3. 각 아이콘에 대해 strings.xml에 항목을 작성했습니다. 예를 들어 마음을 위해 :

    <string name="icon_heart">&#xf004;</string>
    
  4. 내 XML 레이아웃의 관점에서 상기 항목을 참조했습니다.

     <Button
         android:id="@+id/like"
         style="?android:attr/buttonStyleSmall"
         ...
         android:text="@string/icon_heart" />
    
  5. 내 onCreate 메소드에 글꼴을로드하고 적절한 뷰에 맞게 설정하십시오.

    Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" );
    ...
    Button button = (Button)findViewById( R.id.like );
    button.setTypeface(font);
    

IcoMoon 사용해보기 : http://icomoon.io

  • 원하는 아이콘을 선택하십시오
  • 각 아이콘에 문자 할당
  • 폰트 다운로드

재생 아이콘을 선택하고 문자 'P'를 할당하고 파일 icomoon.ttf을 자산 폴더로 다운로드 했다고 가정 해보십시오. 아이콘을 표시하는 방법은 다음과 같습니다.

xml :

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="48sp"
  android:text="P" />

자바:

Typeface typeface = Typeface.createFromAsset(getAssets(), "icomoon.ttf");
textView.setTypeface(typeface);

아이콘 글꼴 사용에 대한 설명과 아이콘을 더 예쁘게 만드는 그라디언트 추가에 대한 설명이 포함 된 아름다운 Android 앱을 만드는 방법에 대해 이야기했습니다. http://www.sqisland.com/talks/beautiful-android

아이콘 글꼴 설명은 슬라이드 34에서 시작합니다. http://www.sqisland.com/talks/beautiful-android/#34


어쩌면 너무 늦었지만 같은 요구가 있었기 때문에 이것을 게시했습니다 https://github.com/liltof/font-awsome-for-android Keith Corwin이 말한 것처럼 사용할 수있는 멋진 Android 글꼴 xml 버전입니다.

그것이 다른 사람들을 도울 수 있기를 바랍니다.


위와 같이 훌륭한 예이며 훌륭하게 작동합니다.

Typeface font = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf" );

Button button = (Button)findViewById( R.id.like );
button.setTypeface(font);

그러나! > 이것은 xml에서 설정 한 버튼 안의 문자열 인 경우 작동합니다.

<string name="icon_heart">&#xf004;</string>
button.setText(getString(R.string.icon_heart));

동적으로 추가 해야하는 경우 다음을 사용할 수 있습니다.

String iconHeart = "&#xf004;";
String valHexStr = iconHeart.replace("&#x", "").replace(";", "");
long valLong = Long.parseLong(valHexStr,16);
button.setText(getString((char)valLong+"");

string.xml에 문자열을 추가하지 않고 프로그래밍 방식의 setText를 원할 경우

16 진 코드를 여기에서보십시오 :

http://fortawesome.github.io/Font-Awesome/cheatsheet/

대체 & # xf066; ~ 0xf066

 Typeface typeface = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
    textView.setTypeface(typeface);
    textView.setText(new String(new char[]{0xf006 }));

이 목적을 위해 설계된 작고 유용한 라이브러리 가 있습니다 .

dependencies {
    compile 'com.shamanland:fonticon:0.1.9'
}

Google Play 데모를 가져 옵니다 .

여기에 이미지 설명을 입력하십시오

레이아웃에 글꼴 기반 아이콘을 쉽게 추가 할 수 있습니다.

<com.shamanland.fonticon.FontIconView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/ic_android"
    android:textSize="@dimen/icon_size"
    android:textColor="@color/icon_color"
    />

Drawablexml에서 와 같이 font-icon을 부 풀릴 수 있습니다 .

<?xml version="1.0" encoding="utf-8"?>
<font-icon
    xmlns:android="http://schemas.android.com/apk/res-auto"
    android:text="@string/ic_android"
    android:textSize="@dimen/big_icon_size"
    android:textColor="@color/green_170"
    />

자바 코드 :

Drawable icon = FontIconDrawable.inflate(getResources(), R.xml.ic_android);

연결:


C # (Xamarin) 에서이 도우미 클래스를 프로그래밍 방식으로 텍스트 속성을 설정했습니다. 그것은 나를 위해 아주 잘 작동합니다 :

internal static class FontAwesomeManager
{
    private static readonly Typeface AwesomeFont = Typeface.CreateFromAsset(App.Application.Context.Assets, "FontAwesome.ttf");

    private static readonly Dictionary<FontAwesomeIcon, string> IconMap = new Dictionary<FontAwesomeIcon, string>
    {
        {FontAwesomeIcon.Bars, "\uf0c9"},
        {FontAwesomeIcon.Calendar, "\uf073"},
        {FontAwesomeIcon.Child, "\uf1ae"},
        {FontAwesomeIcon.Cog, "\uf013"},
        {FontAwesomeIcon.Eye, "\uf06e"},
        {FontAwesomeIcon.Filter, "\uf0b0"},
        {FontAwesomeIcon.Link, "\uf0c1"},
        {FontAwesomeIcon.ListOrderedList, "\uf0cb"},
        {FontAwesomeIcon.PencilSquareOutline, "\uf044"},
        {FontAwesomeIcon.Picture, "\uf03e"},
        {FontAwesomeIcon.PlayCircleOutline, "\uf01d"},
        {FontAwesomeIcon.SignOut, "\uf08b"},
        {FontAwesomeIcon.Sliders, "\uf1de"}
    };

    public static void Awesomify(this TextView view, FontAwesomeIcon icon)
    {
        var iconString = IconMap[icon];

        view.Text = iconString;
        view.SetTypeface(AwesomeFont, TypefaceStyle.Normal);
    }
}

enum FontAwesomeIcon
{
    Bars,
    Calendar,
    Child,
    Cog,
    Eye,
    Filter,
    Link,
    ListOrderedList,
    PencilSquareOutline,
    Picture,
    PlayCircleOutline,
    SignOut,
    Sliders
}

Java로 변환하기에 충분히 쉬울 것이라고 생각합니다. 그것이 누군가를 돕기를 바랍니다!


Font Awesome에 사용하는 라이브러리 중 하나는 다음과 같습니다.

https://github.com/Bearded-Hen/Android-Bootstrap

구체적으로 특별히,

https://github.com/Bearded-Hen/Android-Bootstrap/wiki/Font-Awesome-Text

설명서는 이해하기 쉽습니다.

먼저 build.gradle에 필요한 종속성을 추가하십시오.

dependencies {
    compile 'com.beardedhen:androidbootstrap:1.2.3'
}

두 번째로 XML에 이것을 추가 할 수 있습니다.

<com.beardedhen.androidbootstrap.FontAwesomeText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fontawesometext:fa_icon="fa-github"
    android:layout_margin="10dp" 
    android:textSize="32sp"
/>

위의 코드 예제를 사용하려면 루트 레이아웃에 이것을 추가하십시오.

    xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"

FontView 라이브러리를 사용하면 앱에서 일반 / 유니 코드 글꼴 문자를 아이콘 / 그래픽으로 사용할 수 있습니다. 자산 또는 네트워크 위치를 통해 글꼴을로드 할 수 있습니다.

이 라이브러리의 장점은 다음과 같습니다.

1 - it takes care of remote resources for you
2 - scales the font size in dynamically sized views
3 - allows the font to easily be styled.

https://github.com/shellum/fontView

Example:

Layout:

<com.finalhack.fontview.FontView
        android:id="@+id/someActionIcon"
        android:layout_width="80dp"
        android:layout_height="80dp" />

Java:

fontView.setupFont("fonts/font.ttf", character, FontView.ImageType.CIRCLE);
fontView.addForegroundColor(Color.RED);
fontView.addBackgroundColor(Color.WHITE);

There's another nice solution which you can use in your layout xml files directly and does not require to use setTypeface.

It is Joan Zapata's Iconify. You can read here what's new in Iconify v2. It includes 9 different font libraries which you can simply use by adding dependencies to your build.gradle file.

In the layout xml files it's possible to choose between these widgets:

com.joanzapata.iconify.widget.IconTextview
com.joanzapata.iconify.widget.IconButton
com.joanzapata.iconify.widget.IconToggleButton

Initially create asset folder and copy the fontawesome icon (.ttf) How to create asset folder?

app-->right Click -->new-->folder --> asset folder

next step download how to download .ttf file? click here--> and click download button after download extract and open web fonts. finally choose true text style(ttf)paste asset folder.

how to design xml and java file in android ?

app-->res-->values string.xml

resources
    string name="calander_font" >&#xf073; <string
resources

this example of one font more Unicode click here

Activity_main.xml

 <TextView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:id="@+id/calander_view"/>

MainActivity.java

calander_tv = (TextView)findViewById(R.id.calander_view);

Typeface typeface = Typeface.createFromAsset(getAssets(),"/fonts/fa-solid-900.ttf");
calander_tv.setTypeface(typeface);
calander_tv.setText(R.string.calander_font);

Output:

Output image


I'm a bit late to the party but I wrote a custom view that let's you do this, by default it's set to entypo, but you can modify it to use any iconfont: check it out here: github.com/MarsVard/IconView

// edit the library is old and not supported anymore... new one here https://github.com/MarsVard/IonIconView


In case you only need a few font awesome icons, you can also use http://fa2png.io to generate normal pixel images. But if you add new icons/buttons regularly I'd recommend the .ttf version as its more flexible.


If someone wonders how to add it programmitcally you gotta do it this way.

   button_info.setText(R.string.icon_heart);
    button_info.append(" Hallo"); //<<--- This is the tricky part

As all answers are great but I didn't want to use a library and each solution with just one line java code made my Activities and Fragments very messy. So I over wrote the TextView class as follows:

public class FontAwesomeTextView extends TextView {
private static final String TAG = "TextViewFontAwesome";
public FontAwesomeTextView(Context context) {
    super(context);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
}

private void setCustomFont(Context ctx, AttributeSet attrs) {
    TypedArray a = ctx.obtainStyledAttributes(attrs, R.styleable.TextViewPlus);
    String customFont = a.getString(R.styleable.TextViewPlus_customFont);
    setCustomFont(ctx, customFont);
    a.recycle();
}

private void init() {
    if (!isInEditMode()) {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fontawesome-webfont.ttf");
        setTypeface(tf);
    }
}

public boolean setCustomFont(Context ctx, String asset) {
    Typeface typeface = null;
    try {
        typeface = Typeface.createFromAsset(ctx.getAssets(), asset);
    } catch (Exception e) {
        Log.e(TAG, "Unable to load typeface: "+e.getMessage());
        return false;
    }

    setTypeface(typeface);
    return true;
}
}

what you should do is copy the font ttf file into assets folder .And use this cheat sheet for finding each icons string.

hope this helps.

참고 URL : https://stackoverflow.com/questions/15210548/how-to-use-icons-and-symbols-from-font-awesome-on-native-android-application

반응형