Swift5.1.2 Xcode11.2.1 SwiftUI
- iPhoneのアルバムにアクセスする設定を行います
- 写真画像の背景を編集し丸く切り抜きを行います
- カメラから取り込んだ写真も丸くトリミングします
「以下は動画のハイライトです。」
iPhoneの写真を丸く切り取るアプリを作ってみます。自分好みに一定の形に切り取りたいということでしたら自分でアプリを作ってしまった方が絶対早いです。プライベートな写真をサードパーティのアプリで編集するのも少し抵抗がありますから初めての方もこれを機にプログラミングの勉強をしていただければと思います。
まずinfo.plistから以下二つを追加し説明を記入します。
Privacy - Camera Usage Description 説明:カメラを使わせていただきます。
Privacy - Media Library Usage Description 説明:アルバムを使わせていただきます。
よくアプリを使っていると急にカメラへアクセスしようとしてますなどのメッセージが出るかと思いますが、その説明をこちらで編集できます。自分使用のアプリなら不要ですがApp
Storeで公開するならアクセスする目的を記述するのは義務ですので空欄だとリジェクトの対象となります。アプリの外のデータを利用する類にこのinfo.plistの設定が必要です。
次にCoordinatorのclassを記述します。
class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate
{
@Binding var showCoordinatorBool: Bool
@Binding var coordinatorImage: Image?
init(shownBool: Binding<Bool>, cordinatedImage: Binding<Image?>)
{
_showCoordinatorBool = shownBool
_coordinatorImage = cordinatedImage
}
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo
info: [UIImagePickerController.InfoKey : Any]) {
guard let gotImage = info[UIImagePickerController.InfoKey.originalImage]
as? UIImage else { return }
coordinatorImage = Image(uiImage: gotImage)
showCoordinatorBool = false
}
func imagePickerControllerDidCancel(_ picker: UIImagePickerController)
{
showCoordinatorBool = false
}
}
init( ) の書き方が少し特殊ですね。引数の型指定や変数の前にアンダーバーがあるのでこれはそういうものだとそのまま使ってください。このクラスでは写真を選択し決定した時の動きが記載されております。
以下はカメラやアルバムを呼び出すstructです。
struct GetImageView {
@Binding var shownBool: Bool
@Binding var getImage: Image?
func makeCoordinator() -> Coordinator {
return Coordinator(shownBool: $shownBool, cordinatedImage: $getImage)
}
}
extension GetImageView: UIViewControllerRepresentable {
func makeUIViewController(context: UIViewControllerRepresentableContext<GetImageView>)
-> UIImagePickerController {
let picker = UIImagePickerController()
picker.delegate = context.coordinator
// picker.sourceType = .camera
return picker
}
func updateUIViewController(_ uiViewController: UIImagePickerController,context:
UIViewControllerRepresentableContext<GetImageView>) {
}
}
ここで上記のコメントアウトしているpicker.sourceType = .cameraですがここをコメント解除するとカメラが起動するようになります。コメントアウトのままだと写真アルバムへのアクセスとなります。なお、シミュレーターですとカメラを起動することができずクラッシュするのでご注意ください。
以上を使って以下のようにbodyへ記述します。
var body: some View {
ZStack {
VStack {
Button(action: {
self.showGetImageView.toggle()
}) {
Text("写真を選択")
}
Spacer().frame(height:50)
imageSelected?.resizable()
.frame(width: 300, height: 300)
// .clipShape(Circle())
// .overlay(Circle().stroke(Color.white, lineWidth: 4))
}
if (showGetImageView) {
GetImageView(shownBool: $showGetImageView, getImage: $imageSelected)
}
}
}
ここでZStackというものが登場しますが、これはchild viewが重なり合うことを許可する配置になるようです。また本題の上記コメントアウトを外すことによって写真を丸く切り抜くことが可能となります。このコメントアウトを外してみて画像がうまくCircle(
)の形状にトリミングすることが確認できましたでしょうか？
最後にカメラから取り込んだ写真も丸く切り取りができることを確認しましょう。カメラを使うには実機で行わなければならないのでiPhoneの画面収録で撮影した動画もYouTubeの動画に盛り込んでおりますのでご査収ください。
ソースコードは YouTubeのコメント欄 に記載します。
目次へ戻る
