নেটিভ অ্যান্ড্রয়েড অ্যাপ্লিকেশনটিতে "ফন্ট দুর্দান্ত" থেকে আইকন এবং চিহ্নগুলি কীভাবে ব্যবহার করবেন


153

আমি আমার অ্যাপ্লিকেশনটিতে ফন্ট আশ্চর্যজনক ব্যবহার করার চেষ্টা করছি , আমি ফন্টটি ব্যবহার করে সংহত করতে সক্ষম হয়েছি Typeface.createFromAsset(), তবে আমি এই ফন্টের সরবরাহকৃত আইকনগুলিও ব্যবহার করতে চাই, তবে এখনও পর্যন্ত আমি এটি করতে সক্ষম হইনি।

মিডিয়া প্লেয়ার নিয়ন্ত্রণ, ফাইল সিস্টেম অ্যাক্সেস, তীর ইত্যাদির মতো জিনিসগুলির জন্য এই নির্দিষ্ট ফন্টটিতে ইউনিকোড প্রাইভেট ইউজ এরিয়া (পিইউএ) এর ভিতরে আইকন রয়েছে

অ্যান্ড্রয়েডে আইকন এবং চিহ্ন থাকা ফন্টগুলি কেউ ব্যবহার করেছেন, এটি কি আদৌ সম্ভব?



2
আমি লিংকটি আপডেট করেছি
জুলিয়ান সুয়ারেজ

23
আমি সম্মত নই যে এটি স্ট্যাক ওভারফ্লোর জন্য অফ-বিষয়। আমার কাছে মনে হয় এটি এই ( স্ট্যাকওভারফ্লো.com / হেল্প / অ্যান-টপিক ) নির্দেশিকাগুলির সাথে খাপ খায় , যেমন: একটি নির্দিষ্ট প্রোগ্রামিং সমস্যা সম্পর্কে (নির্দিষ্ট মোবাইল প্ল্যাটফর্মটিতে নির্দিষ্ট ফন্ট-ভিত্তিক আইকনটি কীভাবে প্রয়োগ করা যায়) এবং এটি একটি ব্যবহারিক, উত্তরযোগ্য সমস্যা (নীচে আমার উত্তর দেখুন, যা আমি মনে করি এটি চিত্রিত করে)
কিথ করউইন


এই লাইব্রেরিটি পরীক্ষা করুন: blog.shamanland.com/p/android-fonticon-library.html , এটি মাভেন সেন্ট্রালে উপলব্ধ। ডেমো-অ্যাপ্লিকেশনটি দেখুন: play.google.com/store/apps/…
ওলেক্সি কে

উত্তর:


307

ফন্ট অসাধারণ আমার অ্যান্ড্রয়েড অ্যাপ্লিকেশনটিতে আমার জন্য ভাল কাজ করছে বলে মনে হচ্ছে। আমি নিম্নলিখিতগুলি করেছেন:

  1. fontawesome-webfont.ttfআমার অ্যাসেটস ফোল্ডারে অনুলিপি করা হয়েছে
  2. এই পৃষ্ঠাটি ব্যবহার করে আমি যে আইকনগুলি চেয়েছিলাম তার চরিত্র সত্তা খুঁজে পেয়েছি: http://fortawesome.github.io/Font-Awesome/cheatsheet/
  3. প্রতিটি আইকনের জন্য স্ট্রিং.এক্সএমএল এন্ট্রি তৈরি করেছে। যেমন একটি হৃদয়ের জন্য:

    <string name="icon_heart">&#xf004;</string>
  4. রেফারেন্স করা আমার এক্সএমএল লেআউটের ভিউটিতে এন্ট্রি বলেছেন:

     <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এখানে আপনার প্রস্তাবিত মত আইকন টাইপফেসটি পুনরায় ব্যবহার করার মতো কিছু ব্যবহার করুন: কোড. google.com/p/android/issues/detail?id=9904#c7
সাসচোয়ার

1
আমি এটি এর মতো করে করি: stackoverflow.com/questions/2973270/…
Informatic0re


1
আমার কোড নিয়ে আমার কিছু সমস্যা আছে: আমি যদি স্ট্রিংটি strings.xmlলাইক <string name="faicon">&#xf001;</string>দিয়ে ঘোষণা করি তবে আমার কোডটিতে পাঠ্য সেট করুন, ঠিক আছে। তবে আমি যখন mTextView.setText("&#xf004;");এটি চেষ্টা করি তখন কেবল কাঁচা লেখাটি দেখায়। কেউ সাহায্য করতে পারে? থেক্স
ভিটিপ্রডাকশন

2
এই পাঠ্য.সেটেক্সট (Html.fromHtml ("& # xf000;")) এর মতো পাঠ্যদর্শনটিতে গতিশীল স্ট্রিং যুক্ত করুন;
রানা_সাদম

29

আইকোমুন: 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/be সুন্দর- android

আইকন ফন্টের ব্যাখ্যা স্লাইড 34 এ শুরু হয়: http://www.sqisland.com/talks/be সুন্দর-android/#34


10

হয়তো অনেক দেরি হয়ে গেছে তবে আমার একই চাহিদা ছিল তাই আমি এই https://github.com/liltof/font-awsome-for-android প্রকাশ করেছি কীথ করউইনের ঠিক ঠিক যেমন এটি ফন্টের একটি অ্যান্ড্রয়েড রেড এক্সএমএল সংস্করণ ব্যবহারযোগ্য

আশা করি এটি অন্যকে সহায়তা করবে।


1
তাই আপনাকে স্বাগতম। আমি দেখেছি আপনার কোডটি খুব বেশি দীর্ঘ নয়। আপনি কেন এই উত্তরে পোস্ট করবেন না? লিঙ্কগুলি সময়ের সাথে ক্রাশ হতে পারে।
আন্দ্রে সিলভা

আমি কয়েক সপ্তাহ ধরে এই দুর্দান্ত .xML ফাইলটি ব্যবহার করছি। তবে এখন আমি বুঝতে পেরেছি যে এটি অধ্যক্ষগুলি মিস করে। আপনি এটি আপডেট করতে পারেন? সম্পাদনা: ওহ, এটি fa_remove। অথবা আপনার ফাইলটিতে আইকন_আমার্ভ করুন।
মোবিলগেলিসটরিচি

অসাধারণ ফন্ট ব্যবহার করে বোতামে আইকনের পাশাপাশি পাঠ্য কীভাবে যুক্ত করবেন? বোতামে আঁকুন বাম বা অঙ্কনযোগ্য ডান যুক্ত করুন।
সিদ্ধার্থ_ভিস

9

উপরে যেমন দুর্দান্ত উদাহরণ এবং দুর্দান্ত কাজ করে:

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

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

কিন্ত! > আপনি এক্সএমএল থেকে স্ট্রিং বোতামের অভ্যন্তরে যদি এটি কাজ করে:

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

সর্বকালের সেরা উপায়! ধন্যবাদ আমি + ভোট দিচ্ছি _ শুধু মনোযোগ বোতামটি টেক্সটভিউ এবং স্ট্রিংয়ের সাথে স্ট্রিং.ভ্যালুও প্রতিস্থাপন করুন
ইরফান

অবশেষে হ'ল ফন্ট ব্যবহার করার একটি সমাধান a অনেক ধন্যবাদ!
চিত্তাকর্ষক

4

আপনি যদি স্ট্রিং.এক্সএমএলে স্ট্রিং যুক্ত না করে প্রোগ্রামেটিক সেটটেক্সট চান

এটির হেক্সাডেসিমেল কোডটি এখানে দেখুন:

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

গুগল প্লেতে ডেমো পান ।

এখানে চিত্র বর্ণনা লিখুন

আপনি সহজেই আপনার বিন্যাসে হরফ-ভিত্তিক আইকন যুক্ত করতে পারেন:

<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"
    />

আপনি Drawableএক্সএমএল হিসাবে ফন্ট-আইকন স্ফীত করতে পারেন :

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

লিঙ্ক:


সত্যিই ভাল লাইব্রেরি, আপনাকে ধন্যবাদ। ইনফ্ল্যাটেবল এক্সএমএল-সংজ্ঞাগুলি কিছুটা ব্যথা হলেও আমি সরাসরি ফন্টআইকনভিউ ব্যবহার করতে পছন্দ করি
হটজন

আমি এটিকে অ্যান্ড্রয়েড ৪.২.২ সহ একটি লেনোভোতে পরীক্ষা করেছি এবং আইকনগুলি প্রদর্শিত হবে না, কী হতে পারে?
অলি স্ট্রেভেল

সর্বশেষতম সংস্করণটি চেষ্টা করুন0.1.9
ওলেক্সি কে।

2

আমি প্রোগ্রামারিকভাবে পাঠ্যের সম্পত্তি সেট করতে সি # (জ্যামারিন) এ এই সহায়ক সহায়ক বর্গ তৈরি করেছি। এটি আমার পক্ষে বেশ ভালভাবে কাজ করে:

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

ডকুমেন্টেশন বোঝা সহজ।

প্রথমে বিল্ড.gradle এ প্রয়োজনীয় নির্ভরতা যুক্ত করুন:

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

দ্বিতীয়ত, আপনি এটি আপনার এক্সএমএলে যুক্ত করতে পারেন:

<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) কোন রিসোর্স শনাক্তকারী বৈশিষ্ট্য 'fa_icon' 'xxx.yyy' প্যাকেজের মধ্যে পাওয়া যায়নি
Hajjat

@ হাজজত এটি ব্যবহার করতে আপনাকে সংস্করণ 1.2.3 ব্যবহার করতে হবে। আমি প্রতিফলিত করার জন্য কোডটি কেবল আপডেট করেছি। চেষ্টা করে দেখুন
আব্দুল রহমান এ সামাদ

1

ফন্টভিউ লাইব্রেরি আপনাকে আপনার অ্যাপ্লিকেশনটিতে আইকন / গ্রাফিক্স হিসাবে স্বাভাবিক / ইউনিকোড ফন্টের অক্ষর ব্যবহার করতে দেয়। এটি সম্পদ বা কোনও নেটওয়ার্ক অবস্থানের মাধ্যমে ফন্টটি লোড করতে পারে।

এই গ্রন্থাগারের সুবিধা হ'ল:

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

আরও একটি দুর্দান্ত সমাধান রয়েছে যা আপনি আপনার লেআউট এক্সএমএল ফাইলগুলিতে সরাসরি ব্যবহার করতে পারেন এবং এটি ব্যবহার করার প্রয়োজন নেই setTypeface

এটি জোয়ান জাপাটার আইকনফাইটিআইকনফাই ভি 2 এ নতুন কি আছে তা আপনি এখানে পড়তে পারেন । এটিতে 9 টি বিভিন্ন ফন্ট লাইব্রেরি রয়েছে যা আপনি নিজের বিল্ডড্র্যাডলে নির্ভরতা যুক্ত করে কেবল ব্যবহার করতে পারেন ফাইলটিতে ।

লেআউট এক্সএমএল ফাইলগুলিতে এই উইজেটগুলির মধ্যে নির্বাচন করা সম্ভব:

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

1

প্রাথমিকভাবে সম্পদ ফোল্ডার তৈরি করুন এবং ফন্টউইজ আইকনটি কপি করুন (.ttf) কীভাবে সম্পদ ফোল্ডার তৈরি করবেন?

অ্যাপ -> ডান ক্লিক করুন -> নতুন -> ফোল্ডার -> সম্পদ ফোল্ডার

পরবর্তী পদক্ষেপ ডাউনলোড কিভাবে .tf ফাইল ডাউনলোড করতে? এখানে ক্লিক করুন -> এবং ডাউনলোড এক্সট্রাক্টের পরে ডাউনলোড বোতামটি ক্লিক করুন এবং ওয়েব ফন্টগুলি খুলুন। অবশেষে সত্য পাঠ্য শৈলী (টিটিএফ) পেস্ট সম্পদ ফোল্ডারটি চয়ন করুন।

অ্যান্ড্রয়েডে কীভাবে এক্সএমএল এবং জাভা ফাইল ডিজাইন করবেন?

অ্যাপ্লিকেশন -> পুনরায় -> মানগুলি স্ট্রিং। 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
@ ফারানান্দো ক্যামারগো ঠিক আছে, এই পাঠাগারটি পুরানো এবং আরও ভাল ক্যাচিংয়ের
মঙ্গলবার

0

আপনার যদি কেবল কয়েকটি ফন্টের দুর্দান্ত আইকন প্রয়োজন হয় তবে আপনি সাধারণ পিক্সেল চিত্রগুলি তৈরি করতে http://fa2png.io ব্যবহার করতে পারেন । তবে আপনি যদি নিয়মিত নতুন আইকন / বোতাম যুক্ত করেন তবে আমি .ttf সংস্করণটিকে আরও নমনীয় হিসাবে সুপারিশ করব।


0

যদি কেউ আশ্চর্যের সাথে এটি প্রোগ্রামে যোগ করতে পারে তবে আপনি এটি এইভাবেই করতে হবে do

   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ফোল্ডারে অনুলিপি করুন nd এবং প্রতিটি আইকনের স্ট্রিং সন্ধানের জন্য এই চিট শীটটি ব্যবহার করুন।

আশাকরি এটা সাহায্য করবে.

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.