วิธีใช้ไอคอนและสัญลักษณ์จาก“ Font Awesome” บนแอปพลิเคชัน Android พื้นเมือง

ฉันพยายามใช้Font Awesomeในแอปพลิเคชันของฉันฉันสามารถรวมแบบอักษรโดยใช้Typeface.createFromAsset()แต่ฉันยังต้องการใช้ไอคอนที่จัดทำโดยแบบอักษรนี้ แต่จนถึงตอนนี้ฉันยังไม่สามารถทำเช่นนั้นได้

แบบอักษรนี้ประกอบด้วยไอคอนภายในพื้นที่ใช้งานส่วนตัวของ Unicode (PUA) สำหรับสิ่งต่าง ๆ เช่นตัวควบคุมเครื่องเล่นสื่อการเข้าถึงระบบไฟล์ลูกศรเป็นต้น

มีใครใช้แบบอักษรที่มีไอคอนและสัญลักษณ์บน Android เป็นไปได้ไหม?

Font Awesome ดูเหมือนจะทำงานได้ดีสำหรับฉันในแอพ Android ของฉัน ฉันทำต่อไปนี้:

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

Java:

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 มันเป็นเวอร์ชัน xml พร้อมกับ Android ของตัวอักษรที่ยอดเยี่ยมที่สามารถใช้งานได้เหมือน Keith Corwin กล่าว

หวังว่ามันจะช่วยให้ผู้อื่น

ดังกล่าวเป็นตัวอย่างที่ดีและใช้งานได้ดี:

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 = "";
String valHexStr = iconHeart.replace("&#x", "").replace(";", "");
long valLong = Long.parseLong(valHexStr,16);
button.setText((char) valLong + "");

หากคุณต้องการ setText แบบเป็นโปรแกรมโดยไม่ต้องเพิ่มสตริงลงใน 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 }));

มีห้องสมุดขนาดเล็กและมีประโยชน์ที่ออกแบบมาเพื่อวัตถุประสงค์นี้ :

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

คุณสามารถขยาย font-icon Drawableจาก xml:

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

รหัส Java:

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

ลิงค์:

• หน้าโครงการ
• GitHub repo

ฉันสร้างคลาสตัวช่วยนี้ใน 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 ช่วยให้คุณใช้อักขระแบบอักษรปกติ / Unicode เป็นไอคอน / กราฟิกในแอปของคุณ มันสามารถโหลดแบบอักษรผ่านสินทรัพย์หรือที่ตั้งเครือข่าย

ประโยชน์ของห้องสมุดนี้คือ:

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

มีทางออกที่ดีอีกประการหนึ่งที่คุณสามารถใช้ในไฟล์ XML setTypefaceรูปแบบของคุณโดยตรงและไม่จำเป็นต้องใช้เป็น

มันเป็นโจแอนนาเปาลาIconify คุณสามารถอ่านที่นี่ว่ามีอะไรใหม่ในIconify v2 มันมีฟอนต์ไลบรารีที่แตกต่างกัน 9 แบบซึ่งคุณสามารถใช้โดยเพิ่มการอ้างอิงไปยังไฟล์build.gradleของคุณ

ในไฟล์เลย์เอาต์ xml คุณสามารถเลือกระหว่างวิดเจ็ตเหล่านี้ได้:

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

เริ่มสร้างโฟลเดอร์เนื้อหาและคัดลอกไอคอน fontawesome (.ttf) สร้างโฟลเดอร์เนื้อหาอย่างไร

แอป -> คลิกขวา -> ใหม่ -> โฟลเดอร์ -> โฟลเดอร์เนื้อหา

ขั้นตอนถัดไปดาวน์โหลดวิธีดาวน์โหลดไฟล์. ttf คลิกที่นี่ ->และคลิกที่ปุ่มดาวน์โหลดหลังจากดาวน์โหลดแยกและเปิดแบบอักษรบนเว็บ ในที่สุดก็เลือกสไตล์ข้อความจริง (ttf) วางโฟลเดอร์ทรัพย์สิน

วิธีการออกแบบไฟล์ XML และ Java ใน Android?

แอป -> res -> ค่า string.xml

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

ตัวอย่างหนึ่งตัวอักษรเพิ่มเติม Unicode คลิกที่นี่

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

เอาท์พุท:

ภาพที่ส่งออก

ฉันมาช้าไปงานปาร์ตี้ แต่ฉันเขียนมุมมองที่กำหนดเองที่ให้คุณทำสิ่งนี้โดยค่าเริ่มต้นมันถูกกำหนดเป็น entypo แต่คุณสามารถปรับเปลี่ยนให้ใช้ iconfont ใด ๆ : ลองดูที่นี่: github.com/MarsVard/IconView

// แก้ไขไลบรารี่เก่าและไม่รองรับอีกต่อไป ... ใหม่ที่นี่https://github.com/MarsVard/IonIconView

ในกรณีที่คุณต้องการไอคอนตัวอักษรที่ยอดเยี่ยมเพียงไม่กี่ตัวคุณยังสามารถใช้http://fa2png.ioเพื่อสร้างภาพพิกเซลปกติได้ แต่ถ้าคุณเพิ่มไอคอน / ปุ่มใหม่เป็นประจำฉันแนะนำรุ่น. ttf ให้ยืดหยุ่นมากขึ้น

หากมีคนสงสัยว่าจะเพิ่มโปรแกรมอย่างไรคุณต้องทำแบบนี้

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

ในฐานะที่เป็นทุกคำตอบที่ดี แต่ผมไม่ได้ต้องการที่จะใช้ห้องสมุดและวิธีการแก้ปัญหาแต่ละคนมีรหัสเพียงหนึ่งบรรทัดจาวาทำของฉัน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โฟลเดอร์และใช้ชีทนี้เพื่อค้นหาสตริงไอคอนแต่ละอัน

หวังว่านี่จะช่วยได้