Komponen Place Search

Komponen Place Search pada Places UI Kit merender hasil penelusuran tempat dalam daftar.

Komponen Penelusuran Tempat Places UI Kit

Anda dapat menyesuaikan daftar Penelusuran Tempat. Anda dapat menentukan:

Konten yang akan ditampilkan
Ukuran media dalam orientasi vertikal
Pemotongan teks
Orientasi
Penggantian tema yang sesuai dengan brand dan bahasa desain aplikasi Anda
Posisi atribusi
Apakah suatu tempat dapat dipilih

Anda juga dapat menyesuaikan permintaan untuk melakukan SearchByTextRequest atau SearchNearbyRequest.

Penagihan

Anda ditagih setiap kali nilai binding SearchByTextRequest() atau PlaceSearchViewRequest() diubah.

Menambahkan Penelusuran Tempat ke aplikasi Anda

Tambahkan widget Place Search menggunakan PlaceSearchView class.

Swift

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

Saat Anda ingin aplikasi memuat hasil penelusuran teks atau penelusuran terdekat, perbarui nilai PlaceSearchViewRequest Anda.

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
      )
    )
  )

Anda juga dapat secara opsional menerima callback saat komponen dimuat, tempat dipilih, atau saat terjadi error saat memuat komponen.

Swift

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

Menyesuaikan komponen Place Search

Menyesuaikan konten

Anda harus menentukan konten yang akan ditampilkan komponen Anda.

Contoh ini mengonfigurasi komponen untuk menampilkan alamat dan rating Tempat.

Swift

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

Anda juga dapat menyesuaikan aspek berikut dari konten yang muncul di komponen Penelusuran Tempat:

content: Konten yang ditampilkan dalam komponen.
mediaSize: Ukuran foto dalam orientasi vertikal fragmen. Defaultnya adalah kecil. Ditentukan dalam konten.
preferTruncation: Apakah akan memangkas teks setiap tampilan Detail Tempat. Default-nya adalah salah.
theme: Tema kustom Anda yang diwarisi dari PlacesMaterialTheme. Pelajari lebih lanjut tema.
attributionPosition: Apakah atribusi Google Maps akan ditampilkan di bagian atas atau bawah komponen. Defaultnya adalah .top.
selectable: Apakah setiap tempat dalam daftar dapat dipilih. Jika dapat dipilih, penutupan onPlaceSelected akan dipanggil setelah tempat dipilih. Default-nya adalah salah.

Tambahkan konfigurasi penyesuaian Anda ke 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
)

Menyesuaikan orientasi

Orientasi default adalah vertikal. Anda dapat menentukan orientasi horizontal di PlaceSearchView.

Swift

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

Menyesuaikan tema

Anda dapat menentukan tema yang menggantikan atribut gaya default. Defaultnya adalah PlacesMaterialTheme.

Lihat bagian Gaya kustom untuk mengetahui informasi selengkapnya tentang penerapan tema.

Places UI Kit menyediakan tema gelap secara default, jadi Anda mungkin perlu menyesuaikan tema gelap dan terang. Untuk menyesuaikan tema gelap, tambahkan nilai untuk .dark dan attribution.darkModeColor ke tema kustom Anda.

Contoh

Menambahkan komponen Penelusuran Tempat

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)")
    }
  }
}

Menyesuaikan tema

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()
    }
}