はじめに
アソビューで最近iOSアプリ開発をしている上中です。 アソビューは現在Swiftで開発したiOSアプリをAppStoreで公開していますが、最近TOPページや検索結果表示の際に各種プランに口コミの評価点を表示する機能を追加しました。
今回はその時にSwiftUIで作った5段階評価を星マークで表現するコンポーネントを皆さんの参考になればと思い共有します。
動作環境
執筆時点の動作環境を参考までに記載しておきます。
・Xcode Version 15.2
・Swift 5
要件
以下のような評価の星を表示するコンポーネントを作成します。
こちらは評価点3.6の例ですが、アソビューのアプリでは0.6のような半端な数値の場合は、分かりやすいように星0.5個分で表現しています。
しかし本記事内では、ひとまず0.6のような数字の場合でも60%の星を表現できるようにしていますので、要件に合わせて作り変えていただければと思います。
実装
コンポーネントの実装は以下の通りです。
白い星(star)の上に、Rectangleをmaskで星型に切り抜き、さらにclipShapeで小数点の割合分をカットしたオレンジの星を、overlayで重ねています。
課題はstarとfillStarが同じサイズのため、roundedDecimal()のreviewRatingに0.9を指定してfillStarをカットすると、starの枠線が切り取られた部分を補完してしまってfillStarのように見えてしまう点でしょうか。
今回は中途半端な数は0.5で切り捨てたり1.0に切り上げているためそれでも問題ありませんが、そこまで細かい要件が必要な場合は工夫が必要になります。
もし上手いやり方があれば教えてください！
なお利用する場合は以下のように実装すればOKです。
さいごに
アソビューでは、「生きるに、遊びを。」を実現するための良いプロダクトを世の中に届けられるよう共に挑戦していく様々なエンジニアを募集しています。 QAエンジニアについても、上記のような課題を一緒に解決するための仲間を増やせたらと考えています。
カジュアル面談のご希望も随時お受けしておりますので、お気軽にエントリーください！ お待ちしております。
