{"id":22391,"date":"2024-03-15T23:31:35","date_gmt":"2024-03-15T23:31:35","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/"},"modified":"2024-03-21T22:46:11","modified_gmt":"2024-03-21T22:46:11","slug":"how-can-font-size-control-be-implemented-in-mvvm-on-ios","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/","title":{"rendered":"How can font size control be implemented in MVVM on iOS?"},"content":{"rendered":"

In iOS, we can utilize the MVVM pattern to control the font size. One way to implement this is as follows:<\/p>\n

    \n
  1. Firstly, establish a ViewModel class to handle the font-related logic. Within the ViewModel, an attribute can be defined to indicate the font size, for example:<\/li>\n<\/ol>\n
    class<\/span> ViewModel<\/span> {\r\n    var<\/span> fontSize: CGFloat<\/span> =<\/span> 16.0<\/span>\r\n\r\n    \/\/ \u6839\u636e\u5b57\u53f7\u5927\u5c0f\u8ba1\u7b97\u5176\u4ed6\u76f8\u5173\u7684\u5b57\u4f53\u5c5e\u6027\uff0c\u4f8b\u5982\u884c\u95f4\u8ddd\u3001\u5b57\u95f4\u8ddd\u7b49<\/span>\r\n    var<\/span> lineSpacing: CGFloat<\/span> {\r\n        return<\/span> fontSize *<\/span> 0.5<\/span>\r\n    }\r\n\r\n    \/\/ \u5176\u4ed6\u76f8\u5173\u7684\u65b9\u6cd5...<\/span>\r\n}\r\n<\/code><\/pre>\n
      \n
    1. In the View, adjust the font size of the Label using the font size from the ViewModel. For example:<\/li>\n<\/ol>\n
      class<\/span> ViewController<\/span>: UIViewController<\/span> {\r\n    @IBOutlet<\/span> weak<\/span> var<\/span> label: UILabel<\/span>!\r\n\r\n    var<\/span> viewModel =<\/span> ViewModel<\/span>()\r\n\r\n    override<\/span> func<\/span> viewDidLoad<\/span>() {\r\n        super<\/span>.viewDidLoad()\r\n\r\n        \/\/ \u8bbe\u7f6eLabel\u7684\u5b57\u4f53\u5927\u5c0f<\/span>\r\n        label.font =<\/span> UIFont<\/span>.systemFont(ofSize: viewModel.fontSize)\r\n\r\n        \/\/ \u8bbe\u7f6eLabel\u7684\u884c\u95f4\u8ddd<\/span>\r\n        let<\/span> paragraphStyle =<\/span> NSMutableParagraphStyle<\/span>()\r\n        paragraphStyle.lineSpacing =<\/span> viewModel.lineSpacing\r\n        let<\/span> attributedString =<\/span> NSAttributedString<\/span>(string: label.text ??<\/span> \"\"<\/span>, attributes: [NSAttributedString<\/span>.Key<\/span>.paragraphStyle: paragraphStyle])\r\n        label.attributedText =<\/span> attributedString\r\n    }\r\n\r\n    \/\/ \u5176\u4ed6\u76f8\u5173\u7684\u65b9\u6cd5...<\/span>\r\n}\r\n<\/code><\/pre>\n
        \n
      1. In the Controller, the font size can be changed through user interaction. For example, a button can be added to click and change the font size.<\/li>\n<\/ol>\n
        @IBAction<\/span> func<\/span> increaseFontSize<\/span>() {\r\n    viewModel.fontSize +=<\/span> 2.0<\/span>\r\n\r\n    \/\/ \u66f4\u65b0Label\u7684\u5b57\u4f53\u5927\u5c0f<\/span>\r\n    label.font =<\/span> UIFont<\/span>.systemFont(ofSize: viewModel.fontSize)\r\n\r\n    \/\/ \u66f4\u65b0Label\u7684\u884c\u95f4\u8ddd<\/span>\r\n    let<\/span> paragraphStyle =<\/span> NSMutableParagraphStyle<\/span>()\r\n    paragraphStyle.lineSpacing =<\/span> viewModel.lineSpacing\r\n    let<\/span> attributedString =<\/span> NSAttributedString<\/span>(string: label.text ??<\/span> \"\"<\/span>, attributes: [NSAttributedString<\/span>.Key<\/span>.paragraphStyle: paragraphStyle])\r\n    label.attributedText =<\/span> attributedString\r\n}\r\n<\/code><\/pre>\n
        By following the steps above, you can use the MVVM pattern to control font size. Save the font size state in the ViewModel, let the View retrieve the font size through the ViewModel, and update the corresponding UI.<\/p>\n","protected":false},"excerpt":{"rendered":"
        In iOS, we can utilize the MVVM pattern to control the font size. One way to implement this is as follows: Firstly, establish a ViewModel class to handle the font-related logic. Within the ViewModel, an attribute can be defined to indicate the font size, for example: class ViewModel { var fontSize: CGFloat = 16.0 \/\/ […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-22391","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow can font size control be implemented in MVVM on iOS? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can font size control be implemented in MVVM on iOS?\" \/>\n<meta property=\"og:description\" content=\"In iOS, we can utilize the MVVM pattern to control the font size. One way to implement this is as follows: Firstly, establish a ViewModel class to handle the font-related logic. Within the ViewModel, an attribute can be defined to indicate the font size, for example: class ViewModel { var fontSize: CGFloat = 16.0 \/\/ […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T23:31:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T22:46:11+00:00\" \/>\n<meta name=\"author\" content=\"Emily Johnson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emily Johnson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/\"},\"author\":{\"name\":\"Emily Johnson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378\"},\"headline\":\"How can font size control be implemented in MVVM on iOS?\",\"datePublished\":\"2024-03-15T23:31:35+00:00\",\"dateModified\":\"2024-03-21T22:46:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/\"},\"wordCount\":140,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/\",\"name\":\"How can font size control be implemented in MVVM on iOS? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T23:31:35+00:00\",\"dateModified\":\"2024-03-21T22:46:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can font size control be implemented in MVVM on iOS?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378\",\"name\":\"Emily Johnson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"caption\":\"Emily Johnson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can font size control be implemented in MVVM on iOS? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/","og_locale":"en_US","og_type":"article","og_title":"How can font size control be implemented in MVVM on iOS?","og_description":"In iOS, we can utilize the MVVM pattern to control the font size. One way to implement this is as follows: Firstly, establish a ViewModel class to handle the font-related logic. Within the ViewModel, an attribute can be defined to indicate the font size, for example: class ViewModel { var fontSize: CGFloat = 16.0 \/\/ […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T23:31:35+00:00","article_modified_time":"2024-03-21T22:46:11+00:00","author":"Emily Johnson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Emily Johnson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/"},"author":{"name":"Emily Johnson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378"},"headline":"How can font size control be implemented in MVVM on iOS?","datePublished":"2024-03-15T23:31:35+00:00","dateModified":"2024-03-21T22:46:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/"},"wordCount":140,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/","name":"How can font size control be implemented in MVVM on iOS? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T23:31:35+00:00","dateModified":"2024-03-21T22:46:11+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-font-size-control-be-implemented-in-mvvm-on-ios\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How can font size control be implemented in MVVM on iOS?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378","name":"Emily Johnson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","caption":"Emily Johnson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=22391"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22391\/revisions"}],"predecessor-version":[{"id":56311,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22391\/revisions\/56311"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=22391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=22391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=22391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}