جزء جزئیات مکان

جزء Place Details در Places UI Kit به شما امکان می دهد یک مؤلفه UI جداگانه اضافه کنید که جزئیات مکان را در برنامه شما نمایش می دهد.

PlaceDetailsCompactView جزئیات یک مکان انتخاب شده را با استفاده از حداقل فضا ارائه می دهد. این ممکن است در یک پنجره اطلاعاتی که مکان را روی نقشه برجسته می‌کند، در یک تجربه رسانه‌های اجتماعی مانند اشتراک‌گذاری یک مکان در چت، به عنوان پیشنهادی برای انتخاب مکان فعلی‌تان، یا در یک مقاله رسانه‌ای برای ارجاع به مکان در Google Maps مفید باشد. PlaceDetailsCompactView می تواند نام، آدرس، رتبه بندی، نوع، قیمت، نماد دسترسی، وضعیت باز و یک عکس را نمایش دهد.

مولفه Place Details را می توان به طور مستقل یا همراه با سایر APIها و سرویس های پلتفرم Google Maps استفاده کرد. مؤلفه یا شناسه مکان یا مختصات طول و عرض جغرافیایی را می گیرد و اطلاعات جزئیات مکان ارائه شده را برمی گرداند.

مولفه Place Details نمای فشرده ای را ارائه می دهد که می تواند به صورت افقی یا عمودی نمایش داده شود.

محتوا و سبک بصری مؤلفه جزئیات مکان را می توان برای مطابقت با موارد استفاده و دستورالعمل های برند بصری پیکربندی کرد. شما می توانید ظاهر جزئیات مکان را با ارائه مقادیر سفارشی PlacesMaterialTheme سفارشی کنید. همچنین می‌توانید با تعیین فهرستی از ورودی‌های PlaceDetailsCompactView ، که هر کدام مربوط به بخشی از اطلاعات نشان‌داده‌شده درباره مکان است، فیلدهای جزئیات مکان را سفارشی کنید.

صورتحساب

هنگام استفاده از Place Details UI Kit، برای هر بار فراخوانی متد PlaceDetailsQuery صورتحساب دریافت می کنید. اگر یک مکان را چندین بار بارگیری کنید، برای هر درخواست صورتحساب دریافت می کنید.

جزئیات مکان را به برنامه خود اضافه کنید

جزء جزئیات مکان یک نمای رابط کاربری Swift است. می توانید ظاهر و احساس اطلاعات جزئیات مکان را مطابق با نیازهای خود و مطابقت با ظاهر برنامه خود سفارشی کنید.

می توانید جهت (افقی یا عمودی)، لغو تم و محتوا را مشخص کنید. گزینه های محتوا عبارتند از رسانه، آدرس، رتبه بندی، قیمت، نوع، ورودی قابل دسترسی، پیوند نقشه ها و پیوند مسیرها. درباره سفارشی سازی بیشتر بیاموزید .

موقعیت پیش فرض عمودی است. اگر می خواهید یک طرح افقی داشته باشید، orientation: .horizontal در PlaceDetailsCompactView .

این نمونه یک نمای فشرده با طرح عمودی ایجاد می کند.

سویفت

      
  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  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()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .openNowStatus()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

  

این نمونه یک نمای فشرده با طرح افقی ایجاد می کند.

سویفت

  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  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()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

جزئیات مکان را سفارشی کنید

کیت UI Places یک رویکرد سیستم طراحی را برای سفارشی‌سازی بصری تقریباً بر اساس طراحی متریال (با برخی تغییرات خاص Google-Maps) ارائه می‌کند. به مرجع طراحی متریال برای رنگ و تایپوگرافی مراجعه کنید. به طور پیش فرض، این سبک به زبان طراحی بصری Google Maps پایبند است.

مهم: هنگام ایجاد تغییرات بصری، باید از الزامات اسناد Google Maps پیروی کنید.

شما می توانید سبک های زیر را سفارشی کنید:

عرض و ارتفاع

برای نماهای عمودی، عرض توصیه شده بین 180 پیکسل تا 300 پیکسل است. برای نماهای افقی، عرض پیشنهادی بین 180 تا 500 پیکسل است.

بهترین تمرین این است که ارتفاع را تعیین نکنید. این به محتوای پنجره اجازه می دهد تا ارتفاع را تنظیم کند و اجازه می دهد تمام اطلاعات نمایش داده شوند.

توجه: تصویر کوچک مکان برای نماهایی با عرض کمتر از 350 پیکسل ظاهر نمی شود.

رنگهای انتساب

شرایط خدمات Google Maps از شما می‌خواهد که از یکی از سه رنگ مارک برای انتساب Google Maps استفاده کنید. وقتی تغییرات سفارشی‌سازی انجام می‌شود، این انتساب باید قابل مشاهده و قابل دسترسی باشد.

ما 3 رنگ مارک را برای انتخاب ارائه می دهیم که می توانند به طور مستقل برای تم های روشن و تاریک تنظیم شوند:

• موضوع روشن: attributionColorLight با فهرست برای سفید، خاکستری و سیاه.
• طرح زمینه تیره: attributionColorDark با فهرست برای سفید، خاکستری و سیاه.

نمونه سفارشی سازی

توجه: اگر سفارشی سازی بصری را مشخص نکنید، مقدار پیش فرض را حفظ می کند.

این نمونه نحوه سفارشی کردن ویژگی های سبک پیش فرض را نشان می دهد.

سویفت

  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var theme: PlacesMaterialTheme {
      var theme = PlacesMaterialTheme()
      theme.colorSurface = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorPrimary = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorNegative = (colorScheme == .dark ? .white : .black)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.bodySmall = .system(size: 11)
      theme.bodyMedium = .system(size: 12)
      theme.labelLarge = .system(size: 13)
      theme.headlineMedium = .system(size: 14)
      theme.attributionColorLightTheme = .black
      theme.attributionColorDarkTheme = .white
      return theme
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }