การเพิ่ม Custom Font และการเรียกใช้ Font ใน Xamarin Form

เราได้ลองใช้ OnPlatform กันมาแล้วทีนี้เราจะมาลอง นี่!!

เมื่อเราพูดถึงการออกแบบดีไซน์ความสวยงาม เราก็จะคิดและว่ามันมีหลายองค์ประกอบ หลายอย่างรวมกันเพื่อให้เกิดสิ่งสร้างสรรค์ และสิ่งหนึ่งที่ขาดไม่ได้เลยเมื่อพูดถึงการดีไซน์ก็คือ Font คับ แอพเราจะสวยได้อย่างไรถ้าเกิดมา มีแต่ Default Font ของเครื่องทั้งแอพ ทุกหน้ามีแค่ขนาดความหนาเท่านั้นที่ต่างกัน และแต่ละเครื่อง Default Font ก็ไม่เหมือนกันอีก แล้วเราจะทำอย่างไรหล่ะ

นั่นหล่ะฮ่ะ วันนี้ผมจะมาสอนวิธีการเพิ่ม Custom Font หรือ Font ที่เราอยากให้มีในทุกเครื่องทุกที่ทุก Platform หรือ Font ของเราเองที่เราสร้างมาเอง หรือ Font ที่เราโหลดมาจากเวปที่เค้าแจกกันฟรีๆ นั่นหล่ะคับ เชิญรับชมรับฟังรับอ่านได้เลยครับ

สำหรับ Font ที่ผมจะยกมาทำในตัวอย่างนี้ก็คือ AwesomeFont แบบ free ซึ่งไม่ว่าจะได้ไฟล์แบบ otf หรือ ttf ก็ใช้วิธีการของผมได้เช่นกัน

การใส่เพิ่ม Font นี้เราจำเป็นจะต้องเพิ่มให้กับโปรเจค Android และ iOS อย่างละอันนะครับ โดยวิธีการก็ดังนี้เลย

Android

สำหรับใน Android เราจะนำเอาไฟล์ Font ที่เราต้องการใช้ไปใว้ที่ Project ของ Android นะครับ โดยจะต้องอยู่ภายใต้ folder Assets เท่านั้น (ไม่ใช่ Resources หรือ Resources/Fonts ได้ๆ) ซึ่งผมจะสร้าง folder Fonts ใว้เผื่อแยก Assets อื่นๆไม่ให้ปนกันอีกทีแบบนี้

Assets/Fonts/Font Awsome 5 Brand-Regular-400.otf

โดยพยายามอย่าไปเปลี่ยนชื่อหรือตกแต่งอะไรมัน(แต่ทำได้) ทั้งหมดจะได้หน้าตาแบบนี้

สำหรับ Android ก็มีเพียงเท่านี้แหละครับ ไม่ได้ยุ่งยากอะไรเลย

iOS

ต่อมาเราจะมาทำแบบเดียวกันกับ iOS บ้าง แต่จะมีอะไรบางอย่างซับซ้อนกว่า

โดย iOS นี้เราจะต้องเอาใว้ภายใต้ Resources Folder เท่านั้น และผมก็จะสร้าง Folder ชื่อ Fonts อีกเช่นกัน

Resources/Fonts/Font Awsome 5 Brand-Regular-400.otf

และหน้าตาที่ได้ก็จะออกมาแบบนี้

แต่!!! ยังไม่จบ เพราว่าเราจะต้องไปสั่ง Manifest ของ iOS ให้รู้ก่อนนะว่า เราได้เพิ่มอะไรเข้ามาในโปรเจคแล้ว โดยเราจะต้องเข้าไปแก้ไขที่ไฟลชื่อ info.plist โดยมันจะอยู่ตรงนี้

แต่เมื่อเราคลิกขึ้นมาเราจะได้หน้าตาแบบนี้

อย่าตกใจ ให้เราปิดมันไปคับแล้วเราก็มาคลิกขวาที่ไฟล info.plist ไปที่ Open With… จะมีหน้าต่าง Open With ขึ้นมา ในที่นี้ผมแนะนำให้เปิดเป็น XML (Text) Editor

กด OK จะได้แบบนี้

แล้วให้เพิ่มไปตามโค๊ดเข้าไปภายใน <dict> … </dict> เท่านั้นนะครับ

<key>UIAppFonts</key>
<array>
 <string>Fonts/Font Awesome 5 Brands-Regular-400.otf</string>
 <string>Fonts/Font Awesome 5 Free-Regular-400.otf</string>
 <string>Fonts/Font Awesome 5 Free-Solid-900.otf</string>
 <string>Fonts/OpenSans-Regular.ttf</string>
 <string>Fonts/OpenSans-Bold.ttf</string>
 <string>Fonts/OpenSans-BoldItalic.ttf</string>
 <string>Fonts/OpenSans-ExtraBold.ttf</string>
 <string>Fonts/OpenSans-ExtraBoldItalic.ttf</string>
 <string>Fonts/OpenSans-Italic.ttf</string>
 <string>Fonts/OpenSans-Light.ttf</string>
 <string>Fonts/OpenSans-LightItalic.ttf</string>
 <string>Fonts/OpenSans-SemiBold.ttf</string>
 <string>Fonts/OpenSans-SemiBoldItalic.ttf</string>
</array>

หน้าตาของ info.plist เราจะออกมาหน้าตาแบบนี้ครับ

แต่!!! เราจะรู้ได้ไงคับว่าที่เราใส่ไปข้างบนอ่ะ มันถูก!!! ดูจากชื่อไฟลแล้ว ทั้งเว้นวรรค ทั้งมีขีดมันจะตรงได้อย่างไร

ไม่ต้องตกใจครับผมมีวิธีเชคโดยผมได้ไป research วิธีการจาก Link นี้ครับ ประโยชน์องมันไม่ใช่แค่เอาใว้ดูว่าเราเพิ่ม Font ได้ใหม แต่!!! เราจะได้รู้ชื่อจริงๆของ Font นั้นๆด้วย เนื่องจาก iOS อ้างชื่อ Font ในการเรียกใช้ Font นั้นๆ (ไม่ใช่ Path ของ Font นั้นๆในแบบ Android)

เดี๋ยวผมจะยกตัวอย่างกันเรียกใช้ให้ดูละกัน นี่!!!!

<OnPlatform x:Key="NormalFont"
            x:TypeArguments="x:String"
            Android="Fonts/OpenSans-Regular.ttf#Open Sans"
            iOS="OpenSans-Regular" />
<OnPlatform x:Key="BoldFont"
            x:TypeArguments="x:String"
            Android="Fonts/OpenSans-Bold.ttf#Open Sans"
            iOS="OpenSans-Bold"/>

ดูให้เต็มๆตาและจดจำใว้คับ ผมผ่านมาเยอะ!!! เสียเวลากันมันมามากมายกับอิแค่ Font ง่ายๆ!!! นี่! ออกมาอย่างดีเลยใน Android สวยหรู แต่พอไปพอร์ตลง iOS iPhone ป้าบ !!! เจ๊งคับ Font ไม่ออก ยิ่งถ้าใช้ Awesome Font นะครับ คุณผู้อ่านจะเห็น สี่เหลี่ยม ป๊าบ!! กลางจอ เป็นไงละคับวางแพลนงานมา 1 วัน คุณต้องไป รีเสิจเพิ่มอีก!!! เสียเวลาป่ะละคับ ผมทำให้ดูแล้ว !!!

เอาหล่ะดราม่าชีวิตเยอะไป เข้าเรื่อง ให้คุณผู้อ่านสังเกตุคับว่า Android นั้น คุณแค่เรียก Path ให้ถูก ก็คือจบคับง่ายที่สุดในสามโลกหล่ะ แต่พอมา iOS หล่ะ มันไม่ใช่ Path และมันก็ไม่ใช่ ชื่อ File ของ Font นั้นๆด้วย ย้ำ!!! จำให้ดี มันไม่ใช่ชื่อ File ของ Font นั้นๆ **ไม่ใช่ชื่อ File ของ Font นั้นๆ** ผมย้ำขนาดนี้ ถ้ายังผิดนะ ฮึ๊ยยย

ดังนั้นวิธีดูชื่อ Font ที่ผมบอกก่อนหน้านี้!! จึงสำคัญมาก อ่ะ Link แปะลิ้งให้อีกรอบสำหรับคนขี้เกียจ ผมทำให้ดูเลยละกันอ่ะ !!!

เอาโค๊ดนี้ไปแปะใส่ในไฟล์ AppDelegate.cs

foreach (var familyNames in UIFont.FamilyNames.OrderBy(c => c).ToList())
{
    Console.WriteLine(" * " + familyNames);
    foreach (var familyName in UIFont.FontNamesForFamilyName(familyNames).OrderBy(c => c).ToList())
    {
        Console.WriteLine(" *-- " + familyName);
    }
}

จะได้แบบนี้คับ

ทีนี้กด Build หรือจะ Run ก็ได้คับให้มัน output ชื่ออกมาทั้งหมด

นี่คับถ้าขึ้นชื่อ Font แสดงว่า iOS รู้และเห็น Custom Font ของเราแล้ว คุณผู้เขียนก็ก๊อปเอาชื่อ Font ในนี้ ไปใช้คับ

นี่คือโค๊ดตัวอย่างของ AwsomeFont

<OnPlatform x:Key="AwesomeFontFamily"
            x:TypeArguments="x:String"
            Android="Fonts/Font Awesome 5 Free-Regular-400.otf#Font Awesome 5 Free Regular"
            iOS="FontAwesome5FreeRegular" />
<OnPlatform x:Key="AwesomeSolidFontFamily"
            x:TypeArguments="x:String"
            Android="Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid"
            iOS="FontAwesome5FreeSolid" />
<OnPlatform x:Key="AwesomeBrandsFontFamily"
            x:TypeArguments="x:String"
            Android="Font Awesome 5 Brands-Regular-400.otf#Font Awesome 5 Brands Regular"
            iOS="FontAwesome5BrandsRegular" />

ตัวอย่างด้านบนนี้คือ Resources ของ Xamarin Form ถ้าเอาไปแปะใว้ก็จะใช้ได้ทั้ง App แบบนี้คับ

เรามาลองใช้กันดูคับ โดยผมจะลองเอารูป ดาว มาใช้ วิธีใช้ก็ง่ายให้เอาโค๊ด unicode ไปแปะ แต่ถ้าใช้ใน xaml จะต้องใส ่ ‘&#x + unicode + ;’ แบบนี้ ซึ่งถ้าเราจะเอารูปดาว unicode ก็คือ f005 ถ้าเราจะเอาไปใส่ใน xaml ก็จะได้ ‘&#xf005;’

ถ้าใน c# ก็ควรเป็นแบบนี้ \uf005

และที่สำคัญ อย่าลืมใส่ FontFamily ให้มันด้วย ซึ่ง FontFamily ก็คือ StaticResource ที่เราตั้งค่า x:Key ใว้ใน App.xaml นั่นแหละคับ

<Label Text="Hello World &#xf005;" 
    FontFamily="{StaticResource AwesomeSolidFontFamily}"/>

หน้าตาหลังจากใส่โค๊ดทุกยอ่างพร้อมแล้วจะออกมาเป็นแบบนี้ครับ

และเมื่อคุณผู้อ่านกดรัน มันควรจะออกมาเหมือนกับของผม !!!

จบครับ ปรบมือ

ref: https://stackoverflow.com/questions/48188187/fontawesome-pro-and-xamarin-ios-only-one-font-can-be-active

ref: https://xamarinhelp.com/custom-fonts-xamarin-forms/

ref: https://xamarininsider.com/2017/07/12/using-icon-fonts-in-your-xamarin-forms-apps/

ref: https://doumer.me/icons-with-font-awesome-5-xamarin-forms

ref: https://fontawesome.com