android 自定義字體
android字體樣式?In this tutorial, we’ll explain how to set up android custom fonts in TextViews and Buttons in our application.
在本教程中,我們將說明如何在應用程序的TextViews和Buttons中設置android自定義字體。
Android SDK comes with a set of standard fonts that can be styled by using a few XML attributes. Let’s look at them.
Android SDK附帶了一組標準字體,可以使用一些XML屬性來設置樣式。 讓我們看看它們。
The default fontFamily is sans-serif
.
android:fontFamily requires minimum API level as 16.
默認的fontFamily是sans-serif
。
android:fontFamily需要的最低API級別為16。
android:textStyle=”bold|italic”
. android:textStyle :此屬性可以單獨或結合使用值: 粗體 , 斜體和普通,例如android:textStyle=”bold|italic”
。 Let’s club android:fontFamily
and android:textStyle
and display the different variants of a TextView.
讓我們android:textStyle
android:fontFamily
和android:textStyle
并顯示TextView的不同變體。
The styles.xml which contains the different style variants is given below.
下面給出了包含不同樣式變體的styles.xml。
<resources><!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"><!-- Customize your theme here. --><item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="colorAccent">@color/colorAccent</item></style><style name="Regular"><item name="android:fontFamily">sans-serif</item><item name="android:textStyle">normal</item><item name="android:textSize">28sp</item><item name="android:text">sans-serif</item></style><style name="Italic"><item name="android:fontFamily">sans-serif</item><item name="android:textStyle">italic</item><item name="android:textSize">28sp</item><item name="android:text">sans-serif</item></style><style name="Bold"><item name="android:fontFamily">sans-serif</item><item name="android:textStyle">bold</item><item name="android:textSize">28sp</item><item name="android:text">sans-serif</item></style><style name="BoldItalic"><item name="android:fontFamily">sans-serif</item><item name="android:textStyle">bold|italic</item><item name="android:textSize">28sp</item><item name="android:text">sans-serif</item></style><style name="RegularCondensed"><item name="android:fontFamily">sans-serif-condensed</item><item name="android:textStyle">normal</item><item name="android:textSize">28sp</item><item name="android:text">sans-serif-condensed</item></style><style name="ItalicCondensed"><item name="android:fontFamily">sans-serif-condensed</item><item name="android:textStyle">italic</item><item name="android:textSize">28sp</item><item name="android:text">sans-serif-condensed</item></style><style name="BoldCondensed"><item name="android:fontFamily">sans-serif-condensed</item><item name="android:textStyle">bold</item><item name="android:textSize">28sp</item><item name="android:text">sans-serif-condensed</item></style><style name="Casual"><item name="android:fontFamily">casual</item><item name="android:textStyle">normal</item><item name="android:textSize">28sp</item><item name="android:text">Casual</item></style><style name="Cursive"><item name="android:fontFamily">cursive</item><item name="android:textStyle">normal</item><item name="android:textSize">28sp</item><item name="android:text">Cursive</item></style><style name="RegularMono"><item name="android:fontFamily">monospace</item><item name="android:textStyle">normal</item><item name="android:textSize">28sp</item><item name="android:text">mono space</item></style><style name="ItalicMono"><item name="android:fontFamily">monospace</item><item name="android:textStyle">italic</item><item name="android:textSize">28sp</item><item name="android:text">monospace</item></style><style name="BoldMono"><item name="android:fontFamily">monospace</item><item name="android:textStyle">bold</item><item name="android:textSize">28sp</item><item name="android:text">monospace</item></style><style name="RegularMonoSerif"><item name="android:fontFamily">serif-monospace</item><item name="android:textStyle">normal</item><item name="android:textSize">28sp</item><item name="android:text">serif-monospace</item></style><style name="ItalicMonoSerif"><item name="android:fontFamily">serif-monospace</item><item name="android:textStyle">italic</item><item name="android:textSize">28sp</item><item name="android:text">serif-monospace</item></style><style name="BoldMonoSerif"><item name="android:fontFamily">serif-monospace</item><item name="android:textStyle">bold</item><item name="android:textSize">28sp</item><item name="android:text">serif-monospace</item></style></resources>
The activity_main.xml is given below.
下面給出activity_main.xml。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"xmlns:tools="https://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"android:orientation="vertical"tools:context="com.journaldev.customfonts.MainActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/Regular"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/Italic"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/Bold" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/RegularCondensed" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/ItalicCondensed"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/BoldCondensed"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/Casual"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/Cursive"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/RegularMono"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/ItalicMono"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/BoldMono"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/RegularMonoSerif" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/ItalicMonoSerif"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/BoldMonoSerif"/></LinearLayout>
To set custom fonts on a TextView/Button/EditText object, the Typeface property is used.
The Typeface class specifies the typeface and intrinsic style of a font.
To set a typeface over a TextView we invoke the method setTypeface().
Following are the Typeface constants that can be used.
若要在TextView / Button / EditText對象上設置自定義字體,請使用Typeface屬性。
Typeface類指定字體的字體和固有樣式。
要在TextView上設置字體,我們調用方法setTypeface()。
以下是可以使用的Typeface常量。
To set custom fonts on our Views, we first need to import the font files into our project.
Font files generally come up in two types .ttf (True Type Font) and .otf (Open Type Font).
要在我們的視圖上設置自定義字體,我們首先需要將字體文件導入到我們的項目中。
字體文件通常以.ttf(True Type字體)和.otf(Open Type字體)兩種類型出現。
We’ve created another layout namely activity_custom_fonts.xml
for setting custom fonts on our Views.
我們創建了另一個布局,即activity_custom_fonts.xml
用于在視圖上設置自定義字體。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"xmlns:tools="https://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"android:orientation="vertical"tools:context="com.journaldev.customfonts.MainActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Amble Bold"android:textSize="28sp"android:id="@+id/ambleBold"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Amble Light"android:textSize="28sp"android:id="@+id/ambleLight"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Amble Regular"android:textSize="28sp"android:id="@+id/ambleRegular" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="OpenSans Regular"android:textSize="28sp"android:id="@+id/opRegular" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="OpenSans-Italic"android:id="@+id/opItalic"android:textSize="28sp"/><Button android:layout_height="wrap_content"android:layout_width="match_parent"android:text="Pacifico"android:id="@+id/pacifico"/></LinearLayout>
We’re setting our custom fonts in the java code. The MainActivity.java is given below
我們正在Java代碼中設置自定義字體。 MainActivity.java在下面給出
public class MainActivity extends AppCompatActivity {TextView ambleBold, ambleLight, ambleRegular, openSansItalic, openSansRegular;Button btn;private String A_BOLD= "Amble-Bold.ttf";private String A_LIGHT="Amble-Light.ttf";private String A_REGULAR= "Amble-Regular.ttf";private String O_ITALIC= "OpenSans-Italic.ttf";private String O_REGULAR="OpenSans-Regular.ttf";private String P_REGULAR="Pacifico.ttf";@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_custom_fonts);ambleBold=(TextView)findViewById(R.id.ambleBold);ambleLight=(TextView)findViewById(R.id.ambleLight);ambleRegular=(TextView)findViewById(R.id.ambleRegular);openSansRegular=(TextView)findViewById(R.id.opRegular);openSansItalic=(TextView)findViewById(R.id.opItalic);btn=(Button)findViewById(R.id.pacifico);ambleBold.setTypeface(Typeface.createFromAsset(getAssets(), A_BOLD));ambleLight.setTypeface(Typeface.createFromAsset(getAssets(), A_LIGHT));ambleRegular.setTypeface(Typeface.createFromAsset(getAssets(), A_REGULAR));openSansRegular.setTypeface(Typeface.createFromAsset(getAssets(), O_REGULAR));openSansItalic.setTypeface(Typeface.createFromAsset(getAssets(), O_ITALIC));btn.setTypeface(Typeface.createFromAsset(getAssets(), P_REGULAR));}
}
In the above code we’re calling createFromAsset() method on the Typeface class to create a new instance of the Typeface. An instance of the application’s AssetManager is called by passing getAssets()
as the first parameter. The custom font asset file path is passed as a string in the second parameter. Since we’ve placed the font files in the root of assets directory, passing the font filenames would suffice.
在上面的代碼中,我們在Typeface類上調用createFromAsset()方法來創建Typeface的新實例。 通過將getAssets()
作為第一個參數來調用應用程序AssetManager的實例。 自定義字體資產文件路徑在第二個參數中作為字符串傳遞。 由于我們已將字體文件放置在資產目錄的根目錄中,因此傳遞字體文件名就足夠了。
Note: Setting external fonts using android:typeface doesn’t work
注意 :使用android:typeface設置外部字體無效
We end up with the following output when the application is run.
運行該應用程序時,我們得到以下輸出。
Isn’t it a time consuming and redundant task to set the typeface individually for each of the views?
We need a better alternative. Our answer lies in Custom Views. In the next section, we’ll be creating a Custom TextView class and define custom XML attributes to set the external fonts in the XML layout itself.
為每個視圖分別設置字體是一項耗時且冗長的工作嗎?
我們需要更好的選擇。 我們的答案在于自定義視圖 。 在下一節中,我們將創建一個Custom TextView類并定義自定義XML屬性,以在XML布局本身中設置外部字體。
Our Updated Project Structure is given below
Before we implement our CustomTextView.java, let’s look into the TypeFactory.java
class as shown below.
在實現CustomTextView.java之前,讓我們研究一下TypeFactory.java
類,如下所示。
public class TypeFactory {private String A_BOLD= "Amble-Bold.ttf";private String A_LIGHT="Amble-Light.ttf";private String A_REGULAR= "Amble-Regular.ttf";private String O_ITALIC= "OpenSans-Italic.ttf";private String O_REGULAR="OpenSans-Regular.ttf";Typeface ambleBold;Typeface ambleLight;Typeface ambleRegular;Typeface openSansItalic;Typeface openSansRegular;public TypeFactory(Context context){ambleBold = Typeface.createFromAsset(context.getAssets(),A_BOLD);ambleLight = Typeface.createFromAsset(context.getAssets(),A_LIGHT);ambleRegular = Typeface.createFromAsset(context.getAssets(),A_REGULAR);openSansItalic = Typeface.createFromAsset(context.getAssets(),O_ITALIC);openSansRegular = Typeface.createFromAsset(context.getAssets(),O_REGULAR);}}
The above code essentially creates a custom typeface font for each of the font files. We can now use the class variables in our CustomTextView to set the font accordingly.
上面的代碼實際上為每個字體文件創建了一個自定義字體。 現在,我們可以在CustomTextView中使用類變量來相應地設置字體。
The CustomTextView.java
class is given below.
下面給出了CustomTextView.java
類。
public class CustomTextView extends TextView {private int typefaceType;private TypeFactory mFontFactory;public CustomTextView(Context context, AttributeSet attrs) {super(context, attrs);applyCustomFont(context, attrs);}public CustomTextView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);applyCustomFont(context, attrs);}public CustomTextView(Context context) {super(context);}private void applyCustomFont(Context context, AttributeSet attrs) {TypedArray array = context.getTheme().obtainStyledAttributes(attrs,R.styleable.CustomTextView,0, 0);try {typefaceType = array.getInteger(R.styleable.CustomTextView_font_name, 0);} finally {array.recycle();}if (!isInEditMode()) {setTypeface(getTypeFace(typefaceType));}}public Typeface getTypeFace(int type) {if (mFontFactory == null)mFontFactory = new TypeFactory(getContext());switch (type) {case Constants.A_BOLD:return mFontFactory.ambleBold;case Constants.A_LIGHT:return mFontFactory.ambleLight;case Constants.A_REGULAR:return mFontFactory.ambleRegular;case Constants.O_LIGHT:return mFontFactory.openSansItalic;case Constants.O_REGULAR:return mFontFactory.openSansRegular;default:return mFontFactory.ambleBold;}}public interface Constants {int A_BOLD = 1,A_LIGHT = 2,A_REGULAR = 3,O_LIGHT = 4,O_REGULAR=5;}}
R.styleable.CustomTextView
is defined inside the attrs.xml file as shown below.
R.styleable.CustomTextView
在attrs.xml文件中定義,如下所示。
<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="CustomTextView"><attr name="font_name"><enum value="1" name="ambleBold"/><enum value="2" name="ambleLight"/><enum value="3" name="ambleRegular"/><enum value="4" name="openSansItalic"/><enum value="5" name="openSansRegular"/></attr></declare-styleable></resources>
The attribute font_name is the custom attribute we’ll be using in the XML layout.
屬性font_name是我們將在XML布局中使用的自定義屬性。
Our updated activity_custom_fonts.xml
layout is given below:
我們更新后的activity_custom_fonts.xml
布局如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"xmlns:tools="https://schemas.android.com/tools"xmlns:app="https://schemas.android.com/apk/res-auto"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"android:orientation="vertical"tools:context="com.journaldev.customfonts.MainActivity"><com.journaldev.customfonts.CustomTextViewapp:font_name="ambleBold"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Amble Bold"android:textSize="28sp"android:id="@+id/ambleBold"/><com.journaldev.customfonts.CustomTextViewapp:font_name="ambleLight"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Amble Light"android:textSize="28sp"android:id="@+id/ambleLight"/><com.journaldev.customfonts.CustomTextViewapp:font_name="ambleRegular"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Amble Regular"android:textSize="28sp"android:id="@+id/ambleRegular" /><com.journaldev.customfonts.CustomTextViewapp:font_name="openSansRegular"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="OpenSans Regular"android:textSize="28sp"android:id="@+id/opRegular" /><com.journaldev.customfonts.CustomTextViewapp:font_name="openSansItalic"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="OpenSans-Italic"android:id="@+id/opItalic"android:textSize="28sp"/><Button android:layout_height="wrap_content"android:layout_width="match_parent"android:text="Pacifico"android:id="@+id/pacifico"/></LinearLayout>
The MainActivity.java code now would just require setting the Button typeface.
現在,MainActivity.java代碼僅需要設置Button字體。
Note: A CustomButton Custom View can be created in a similar way. Try that out!
注意 :可以用類似的方式創建CustomButton自定義視圖。 試試看!
This brings an end to this tutorial. You can download the Android CustomFonts Tutorial from the below link.
本教程到此結束。 您可以從下面的鏈接下載Android CustomFonts教程 。
翻譯自: https://www.journaldev.com/13291/android-custom-fonts-tutorial
android 自定義字體
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态