I have simple chat app, and it is work for image picker, but I have custom image view and it fetch the images from internet, I want to use them instead of the image picker in my phone, but I did not find any solution, is there any idea about it?
struct Home: View {
@State var message = ""
@State var imagePicker = false
@State var imgData: Data = Data(count: 0)
@StateObject var allMessages = Messages()
var body: some View {
ZStack {
VStack {
VStack {
// Displaying Message
ScrollView(.vertical, showsIndicators: true) {
ScrollViewReader { reader in
VStack(spacing: 20) {
ForEach(allMessages.messages) { msg in
ChatBubble(msg: msg)
}
.onChange(of: allMessages.messages) {
value in
if value.last!.myMsg {
reader.scrollTo(value.last?.id)
}}}}}}}
.clipShape(RoundedRectangle(cornerRadius: 35))}
VStack {
HStack(spacing: 15) {
HStack(spacing: 15) {
TextField("Message", text: $message)
Button(action: {
// toggling image picker
imagePicker.toggle()
}) {
Image(systemName: "paperclip.circle.fill")
.font(.system(size: 22))
.foregroundColor(.gray)}
.background(Color.black.opacity(0.06))
.clipShape(Capsule())
if message != "" {
Button(action: {
withAnimation(.easeIn) {
allMessages.messages.append(Message(id: Date(), message: message, myMsg: true, profilePic: "p1", photo: nil))
}
message = ""
}) {
Image(systemName: "paperplane.fill")
.font(.system(size: 22))
.foregroundColor(Color("Color"))
// rotating the image
.rotationEffect(.init(degrees: 45))
.clipShape(Circle())}}}
.padding(.bottom)
.padding(.horizontal)
.background(Color.white)
.animation(.easeOut)
}
.fullScreenCover(isPresented: $imagePicker, onDismiss: {
if imgData.count != 0 {
allMessages.writeMessage(id: Date(), msg: "", photo: imgData, myMsg: true, profilePic: "p1")
}
}) {
ImagePicker(imagePicker: $imagePicker, imgData: $imgData)
}}}}
struct ChatBubble: View {
var msg: Message
var body: some View {
HStack(alignment: .top, spacing: 10) {
if msg.myMsg {
if msg.photo == nil {
Text(msg.message)
.padding(.all)
.background(Color.black.opacity(0.06))
.clipShape(BubbleArrow(myMsg: msg.myMsg))
} else {
Image(uiImage: UIImage(data: msg.photo!)!)
.resizable()
.frame(width: UIScreen.main.bounds.width - 150, height: 150)
.clipShape(BubbleArrow(myMsg: msg.myMsg))
}
Image(msg.profilePic)
.resizable()
.frame(width: 30, height: 30)
.clipShape(Circle())
} else {
Image(msg.profilePic)
.resizable()
.frame(width: 30, height: 30)
.clipShape(Circle())
if msg.photo == nil {
Text(msg.message)
.foregroundColor(.white)
.padding(.all)
.background(Color("Color"))
.clipShape(BubbleArrow(myMsg: msg.myMsg))
} else {
Image(uiImage: UIImage(data: msg.photo!)!)
.resizable()
.frame(width: UIScreen.main.bounds.width - 150, height: 150)
.clipShape(BubbleArrow(myMsg: msg.myMsg))}}}
.id(msg.id)}}
struct RoundedShape: Shape {
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 35, height: 35))
return Path(path.cgPath)
}
}
struct Message: Identifiable, Equatable {
var id: Date
var message: String
var myMsg: Bool
var profilePic: String
var photo: Data?
}
class Messages: ObservableObject {
@Published var messages: [Message] = []
init() {
let strings = ["Hii", "Hello!!", "What's up?", "What Are you doing?", "Nothing, just enjoying quarantine holidays.. you??", "Same :))", "Ohhh", "What about your country?", "Very very bad..", "Ok, be safe.", "Ok", "Bye"]
for i in 0..<strings.count {
// simple logic for two side message View
messages.append(Message(id: Date(), message: strings[i], myMsg: i % 2 == 0, profilePic: i % 2 == 0 ? "p1" : "p2"))
}
}
func writeMessage(id: Date, msg: String, photo: Data?, myMsg: Bool, profilePic: String) {
messages.append(Message(id: id, message: msg, myMsg: myMsg, profilePic: profilePic, photo: photo))
}
}
CustomImageView:
struct CustomImageView: View {
private let threeColumnGrid = [
GridItem(.flexible(minimum: 40)),
GridItem(.flexible(minimum: 40)),
GridItem(.flexible(minimum: 40)),
]
var body: some Scene {
LazyVGrid(columns: threeColumnGrid, alignment: .center) {
ForEach(model.imageNames, id: \.self) { item in
GeometryReader { gr in
Image(item)
.resizable()
.scaledToFill()
.frame(height: gr.size.width)
}
.clipped()
.aspectRatio(1, contentMode: .fit)
}
}
}
}
