BLOG記事

ブログ記事

UIと色の続きです。今日は背景のグラデーションをいくつか比べてみましょう。

前回から「UIと色」と言うことで話を進めていますが、基本的にアプリではデザインの素養のある方の力を借りた方が良いと思います。個人で開発していて自身にデザイン力がない場合は外注するのも手かもしれません。最近はネットのクラウドソーシングのサイトがいろいろ出ているのでデザイナーさんへのアクセスも昔よりは良くなった様に思えます。

今回はSwiftUIを使った背景のグラデーションを青一色で試してみます。

まずは、単純に上から下に向けて青のグラデーションをかけるやり方で、LinearGradient()を使います。

次に、左上(.leading)から下(.bottom)にグラデーションをかけるとちょっと印象が違いますね。

そして、SwiftUIでは、LinearGradientだけでなく、RadialGradientとAngularGradientが用意されています。まず、RadialGradientを見てみましょう。

そして、AngularGradientも併せて見てみましょう。

大瀧さんと二人でSwiftUIに関する情報をストックして共有するためにScrapboxのプライベートサイトを利用しています。最近は成澤さんと3人でSwiftUIのアプリ開発をしています。大瀧さんがbackgroundのカラーで感じの良いものを紹介しているので、皆さんとも情報共有いたします。

import SwiftUI

struct ContentView: View {
    let backgroundColor = LinearGradient(gradient: Gradient(colors: [Color(red: 0.0, green: 0.85, blue: 1.0, opacity: 1.0), Color.blue]), startPoint: .top, endPoint: .bottom)
    
    var body: some View {
        ZStack {
        
            backgroundColor.edgesIgnoringSafeArea(.all)
            Text("Background Test")
            
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

「スマホde特許管理」では、期日のリスト表示に不連続なグラデーションを使用しました。

では、この不連続なグラデーションをどの様に作成するかについてですが、これも大瀧さんに教えてもらいました。デザインの知識がないとどの様に不連続な色のグラデーションを選択すれば良いかはわかりません。ですが、この不連続な色のグラデーションに関してはとても役立つサイトがあり、活用しています。

「UIと色」はいろいろ奥が深いので、これからもいろいろ取り組んでいきたいと思います。

関連記事一覧