android字體樣式,android 自定義字體_Android自定義字體教程

 2023-11-19 阅读 24 评论 0

摘要: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自定義字體 (

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自定義字體 (Android Custom Fonts)

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屬性來設置樣式。 讓我們看看它們。

  • android:fontFamily : This is used to change the default fonts of the application. We can choose the font from among the following types.

    The default fontFamily is sans-serif.
    android:fontFamily requires minimum API level as 16.

    android:fontFamily :這用于更改應用程序的默認字體。 我們可以從以下類型中選擇字體。

    默認的fontFamily是sans-serif
    android:fontFamily需要的最低API級別為16。

  • android:typeface : This XML attribute won’t have any effect if the fontFamily is already used(Unless the API level is less than 15, in which case the fontFamily attribute would be ignored). normal or sans is the default type of this attribute. Following are the values acceptable.
    android typeface xml types, android custom fonts

    android:typeface :如果已經使用了fontFamily,則此XML屬性將無效(除非API級別小于15,在這種情況下,fontFamily屬性將被忽略)。 normal或sans是此屬性的默認類型。 以下是可接受的值。
  • android:textStyle : This attribute takes in values : bold, italic and normal either individually or combined such as 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:fontFamilyandroid: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常量。

  • BOLD

    膽大
  • BOLD_ITALIC

    加粗斜體
  • ITALIC

    意大利文
  • NORMAL

    正常

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字體)兩種類型出現。

Android自定義字體項目結構 (Android Custom Fonts Project Structure)

android custom fonts project

In the above image a new folder assets has been added under the main directory.


在上圖中,新文件夾資產已添加到主目錄下。

Android自定義字體代碼 (Android Custom Fonts Code)

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

android custom fonts project structure

我們更新的項目結構如下

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教程

Download Android Custom Fonts Project下載Android自定義字體項目

翻譯自: https://www.journaldev.com/13291/android-custom-fonts-tutorial

android 自定義字體

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/5/182945.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息