הרכיב Place Search

רכיב חיפוש המקומות בערכת ה-UI של Places מעבד את תוצאות החיפוש של מקום מסוים ברשימה.

אפשר להתאים אישית את רשימת החיפוש של מקומות. אפשר לציין:

התוכן שיוצג
גודל המדיה בכיוון אנכי
קטיעת הטקסט
הכיוון
החלפת העיצובים שמתאימים למותג ולשפת העיצוב של האפליקציה
המיקום של השיוך
האם אפשר לבחור מקום

אפשר גם להתאים אישית את הבקשה כדי לבצע Search by text request או Search Nearby request.

חיוב

החיוב מתבצע בכל פעם שמשנים את ערך הקישור SearchByTextRequest() או PlaceSearchViewRequest().

הוספת חיפוש מקומות לאפליקציה

מוסיפים את הווידג'ט של חיפוש מקומות באמצעות הסמל PlaceSearchView class.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

כדי שהאפליקציה תטען תוצאה של חיפוש טקסט או חיפוש בקרבת מקום, צריך לעדכן את הערך של PlaceSearchViewRequest.

Swift

// use placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request

  @State private var let placeSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )

אפשר גם לקבל קריאות חוזרות (callback) כשהרכיב נטען, כשבוחרים מקום או כשיש שגיאה בטעינת הרכיב.

Swift

.onLoad { places in
  print("places: \(places)")
}
.onRequestError { error in
  print("error: \(error)")
}
.onPlaceSelected { place in
  print("place: \(place)")
}

התאמה אישית של רכיב חיפוש המקומות

התאמה אישית של תוכן

אתם צריכים לציין איזה תוכן יוצג ברכיב.

בדוגמה הזו מוגדר הרכיב כך שיציג את הכתובת והדירוג של המקום.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating()]
)

אפשר גם להתאים אישית את ההיבטים הבאים של התוכן שמופיע ברכיב 'חיפוש מקומות':

‫content: התוכן שמוצג ברכיב.
‫mediaSize: גודל התמונה בכיוון האנכי של הפריט. ברירת המחדל היא small. כפי שמצוין בתוכן.
‫preferTruncation: האם לחתוך את הטקסט של כל תצוגת פרטי מקום. ברירת המחדל היא false.
‫theme: העיצוב המותאם אישית שלכם שמוגדר על בסיס PlacesMaterialTheme. מידע נוסף על עיצובים
‫attributionPosition: האם להציג את הקרדיט של מפות Google בחלק העליון או התחתון של הרכיב. ברירת המחדל היא ‎ .top‎.
‫selectable: האם אפשר לבחור כל מקום ברשימה. אם אפשר לבחור אותו, הפונקציה onPlaceSelected closure תופעל אחרי שייבחר מקום. ברירת המחדל היא false.

מוסיפים את הגדרות ההתאמה האישית ל-PlaceSearchConfiguration.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address, .rating, .media(size: .large)],
    preferTruncation: true, // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom, // default is top
    selectable: true // default is false
)

התאמה אישית של הכיוון

כיוון ברירת המחדל הוא לאורך. אפשר לציין כיוון אופקי ב-PlaceSearchView.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

התאמה אישית של העיצוב

אתם יכולים לציין עיצוב שיבטל את כל מאפייני הסגנון שמוגדרים כברירת מחדל. ברירת המחדל היא PlacesMaterialTheme. מידע נוסף על עיצוב ערכות נושא זמין במסמכי התיעוד של הרכיב Place Details.

Swift

@Environment(\.colorScheme) var colorScheme
var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      color.outlineDecorative = (colorScheme == .dark ? .white : .black)
      color.onSurface = (colorScheme == .dark ? .yellow : .red)
      color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
      color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
      color.positive = (colorScheme == .dark ? .yellow : .red)
      color.primary = (colorScheme == .dark ? .yellow : .purple)
      color.info = (colorScheme == .dark ? .yellow : .purple)
      var shape = PlacesMaterialShape()
      shape.cornerRadius = 10
      var font = PlacesMaterialFont()
      font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
      font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
      font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
      var attribution = PlacesMaterialAttribution()
      attribution.lightModeColor = .black
      attribution.darkModeColor = .white
      theme.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
}

דוגמה

Swift

struct PlaceSearchDemoView: View {
  private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating(), .type(), .media(size: .large)],
    preferTruncation: true,  // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom,  // default is top
    selectable: true  // default is false
  )
  // can also do let placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request
  @State private var placeSearchViewRequest: PlaceSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
  var body: some View {
    PlaceSearchView(
      orientation: .horizontal,  // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
    )
    .onLoad { places in
      print("places: \(places)")
    }
    .onRequestError { error in
      print("error: \(error)")
    }
    .onPlaceSelected { place in
      print("place: \(place)")
    }
  }
}