1. 程式人生 > >城市選擇、定位、搜尋及右側字母導航,類似美團 百度糯米 餓了麼等 APP 選擇城市功能

城市選擇、定位、搜尋及右側字母導航,類似美團 百度糯米 餓了麼等 APP 選擇城市功能

CityPicker

專案地址:zaaach/CityPicker 

簡介:城市選擇、定位、搜尋及右側字母導航,類似美團 百度糯米 餓了麼等 APP 選擇城市功能

更多:作者   提 Bug   

標籤:

 

Platform

現在使用較多的類似美團、外賣等 APP 的城市選擇介面,一行程式碼搞定,就是這麼簡單粗暴!!!

Tips:(舊版本 1.x)會報高德定位 jar 包衝突,推薦使用 2.x 版本。

主要功能:

  • 字母懸浮欄
  • 指定熱門城市
  • 自定義動畫效果
  • 自定義主題
  • 名稱或拼音搜尋
  • 返回城市名、code 等資料
  • 提供定位介面,解耦定位 SDK

Preview

image image image

APK

下載demo.apk體驗.

Download

Gradle:

dependencies {
    implementation 'com.zaaach:citypicker:2.0.3'    //必選
    implementation 'com.android.support:recyclerview-v7:27.1.1'    //必選
}

or Maven:

<dependency>
  <groupId>com.zaaach</groupId>
  <artifactId>citypicker</artifactId>
  <version>2.0.3</version>
  <type>pom</type>
</dependency>

or 下載 library 手動匯入.

Usage

CityPicker 基於DialogFragment 實現,已提供定位介面,需要 APP 自身實現定位。

基本使用:

Step1:

manifest.xml中給使用CityPicker 的activity新增主題android:theme="@style/DefaultCityPickerTheme"

<activity android:name=".MainActivity" android:theme="@style/DefaultCityPickerTheme">
  ......
</activity>

Step2:

注意:熱門城市使用HotCity ,定位城市使用LocatedCity

List<HotCity> hotCities = new ArrayList<>();
hotCities.add(new HotCity("北京", "北京", "101010100")); //code 為城市程式碼
hotCities.add(new HotCity("上海", "上海", "101020100"));
hotCities.add(new HotCity("廣州", "廣東", "101280101"));
hotCities.add(new HotCity("深圳", "廣東", "101280601"));
hotCities.add(new HotCity("杭州", "浙江", "101210101"));
......

CityPicker.from(activity) //activity 或者 fragment
  .enableAnimation(true)    //啟用動畫效果,預設無
  .setAnimationStyle(anim)    //自定義動畫
  .setLocatedCity(new LocatedCity("杭州", "浙江", "101210101")))  //APP 自身已定位的城市,傳 null 會自動定位(預設)
  .setHotCities(hotCities)    //指定熱門城市
  .setOnPickListener(new OnPickListener() {
    @Override
    public void onPick(int position, City data) {
      Toast.makeText(getApplicationContext(), data.getName(), Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onCancel(){
      Toast.makeText(getApplicationContext(), "取消選擇", Toast.LENGTH_SHORT).show();     
    }

    @Override
    public void onLocate() {
      //定位介面,需要 APP 自身實現,這裡模擬一下定位
      new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
          //定位完成之後更新資料
          CityPicker.getInstance()
            .locateComplete(new LocatedCity("深圳", "廣東", "101280601"), LocateState.SUCCESS);
        }
      }, 3000);
    }
  })
  .show();

關於自定義主題:

style.xml 中自定義主題並且繼承DefaultCityPickerTheme ,別忘了在manifest.xml 設定給activity

<style name="CustomTheme" parent="DefaultCityPickerTheme">
        <item name="cpCancelTextColor">@color/color_green</item>
        <item name="cpSearchCursorDrawable">@color/color_green</item>
        <item name="cpIndexBarNormalTextColor">@color/color_green</item>
        <item name="cpIndexBarSelectedTextColor">@color/color_green</item>
        <item name="cpSectionHeight">@dimen/custom_section_height</item>
        <item name="cpOverlayBackground">@color/color_green</item>
          ......
</style>

CityPicker 中自定義的所有屬性如下,有些屬性值必須是引用型別refrence,使用時注意。

<resources>
    <attr name="cpCancelTextSize" format="dimension|reference" />
    <attr name="cpCancelTextColor" format="color|reference" />

    <attr name="cpClearTextIcon" format="reference" />
    <attr name="cpSearchTextSize" format="dimension|reference" />
    <attr name="cpSearchTextColor" format="color|reference" />
    <attr name="cpSearchHintText" format="string|reference" />
    <attr name="cpSearchHintTextColor" format="color|reference" />
    <attr name="cpSearchCursorDrawable" format="reference" />

    <attr name="cpListItemTextSize" format="dimension|reference" />
    <attr name="cpListItemTextColor" format="color|reference" />
    <attr name="cpListItemHeight" format="dimension|reference"/>

    <attr name="cpEmptyIcon" format="reference"/>
    <attr name="cpEmptyIconWidth" format="dimension|reference"/>
    <attr name="cpEmptyIconHeight" format="dimension|reference"/>
    <attr name="cpEmptyText" format="string|reference"/>
    <attr name="cpEmptyTextSize" format="dimension|reference"/>
    <attr name="cpEmptyTextColor" format="color|reference"/>

    <attr name="cpGridItemBackground" format="color|reference"/>
    <attr name="cpGridItemSpace" format="reference"/>
    <!--懸浮欄-->
    <attr name="cpSectionHeight" format="reference"/>
    <attr name="cpSectionTextSize" format="reference" />
    <attr name="cpSectionTextColor" format="reference" />
    <attr name="cpSectionBackground" format="reference" />

    <attr name="cpIndexBarTextSize" format="reference" />
    <attr name="cpIndexBarNormalTextColor" format="reference" />
    <attr name="cpIndexBarSelectedTextColor" format="reference" />
    <!--特寫佈局-->
    <attr name="cpOverlayWidth" format="dimension|reference"/>
    <attr name="cpOverlayHeight" format="dimension|reference"/>
    <attr name="cpOverlayTextSize" format="dimension|reference"/>
    <attr name="cpOverlayTextColor" format="color|reference"/>
    <attr name="cpOverlayBackground" format="color|reference"/>
</resources>

OK,enjoy it~

Changelog

v2.0.3

  • 修復狀態列變黑問題
  • 修復字母索引欄被軟遮擋的問題
  • 新增取消選擇監聽
  • 方法呼叫方式稍微改變

v2.0.2

  • 修復定位城市偶爾不重新整理的 bug

v2.0.1

  • 新增定位介面
  • 修改返回型別為City ,可獲取城市名、code 等資料

v2.0.0

  • 專案重構優化,結構更清晰
  • 使用 RecyclerView