當前位置:成語大全網 - 書法字典 - 如何在Android應用程序中使用FontAwesome徽標

如何在Android應用程序中使用FontAwesome徽標

1的工作原理。FontAwesome

讓我們先花點時間了解壹下FontAwesome。

的工作原理。FontAwesome圖標集背後的想法非常簡單,圖標被視為字符。您可能已經註意到壹些奇怪的字符被用作文本對。

稍後,您可以輕松復制beta字符或sigma字符。您甚至可以在普通的文本編輯框中完成此操作。您還可以更改它們的大小和顏色。這是因為瀏覽器-

和文本編輯框-將這些字符視為文本。

FontAwesome通過包含各種圖標擴展了這壹概念。您可以將其與由圖標指定的不可打印的Unicode字符進行比較。

FontAwesome

看看FontAwesome的cheatsheet,妳就知道我在說什麽了。您在列表中選擇壹個圖標,記下它的Unicode字符,並在TextView中使用它來告訴Android使用FontAwesome字體進行渲染。

2.導入字體文件

讓我們看壹個例子。下載並導入FontAwesome的TrueType文件到項目中。妳可以從GitHub下載FontAwesome的資產。

當妳下載FontAwesome時,妳會發現它包含壹些文件和文件夾。它們中的大多數對於web項目都很有用。我們只對位於fonts目錄中的fontawesome-webfont.ttf感興趣。

在您的Android項目中,導航至應用》src & gt主要的。主目錄應該包含壹個名為assets的文件夾。如果沒有,請創建壹個。在assets文件夾中創建另壹個fonts文件夾,並將fontawesome-webfont.ttf添加到該文件夾中。

社會主義字體文件夾不是必需的。您可以將FontAwesome字體文件直接放在assets目錄中,但是將相同類型的文件放在壹個特殊的目錄中會更方便。只要FontAwesome字體位於資產或子目錄下。

3.創建幫助類

現在您已經成功地將FontAwesome字體文件包含在您的Android項目中,是時候使用它了。我們將創建壹個幫助類來簡化事情。這個類需要使用Android . graphics . Typeface . Typeface類指定了字體和字體的特征。它用於指示在繪圖(和測量)時文本應該如何顯示。

創建壹個名為FontManager的新java類:

public類font manager { public static final String ROOT =“fonts/“,font awesome = ROOT+“font awesome-web font . TTF“;public static Typeface get Typeface(Context上下文,字符串字體){ return Typeface . createfromsasset(Context . get assets(),font);} }

如果您想在項目中使用其他字體,只需將它們放在helper類中。類似於:

yourtextview . set typeface(font manager . get typeface(font manager。your font));

我們需要做這麽多,但我們可以做得更好。要使用上述方法,我們需要為每個要用作圖標的TextView創建壹個變量。但是作為程序員,我們都很懶,對嗎?

圖標通常包含在視圖組中,如RelativeLayout或LinearLayout。我們可以編寫壹個方法,遍歷指定的xml父級並遞歸覆蓋每個TextView的字體。

公共類FontManager { //...public static void markAsIconContainer(View v,Typeface字樣){ if(v instance of View group){ View group VG =(View group)v;for(int I = 0;我& ltVG . get child count();i++){ View child = VG . get child at(I);markAsIconContainer(兒童);} } else if(v instance of TextView){((TextView)v)。setTypeface(字體);} } }

假設您的布局文件如下所示:

& ltlinear layout xmlns:Android =“/apk/RES/Android“xmlns:tools =“/tools“Android:id =“@+id/icons _ container“Android:layout _ width =“match _ parent“Android:layout _ height =“match _ parent“Android:padding bottom =“@ dimen/activity _ vertical _ margin“Android:padding left =“@ dimen/activity _ horizontal _ margin“Android:padding right =“@ dimen/activity _ horizontal _ margin“Android:padding top =“@ dimen/activity _ vertical _ margin“tools主要活動“》;& ltTextView Android:layout _ width =“match _ parent“Android:layout _ height =“wrap _ content“Android:gravity =“center“Android:layout _ weight =“1“/& gt;& ltTextView Android:layout _ width =“match _ parent“Android:layout _ height =“wrap _ content“Android:gravity =“center“Android:layout _ weight =“1“/& gt;& ltTextView Android:layout _ width =“match _ parent“Android:layout _ height =“wrap _ content“Android:gravity =“center“Android:layout _ weight =“1“/& gt;& lt/linear layout & gt;

為了將這三個文本視圖標記為圖標,我們重寫了onCreate方法並添加了以下代碼片段:

字樣icon font = FontManager . get typeface(getApplicationContext(),font manager。font awesome);font manager . markasiconcontainer(findViewById(r . id . icons _ container),icon font);

4.使用您想要的圖標

現在是有趣的部分。訪問FontAwesome的GitHub頁面並瀏覽給定的圖標。選三個妳喜歡的。我將選擇三個圖表圖標,即面積圖圖標、餅圖圖標和折線圖圖標。

在您的項目中,轉到values文件夾並創建壹個新文件:icons.xml .該文件將用作字典,它將Unicode字符與具有可讀名稱的相應圖標進行匹配。這意味著我們需要為每個圖標創建壹個條目。

& lt資源& gt& ltstring name =“fa _ icon _ area chart“& gt。?& lt/string & gt;& ltstring name =“fa _ icon _ piechart“& gt。?& lt/string & gt;& ltstring name =“fa _ icon _ line chart“& gt。?& lt/string & gt;& lt/resources & gt;

您可以在FontAwesome cheatsheet或圖標詳情頁面上找到您感興趣的圖標代碼。

下壹步是在布局的TextView中引用這些字符串。這是最後的樣子:

& ltTextView Android:layout _ width =“match _ parent“Android:layout _ height =“wrap _ content“Android:gravity =“center“Android:layout _ w eight =“1“Android:text =“@ string/fa _ icon _ area chart“/& gt;& ltTextView Android:layout _ width =“match _ parent“Android:layout _ height =“wrap _ content“Android:gravity =“center“Android:layout _ w eight =“1“Android:text =“@ string/fa _ icon _ piechart“/& gt;& ltTextView Android:layout _ width =“match _ parent“Android:layout _ height =“wrap _ content“Android:gravity =“center“Android:layout _ w eight =“1“Android:text =“@ string/fa _ icon _ line chart“/& gt;

如果妳打開Android Studio的布局編輯器,妳會發現它無法渲染這些圖標。這不正常。編譯並啟動應用程序,您會發現圖標正常呈現。

看起來很小,不是嗎?改變圖標的大小很簡單,妳只需要改變textSize屬性。更改圖標的顏色就像編輯textColor屬性壹樣簡單。

& ltTextView Android:layout _ width =“match _ parent“Android:layout _ height =“wrap _ content“Android:gravity =“center“Android:layout _ weight =“1“Android:text size =“45sp“Android:text color =“# 9b59b 6“Android:text =“@ string/fa _ icon _ area chart“/& gt;

如妳所見,這些圖標明亮而生動。這是因為FontAwesome在運行時進行渲染。它們是矢量圖標而不是網格圖標。