title: IOS date: 2023-10-21
//
// ContentView.swift
// Aaronwei
//
// Created by ylkj on 2022/6/24.
//
import SwiftUI
struct ContentView: View {
@State private var username: String = ""
var body: some View {
VStack {
VStack(spacing: 0){
Form {
TextField(
"请输入用户名",
text: $username
)
.onAppear {
UITextField.appearance().clearButtonMode = .whileEditing
}
.padding(.bottom, -10.0)
.textFieldStyle(.automatic)
}.frame(minHeight: 0, maxHeight: 100)
ScrollView{
VStack{
ButtonView(icon:"applelogo",text:"苹果1")
ButtonView(icon:"applelogo",text:"苹果2")
ButtonView(icon:"applelogo",text:"苹果3")
ButtonView(icon:"applelogo",text:"苹果4")
ButtonView(icon:"applelogo",text:"苹果5")
ButtonView(icon:"applelogo",text:"苹果6")
ButtonView(icon:"applelogo",text:"苹果7")
ButtonView(icon:"applelogo",text:"苹果8")
ButtonView(icon:"applelogo",text:"苹果9")
VStack{
ButtonView(icon:"applelogo",text:"苹果10")
ButtonView(icon:"applelogo",text:"苹果11")
}
}
}
HStack(spacing: 0){
ButtonView(icon:"applelogo",text:"苹果")
ButtonView(icon:"car",text:"特斯拉")
}.zIndex(10)
.frame(alignment: .bottom)
.padding(.bottom,0)
.ignoresSafeArea()
.background(Color.white.opacity(0.3))
.frame(maxHeight: .zero)
}
//
// ButtonView(icon:"applelogo",text:"苹果").padding(.top, -100.0).zIndex(20)
// .frame(alignment: .bottom)
// .ignoresSafeArea()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct ButtonView: View {
var icon :String
var text :String
struct CustomButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.font(.system(size: 12))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(Color(.white))
.background(Color(red: 88 / 255, green: 224 / 255, blue: 133 / 255))
.cornerRadius(30)
.padding(.horizontal, 10)
.padding(.vertical, 2)
.shadow(radius: 4)
.scaleEffect(configuration.isPressed ? 1.2 : 1)
.animation(.easeInOut(duration: 0.2), value: configuration.isPressed)
}
}
var body: some View {
VStack{
Button(action: {
print("按钮被触发了~")
}){
HStack {
Image(systemName: icon)
.imageScale(.large)
Text(text)
.fontWeight(.semibold)
.font(.title)
}
}
.buttonStyle(CustomButtonStyle())
}
.font(.largeTitle)
}
}
//
// AaronListView.swift
// Aaronwei
//
// Created by ylkj on 2023/10/21.
//
import SwiftUI
struct AaronListView_Previews: PreviewProvider {
static var previews: some View {
AaronListView(isPush: .constant(true))
}
}
struct AaronListView: View {
@State var offset: CGSize = .zero
@Binding var isPush : Bool
@State public var showDetailInner = false
@Namespace var nameSpace
@Environment(\.presentationMode) var presentationMode
@State private var username: String = ""
var body: some View {
ZStack(){
if showDetailInner {
withAnimation(.easeInOut){
TestDetailView(showDetailInner:$showDetailInner).padding(0).background(Color.white).zIndex(10).ignoresSafeArea(.all)
}
}else{
VStack{
ButtonDetailView(icon:"applelogo",text:"苹果")
List{
StreetRow(name: "The Lodon Street")
.onTapGesture {
showDetailInner.toggle()
}
}
}.background(Color.white.opacity(0.0))
.scaleEffect(getScale())
.offset(x: self.offset.width > 0 ? self.offset.width :0)
.gesture(DragGesture()
.onChanged{ value in
withAnimation(.spring()) {
offset = value.translation
print(offset)
if(offset.width > 160){
presentationMode.wrappedValue.dismiss()
}
}
}
.onEnded { value in
withAnimation(.spring()) {
offset = .zero
}
}
)
}
}
}
func getScale() -> CGFloat {
let width = UIScreen.main.bounds.width / 2
let offsetX = abs(offset.width)
let percentage = offsetX / width
return 1.0 - min(0.5, percentage)
}
}
struct StreetRow: View {
var name: String
@Namespace var shapeTransition
var body: some View {
HStack(alignment: .center){
Text("1")
.fontWeight(.bold)
.padding()
.background(Color.white)
.foregroundColor(.black)
.clipShape(Circle())
.overlay(Circle().stroke(Color.black, lineWidth: 3))
HStack(alignment: .center){
Image("applelogo").resizable().frame(width: 80, height: 80)
.background(.green)
.clipShape(Circle())
.overlay(Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 5)
VStack(alignment: .leading){
Text("Queezy App")
.foregroundColor(Color(red: 50 / 255, green: 50 / 255, blue: 50 / 255))
.fontWeight(.bold)
Text("1888 rmb")
.foregroundColor(.gray)
.padding(.top,1)
}
}.frame(width: 240)
HStack{
Text("2")
.fontWeight(.bold)
.padding()
.background(Color.white)
.cornerRadius(80)
.foregroundColor(.gray)
.clipShape(Circle())
.overlay(Circle().stroke(Color.gray, lineWidth: 3))
}.padding(.leading,10).padding(.top,4)
}
}
}
struct ButtonDetailView: View {
var icon :String
var text :String
@Environment(\.presentationMode) var presentationMode
struct CustomButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.font(.system(size: 12))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(Color(.white))
.background(Color.green)
.cornerRadius(20)
.padding(.horizontal, 10)
.padding(.vertical, 2)
.shadow(radius: 4)
.scaleEffect(configuration.isPressed ? 1.2 : 1)
.animation(.easeInOut(duration: 0.2), value: configuration.isPressed)
}
}
var body: some View {
VStack{
Button(action: {
presentationMode.wrappedValue.dismiss()
}){
HStack {
Image(systemName: icon)
.imageScale(.large)
Text(text)
.fontWeight(.semibold)
.font(.title)
}
}
.buttonStyle(CustomButtonStyle())
}
.font(.largeTitle)
}
}
struct TestDetailView: View {
@State var offset: CGSize = .zero
@Binding var showDetailInner : Bool
@State var isText = false
@State var offsetN: CGSize = .zero
@State var indexText: Int = 0
@Namespace var shapeTransition1
@Namespace var shapeTransition2
@Namespace var shapeTransition3
@Namespace var shapeTransition4
@Namespace var shapeTransitionD
let menuImages = ["house", "paperplane", "heart", "person.2"]
@Environment(\.presentationMode) var presentationMode
func getScaleN() -> CGFloat {
let width = UIScreen.main.bounds.width / 2
let offsetX = abs(offsetN.width)
let percentage = offsetX / width
return 1.0 - min(0.5, percentage)
}
var body: some View {
ZStack {
if isText {
// Rounded Rectangle
VStack(alignment: .center){
Image("applelogo").frame(minWidth: 0, maxWidth: .infinity,minHeight: 0,maxHeight: 400)
.background(.green)
.shadow(radius: 5)
.matchedGeometryEffect(id: "circle1\(indexText)", in: shapeTransition2,isSource: isText)
VStack(alignment: .leading){
Text("Queezy App")
.foregroundColor(Color(red: 50 / 255, green: 50 / 255, blue: 50 / 255))
.fontWeight(.bold)
.matchedGeometryEffect(id: "circle2\(indexText)", in: shapeTransition3,isSource: isText)
Text("1888 rmb")
.foregroundColor(.gray)
.padding(.top,1)
.matchedGeometryEffect(id: "circle3\(indexText)", in: shapeTransition4,isSource: isText)
}
Text("\(indexText)")
.fontWeight(.bold)
.padding()
.background(Color.white)
.cornerRadius(80)
.foregroundColor(.gray)
.clipShape(Circle())
.overlay(Circle().stroke(Color.gray, lineWidth: 3))
.matchedGeometryEffect(id: "circleD\(indexText)", in: shapeTransitionD,isSource: isText)
Text("1\(indexText)")
.fontWeight(.bold)
.padding()
.background(Color.white)
.foregroundColor(.black)
.clipShape(Circle())
.overlay(Circle().stroke(Color.black, lineWidth: 3))
.matchedGeometryEffect(id: "circle4\(indexText)", in: shapeTransition1,isSource: isText)
Spacer()
}.onTapGesture {
withAnimation(.easeInOut){
isText.toggle()
}
}.zIndex(10).background(Color.white.opacity(0.4))
.scaleEffect(getScaleN())
.offset(x: self.offsetN.width > 0 ? self.offsetN.width :0)
.gesture(DragGesture()
.onChanged{ value in
withAnimation(.spring()) {
offsetN = value.translation
if(offsetN.width > 180){
isText.toggle()
}else{
offsetN = .zero
}
}
}
.onEnded { value in
withAnimation(.spring()) {
offsetN = .zero
isText = false
}
}
)
}else{
VStack{
ForEach(menuImages.indices,id:\.self){ index in
HStack(alignment: .center){
Text("\(index)")
.fontWeight(.bold)
.padding()
.background(Color.white)
.foregroundColor(.black)
.clipShape(Circle())
.overlay(Circle().stroke(Color.black, lineWidth: 3))
.matchedGeometryEffect(id: "circle2\(index)", in: shapeTransition1,isSource: !isText)
HStack(alignment: .center){
Image("applelogo").resizable().frame(width: 80, height: 80)
.background(.green)
.clipShape(Circle())
.overlay(Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 5)
.matchedGeometryEffect(id: "circle1\(index)", in: shapeTransition2)
VStack(alignment: .leading){
Text("Queezy App")
.foregroundColor(Color(red: 50 / 255, green: 50 / 255, blue: 50 / 255))
.fontWeight(.bold)
.matchedGeometryEffect(id: "circle3\(index)", in: shapeTransition3,isSource: !isText)
Text("1888 rmb")
.foregroundColor(.gray)
.padding(.top,1)
.matchedGeometryEffect(id: "circle4\(index)", in: shapeTransition4,isSource: !isText)
}
}.frame(width: 240)
HStack{
Text("1\(index)")
.fontWeight(.bold)
.padding()
.background(Color.white)
.cornerRadius(80)
.foregroundColor(.gray)
.clipShape(Circle())
.overlay(Circle().stroke(Color.gray, lineWidth: 3))
.matchedGeometryEffect(id: "circleD\(index)", in: shapeTransitionD,isSource: !isText)
}.padding(.leading,10).padding(.top,4)
}.onTapGesture {
withAnimation(.easeInOut){
isText.toggle()
indexText = index
}
}
}
}
}
}
}
}