【SwiftUI】Button - 基礎編 -

SwiftUIのUIパーツについても取り上げいきます。今回はそのButton編。 Buttonについてのまとめてみました。

目次

1).基本の形
2).タップ範囲
3).配置
4).角丸、シャドウ

1.基本の形

Buttonの基本の形は下記です。
てボタンの上にテキストだけ表示させた例です。
・コード
Button(action: {
    // タップされた時の処理を記述
}) {
    // ボタンを表すView並びを記述
    Text("button1")
}
・ スクリーンショット

2.タップの範囲

タップの範囲エリアをframe(width:xxx,height:xxx)で指定してますが、下記の例１では、タップ範囲が狭いです。タップ範囲は、Button内の表示内容に指定した方がタップ範囲が広くなります。例2のようにTextにframe指定を付けた方が広くなります。

・コード
//例1: スクリーンショット画面上部のButton表示
  Button(action: {
    // タップ時の処理を実装
   }) {
     Text("button2")
    .background(Color.green)
    .foregroundColor(Color.red)

  }.frame(width: 100, height: 100)
 
//例2: スクリーンショット画面下部のButton表示
    Button(action: {
    // タップ時の処理を実装
  }) {
    Text("button2")
    .frame(width: 100, height: 100)
    .background(Color.green)
  .foregroundColor(Color.red)
  }
・ スクリーンショット

3.配置

以下にアイコンとテキストの配置例とコードを記載します。
例１では横並びに、例２ではアイコンとテキストのスペースを０にしてます。例３は縦並びの表示になります。

・コード
//例1: 横並び
  Button(action:{
    //タップ時の処理を実装
}){
    HStack(){
        Image(systemName:"square.and.arrow.up")
        Text("button1") 
    }
    .frame(width:100,height:100)
    .accentColor(.red)
    .background(Color.yellow)
}
 
//例2: アイコンとテキストのスペースをゼロにする
    Button(action:{
    //タップ時の処理を実装
}){
    HStack(spacing: 0){
        Image(systemName:"square.and.arrow.up")
        Text("button2") 
    }
    .frame(width:100,height:100)
    .accentColor(.red)
    .background(Color.yellow)
}

//例3: アイコンとテキストを縦並びにする
//例2のHStackをVStackに変更
    Button(action:{
    //タップ時の処理を実装
}){
    VStack(spacing: 0){
        Image(systemName:"square.and.arrow.up")
        Text("button2") 
    }
    .frame(width:100,height:100)
    .accentColor(.red)
    .background(Color.yellow)
}
・ スクリーンショット

4.角丸、シャドウ

以下にアイコンとテキストのボタンで、角丸とシャドウの例を掲載します。

・コード
//例1: 角丸をつける
Button(action: {
    //Action
}, label: {
    HStack(spacing: 2) {
    Image(systemName: "magnifyingglass")
    Text("Search")

    }.frame(width: 130.0,height:30.0)
    .foregroundColor(.white)
    .background(Color.blue)
    .cornerRadius(10)
})
**********************************
//例2: 影を更につける。例では赤い影をつけている
Button(action: {
    //Action
}, label: {
    HStack(spacing: 2) {
    Image(systemName: "magnifyingglass")
    Text("Search")

    }.frame(width: 130.0,height:30.0)
    .foregroundColor(.white)
    .background(Color.blue)
    .cornerRadius(10)
    .shadow(color: .red, radius: 3, x: 2, y: 3)
})
**********************************
//例3: クリック時の色を反転させる
Button(action: {
    //Action
}, label: {
    HStack(spacing: 2) {
    Image(systemName: "magnifyingglass")
    Text("Search")

    }
    .frame(width: 130.0,height:30.0)
})
.buttonStyle(CustomButtonStyle())

//-- ButtonStyleでボタンを定義
//-- ここでボタンアクションでの色を変更している
struct CustomButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .foregroundColor(Color.white)
            .background(configuration.isPressed ? Color.red : Color.blue)
            .cornerRadius(10.0)
            .shadow(color: .red, radius: 3, x: 2, y: 3)
    }
}

**********************************
//例4: クリック時にアニメーションさせる
Button(action: {
    //Action
}, label: {
    HStack(spacing: 2) {
        Image(systemName: "magnifyingglass")
        Text("Search")
                        
    }
    .frame(width: 130.0,height:30.0)
})
.buttonStyle(CustomButtonExpandStyle())
                

//-- ButtonStyleでボタンを定義
//-- ここでボタンアクションでの色を変更している
struct CustomButtonExpandStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .foregroundColor(Color.white)
            .background(configuration.isPressed ? Color.red : Color.blue)
            .cornerRadius(10.0)
            .shadow(color: .red, radius: 3, x: 2, y: 3)
            .scaleEffect(configuration.isPressed ? 0.7 : 1.0)
            .opacity(configuration.isPressed ? 0.4 : 1)
    }
}
・ 動画

このブログの人気の投稿

アプリアイコンの素材探し

はじめに  iOSアプリ開発で利用するアイコン素材をネットで探してみた アイコン画像について、ネットのアイコンを利用するとき ライセンスを確認すると思いますが、直近調べたものを記載しました。
続きを読む

【SwiftUI】グラスモーフィズムを試してみました

イメージ
🤔 グラスモーフィズムって？   すりガラスの表現を利用した半透明の表現方法でガラスの向こう側がすりガラスによって曇って見える表現が特徴です。iosでは今更ですが、MacOSのBig Surに利用されていることから、2021年のデザインのトレンドとして挙がっています。  🤔  では、どのような画面表現があるのか？ ・Dribbbleでは？ https://dribbble.com/tags/glassmorphism ・Pinterestでは？ Pinteresetで検索すると、Osamu Furukawaさんのボードに掲載がございます。以下にリンクを掲載します。 https://www.pinterest.jp/omfull/%E3%82%B0%E3%83%A9%E3%82%B9%E3%83%A2%E3%83%BC%E3%83%95%E3%82%A3%E3%82%BA%E3%83%A0glassmorphism/ 🤔 どんな表現が可能なのか？ 以下のスズキアユミさんのサイトがまとまってますので、リンクとして掲載します。 https://designmemo.jp/creative/glassmorphism.html 🤔 SwiftUIで表示できるの？ 試した結果、SwiftUIのみでは表現が難しそうです。Blurの表現ありますが、ただのViewに くもりガラス風の表現 をするのは難しく、UIViewRepresentableで拡張したUIVisualEffectViewというパーツが必要になるようです。 ここまでで、やったこととして、Figmaで以下のように簡単なデザインしました。 figmaのプラグインで、SwiftUIインスペクターを利用してSwiftUIのコードを出力してiPhone画面に表示してみました。以下のようになります。オレンジの四角形と黄色い三角形部分が上にのっているViewで薄く表示されてますが、 くもりガラス風な表現になってはいません。 UIVisualEffectViewを利用すると以下のような表現になります。オレンジの四角形と黄色い三角形部分が上にのっているViewがくもりガラスのようになりました。 くもりガラス...
続きを読む

【SwiftUI】LazyVGridについて

イメージ
1.LazyVGrid, LazyHGridについて 今回は、SwiftUIのLazyVGridについて取り上げます。  iOS14からLazyVGridとLazyHGridが利用できるようになりました。UICollectionViewを使って表現していたグリッドデザインをSwiftUIではLazyVGrid,LazyHGridを利用して表現します。以下の表示例をみていきましょう。 2.表示例：４列の固定幅のViewを持つLazyVGridの表示 1) スクリーンショット 2) コード 3.上記コードについて 1) LazyVGridのインスタンスについて LazyVGrid(colomns: [GridItem], alignment: VerticalAlignment, spacing: CGFloat?, pinnedViews: PinnedScrollableViews, content: () -> _) ※LazyHGridの場合は、colomnsのラベル名がrowsに変わります 引数の各要素は以下のようになってます ・rows： 　→ GridItem の配列を指定。 ・alignment： 　→ 行の配置を .center .top .bottom のいずれかを指定 ・spacing： 　→ 行と行の間隔を指定 　→ ・LazyVGridの場合、行間のスペースを変更します。 ・pinnedViews： 　→ ヘッダーとフッターを固定するかどうかを指定する。ヘッダーの場合は .sectionHeaders を、フッターの場合は .sectionFooters を指定します。 cf）Apple Documentaion: LazyGridView.init 2) 要素のGridItemについて GridItemは要素のサイズ、要素数を定義します GridItem(GridItem.Size, spacing: CGFloat?, alignment: Alignment?) ・GridItem.Sizeについて → 以下の種類があるようです。 　fixed：固定サイズを指定 　flexible：可変サイズ（最小・最大指定）をして 　...
続きを読む