देशी Android अनुप्रयोग पर "फ़ॉन्ट विस्मयकारी" से माउस और प्रतीकों का उपयोग कैसे करें


153

मैं अपने एप्लिकेशन पर फ़ॉन्ट विस्मयकारी का उपयोग करने की कोशिश कर रहा हूं , मैं फॉन्ट को एकीकृत करने में सक्षम था Typeface.createFromAsset(), लेकिन मैं इस फॉन्ट द्वारा प्रदान किए गए आइकन का भी उपयोग करना चाहता हूं, लेकिन अभी तक मैं ऐसा नहीं कर पाया हूं।

इस खास फॉन्ट में मीडिया प्लेयर कंट्रोल, फाइल सिस्टम एक्सेस, एरो आदि चीजों के लिए यूनिकोड प्राइवेट यूज एरिया (PUA) के अंदर आइकन होते हैं।

क्या किसी ने फोंट का उपयोग किया है जिसमें एंड्रॉइड पर आइकन और प्रतीक हैं, क्या यह बिल्कुल संभव है?



2
मैंने लिंक अपडेट किया है
जूलियन सुआरेज़

23
मैं इस बात से सहमत नहीं हूं कि स्टैक ओवरफ्लो के लिए यह ऑफ टॉपिक है। यह मेरे लिए लगता है कि यह इन ( stackoverflow.com/help/on-topic ) दिशानिर्देशों को फिट करता है, जैसा कि यह है: एक विशिष्ट प्रोग्रामिंग समस्या के बारे में (एक विशिष्ट मोबाइल प्लेटफ़ॉर्म पर विशिष्ट फ़ॉन्ट-आधारित आइकन कैसे लागू करें), और यह एक है व्यावहारिक, जवाबदेह समस्या (नीचे मेरा जवाब देखें, जो मुझे लगता है कि वह दिखाता है)।
कीथ कॉर्विन


इस लाइब्रेरी की जाँच करें: blog.shamanland.com/p/android-fonticon-library.html , यह मावेन सेंट्रल पर उपलब्ध है। डेमो-ऐप देखें: play.google.com/store/apps/…
Oleksii K.

जवाबों:


307

फ़ॉन्ट विस्मयकारी रूप से मेरे एंड्रॉइड ऐप में मेरे लिए ठीक काम कर रहा है। मैंने निम्नलिखित कार्य किया:

  1. fontawesome-webfont.ttfमेरे हत्यारे फ़ोल्डर में नकल की गई
  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. मेरे ऑनक्रीट विधि में फ़ॉन्ट लोड किया और इसे उपयुक्त दृश्य के लिए सेट करें:

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

46
महान विचार। लेकिन प्रत्येक आइकन के लिए लगातार नया टाइपफेस बनाते समय मेमोरी मुद्दों से सावधान रहें। इसके बजाय, Hashtableअपने आइकन टाइपफेस को फिर से उपयोग करने के लिए कुछ का उपयोग करें, जैसे कि यहां सुझाव दिया गया है: code.google.com/p/android/issues/detail?id=9904#c7
saschoar

1
मैं इसे इस तरह से करता हूँ: stackoverflow.com/questions/2973270/…
Informatic0re

4
मैंने इसके लिए एक प्रोजेक्ट बनाया: bitbucket.org/informatic0re/awesome-font-iconview
Informatic0re

1
मुझे अपने कोड के साथ कुछ समस्याएं हैं: अगर मैं स्ट्रिंग को घोषित करता हूं strings.xmlजैसे <string name="faicon">&#xf001;</string>कि मेरे कोड में टेक्स्ट सेट करें, तो यह ठीक होगा। लेकिन जब मैं कोशिश mTextView.setText("&#xf004;");करता हूं तो यह केवल कच्चा पाठ दिखाता है। कोई भी मदद कर सकता है? thks
vtproduction

2
इस text.setText (Html.fromHtml ("& # xf000;")) जैसे टेक्स्टव्यू में डायनेमिक स्ट्रिंग जोड़ें;
राणा_सादाम

29

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

मैंने सुंदर एंड्रॉइड ऐप बनाने पर बात की है, जिसमें आइकन फोंट का उपयोग करने पर स्पष्टीकरण शामिल है, साथ ही आइकनों को भी सुंदर बनाने के लिए ग्रेडिएंट्स जोड़ रहा है: http://www.sqisland.com/talks/beautiful-android

आइकन फ़ॉन्ट स्पष्टीकरण स्लाइड 34 पर शुरू होता है: http://www.sqisland.com/talks/beautiful-android/#34


10

हो सकता है कि बहुत देर हो चुकी हो, लेकिन मुझे इसकी उतनी ही आवश्यकता थी, इसलिए मैंने इसे https://github.com/liltof/font-awsome-for-android पर प्रकाशित किया है और यह कीथ कॉर्विन की तरह ही उपयोग योग्य फॉन्ट का एंड्रॉइड रेडी xml संस्करण है।

आशा है कि यह दूसरों की मदद करेगा।


1
एसओ में आपका स्वागत है। मैंने देखा कि आपका कोड बहुत लंबा नहीं है। आप इस जवाब पर इसे पोस्ट क्यों नहीं करते? लिंक समय के साथ दुर्घटनाग्रस्त हो सकते हैं।
आंद्रे सिल्वा

मैं इस महान .xml फ़ाइल का उपयोग हफ्तों से कर रहा हूं। लेकिन अब मैंने महसूस किया है कि यह fa_times को याद करता है। क्या आप इसे अपडेट कर सकते हैं? संपादित करें: ओह, यह fa_remove है। या icon_remove अपनी फ़ाइल में।
mobilGelistirici

भयानक फ़ॉन्ट का उपयोग करके बटन में टेक्स्ट के साथ-साथ आइकन कैसे जोड़ें? जैसे Add drawable left या drawable right in button।
सिद्धार्थ_वीस

9

जैसा कि ऊपर महान उदाहरण है और महान काम करता है:

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((char) valLong + "");

सबसे अच्छा तरीका कभी! धन्यवाद मैं वोट + वोट _ सिर्फ ध्यान बटन textview है और String.valueOf को स्ट्रिंग के साथ बदलें
erfan

अंत में फ़ॉन्ट भयानक का उपयोग करने के लिए एक समाधान। आपका बहुत बहुत धन्यवाद!
Clamorious

4

यदि आप string.xml में स्ट्रिंग जोड़ने के बिना प्रोग्रामेटिक सेटटेक्स्ट चाहते हैं

इसका हेक्साडेसिमल कोड यहाँ देखें:

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

4

इस प्रयोजन के लिए डिज़ाइन की गई छोटी और उपयोगी लाइब्रेरी है :

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 से फ़ॉन्ट-आइकन बढ़ा सकते हैं :

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

लिंक:


वास्तव में अच्छा पुस्तकालय, धन्यवाद। inflatable xml- परिभाषाएँ थोड़ा दर्द हालांकि, मैं सीधे FontIconView का उपयोग करने के लिए पसंद करते हैं
hotzen

मैंने एंड्रॉइड 4.2.2 के साथ एक लेनोवो में इसका परीक्षण किया और आइकन दिखाई नहीं दिए, क्या हो सकता है?
ओली स्ट्रेवेल

नवीनतम संस्करण आज़माएँ0.1.9
ओलेक्सी के।

2

मैंने पाठ संपत्ति को प्रोग्रामेटिक रूप से सेट करने के लिए 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
}

मुझे जावा में बदलने के लिए काफी आसान होना चाहिए, मुझे लगता है। आशा है कि यह किसी की मदद करता है!


2

पुस्तकालयों में से एक जो मैं फ़ॉन्ट विस्मयकारी के लिए उपयोग करता हूं वह यह है:

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"

मैंने इसका अनुसरण किया, लेकिन मुझे त्रुटि मिली: त्रुटि: (54) पैकेज 'xxx.yyy' में 'fa_icon' के लिए कोई संसाधन पहचानकर्ता नहीं मिला
हज़रात

@ हज्जत को इसका उपयोग करने के लिए आपको संस्करण 1.2.3 का उपयोग करने की आवश्यकता है। मैंने उसे दर्शाने के लिए कोड अपडेट किया। कोशिश करो।
अब्दुल रहमान ए समद

1

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

उदाहरण:

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

क्या यह मेमोरी में टाइपफेस ऑब्जेक्ट को कैश करता है? एंड्रॉइड पर फोंट संभालते समय मेमोरी लीक होने की संभावना है।
TheRealChx101

1

एक और अच्छा समाधान है जिसे आप अपने लेआउट xml फ़ाइलों में सीधे उपयोग कर सकते हैं और इसका उपयोग करने की आवश्यकता नहीं है setTypeface

यह जोआन जपाटा का आइकॉनिफेट है । आप यहां पढ़ सकते हैं कि Iconify v2 में नया क्या है । इसमें 9 अलग-अलग फ़ॉन्ट लाइब्रेरी शामिल हैं, जिनका उपयोग आप अपनी बिल्ड.ग्रेड फ़ाइल में निर्भरता जोड़कर कर सकते हैं ।

लेआउट xml फ़ाइलों में इन विजेट्स के बीच चयन करना संभव है:

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

1

प्रारंभ में एसेट फोल्डर बनाएं और फॉन्टवॉइल आइकॉन (.ttf) को कॉपी करें कि ऐसेट फोल्डर कैसे बनाएं?

ऐप -> राइट क्लिक करें -> नया -> फ़ोल्डर -> एसेट फ़ोल्डर

अगला चरण डाउनलोड .ttf फ़ाइल कैसे डाउनलोड करें? यहाँ क्लिक करें -> और डाउनलोड निकालने के बाद डाउनलोड बटन पर क्लिक करें और वेब फोंट खोलें। अंत में सच्ची टेक्स्ट स्टाइल (ttf) पेस्ट एसेट फ़ोल्डर चुनें।

एंड्रॉइड में xml और जावा फाइल कैसे डिजाइन करें?

app -> res -> मान string.xml

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

एक फोंट का एक उदाहरण और अधिक यूनिकोड यहां क्लिक करें

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

आउटपुट:

आउटपुट छवि


0

मुझे पार्टी में थोड़ी देर हो गई है, लेकिन मैंने एक कस्टम दृश्य लिखा है कि चलो आप ऐसा करते हैं, डिफ़ॉल्ट रूप से यह एंटिपो के लिए सेट है, लेकिन आप इसे किसी भी आइकनफॉन्ट के उपयोग के लिए संशोधित कर सकते हैं: इसे यहां देखें: github.com/MarsVard/IconView

// पुस्तकालय संपादित करें पुराना है और अब समर्थित नहीं है ... नया यहां https://github.com/MarsVard/IonIconView


आपकी लाइब्रेरी टाइपफेस को कैशिंग नहीं कर रही है और, इसके बजाय, हर बार यह देखने के लिए इसका निर्माण कर रही है।
फर्नांडो कैमार्गो

1
@FernandoCamargo सही है, यह लाइब्रेरी पुरानी है और इसे बेहतर कैशिंग के साथ अपडेट किया जाना चाहिए ... यहाँ बेहतर प्रदर्शन के साथ नई लाइब्रेरी है github.com/MarsVard/IonIconView
मंगल

0

यदि आपको केवल कुछ फ़ॉन्ट भयानक आइकन की आवश्यकता है, तो आप सामान्य पिक्सेल चित्र बनाने के लिए http://fa2png.io का भी उपयोग कर सकते हैं । लेकिन अगर आप नियमित रूप से नए आइकन / बटन जोड़ते हैं तो मैं .ttf संस्करण को इसके अधिक लचीले होने की सलाह दूंगा।


0

यदि कोई आश्चर्यचकित करता है कि इसे कैसे जोड़ा जाए तो प्रोग्रामेटिक रूप से आप इसे इस तरह से करेंगे।

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

0

जैसा कि सभी उत्तर महान हैं, लेकिन मैं एक लाइब्रेरी का उपयोग नहीं करना चाहता था और सिर्फ एक लाइन जावा कोड के साथ प्रत्येक समाधान ने मुझे Activitiesऔर Fragmentsबहुत गड़बड़ कर दिया था। इसलिए मैंने TextViewकक्षा को इस प्रकार लिखा :

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

आपको क्या करना चाहिए फ़ॉन्ट ttfफ़ाइल को assetsफ़ोल्डर में कॉपी करें । और प्रत्येक आइकन स्ट्रिंग खोजने के लिए इस धोखा शीट का उपयोग करें

उम्मीद है की यह मदद करेगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.