پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

کامپوننت جستجوی مکان

کامپوننت جستجوی مکان از کیت رابط کاربری Places، نتایج جستجوی مکان را در یک لیست نمایش می‌دهد.

کیت رابط کاربری مکان‌ها، کامپوننت جستجوی مکان

شما می‌توانید لیست جستجوی مکان را سفارشی کنید. می‌توانید موارد زیر را مشخص کنید:

  • محتوایی که قرار است نمایش داده شود
  • اندازه رسانه در جهت عمودی
  • کوتاه‌سازی متن
  • جهت گیری
  • لغو تم که با برند و زبان طراحی برنامه شما مطابقت دارد
  • جایگاه انتساب
  • اینکه آیا یک مکان قابل انتخاب است یا خیر

همچنین می‌توانید درخواست را طوری تنظیم کنید که یا SearchByTextRequest یا SearchNearbyRequest را اجرا کند.

صورتحساب

هر بار که مقدار اتصال configureFromSearchByTextRequest() یا configureFromSearchNearbyRequest() تغییر کند، هزینه‌ای از شما دریافت می‌شود.

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

با اضافه کردن قطعه PlaceSearchFragment به طرح‌بندی خود، از ویجت Place Search استفاده کنید.

وقتی می‌خواهید برنامه‌تان یک جستجوی متنی یا نتیجه جستجوی نزدیک را بارگذاری کند، تابع configureFromSearchByTextRequest() یا configureFromSearchNearbyRequest() را همراه با درخواست فراخوانی کنید.

کاتلین

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

جاوا

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search
    

همچنین می‌توانید یک PlaceSearchFragmentListener اختیاری به کامپوننت اضافه کنید تا هنگام بارگذاری کامپوننت، انتخاب یک مکان (در صورت تنظیم شدن برای انتخاب) یا هنگام بروز خطا در بارگذاری کامپوننت، فراخوانی‌های برگشتی را دریافت کند.

کاتلین

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)
  

جاوا

fragment.registerListener(
  new PlaceSearchFragmentListener() {
    @Override public void onLoad(List<? extends Place> places) {...}
    @Override public void onRequestError(Exception e) {...}
    @Override public void onPlaceSelected(Place place) {...}
  }
)
    

سفارشی‌سازی کامپوننت جستجوی مکان

سفارشی سازی محتوا

شما باید مشخص کنید که کامپوننت شما کدام محتوا را نمایش خواهد داد.

این مثال، کامپوننت را برای نمایش آدرس و امتیاز مکان پیکربندی می‌کند.

کاتلین

val fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS, Content.RATING))
    

جاوا

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS,Content.RATING));
    

همچنین می‌توانید به صورت اختیاری جنبه‌های زیر از محتوایی که در کامپوننت جستجوی مکان شما نمایش داده می‌شود را سفارشی کنید:

  • PlaceSearchFragment.Content : محتوایی که در کامپوننت نمایش داده می‌شود.
  • mediaSize : اندازه عکس در جهت عمودی قطعه. مقدار پیش‌فرض SMALL است.
  • preferTruncation : آیا متن هر نمای جزئیات مکان کوتاه شود یا خیر.
  • attributionPosition : مشخص می‌کند که آیا آدرس گوگل مپ در بالا یا پایین کامپوننت نمایش داده شود یا خیر.
  • selectable : مشخص می‌کند که آیا هر مکان در لیست قابل انتخاب است یا خیر.

پیکربندی سفارشی‌سازی خود را به PlaceSearchFragment اضافه کنید.

کاتلین

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true
    

جاوا

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)
    

جهت گیری را سفارشی کنید

جهت پیش‌فرض عمودی است. برای جهت افقی، در PlaceSearchFragment.newInstance() مقدار Orientation.HORIZONTAL را وارد کنید.

کاتلین

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)
    

جاوا

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)
      

سفارشی کردن تم

هنگام نمونه‌سازی یک فرگمنت، می‌توانید تمی را مشخص کنید که هر یک از ویژگی‌های پیش‌فرض استایل را لغو کند. می‌توانید رنگ‌ها، تایپوگرافی، فاصله‌گذاری، حاشیه‌ها و گوشه‌های کامپوننت Place Details خود را سفارشی کنید. پیش‌فرض PlacesMaterialTheme است.

هر ویژگی قالب که بازنویسی نشده باشد، از استایل‌های پیش‌فرض استفاده می‌کند.

کیت رابط کاربری Places به طور پیش‌فرض یک تم تیره ارائه می‌دهد، بنابراین ممکن است لازم باشد هر دو تم تیره و روشن را سفارشی کنید. برای سفارشی‌سازی تم تیره، یک ورودی برای رنگ در values-night/colors.xml اضافه کنید.

برای اطلاعات بیشتر در مورد تم‌بندی، به بخش استایل‌بندی سفارشی مراجعه کنید.

مثال‌ها

نمونه‌سازی کامپوننت جستجوی مکان

کاتلین

val fragment: PlaceSearchFragment =
PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT)

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

supportFragmentManager
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow()

fragment.configureFromSearchByTextRequest(searchByTextRequest)
    

جاوا

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT);

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

fragment.registerListener(
  new PlaceSearchFragmentListener() {
      @Override public void onLoad(List<? extends Place> places) {...}
      @Override public void onRequestError(Exception e) {...}
      @Override public void onPlaceSelected(Place place) {...}
  }
)

getSupportFragmentManager()
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow();

fragment.configureFromSearchByTextRequest(searchByTextRequest)
    

سفارشی کردن تم

کیت رابط کاربری Places به طور پیش‌فرض یک تم تیره ارائه می‌دهد، بنابراین ممکن است لازم باشد هر دو تم تیره و روشن را سفارشی کنید. برای سفارشی‌سازی تم تیره، یک ورودی برای رنگ در values-night/colors.xml اضافه کنید.

 <style name="CustomizedTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
    <item name="placesCornerRadius">20dp</item>
  </style>