自定義一個仿拼多多地址選擇器

cy不想說話發表於2019-04-19

前言

公司正在開發一個商城專案，因為專案需要，做了一個仿拼多多的地址選擇器，但是與拼多多實現方法有些出入，大體效果是差不多的。廢話不多說，先上一張效果動圖：

開始

先說說本文的一些概念。地區級別：就是比如省級，市級，縣級，鎮級，那麼這種最多就是4級。
好了，我們分析一波效果圖，當一個級別的地區選擇好之後會建立出一個新的Tab，到了最後一個地區級別之後就不會再建立新的。如果倒回去重新選擇一個級別的地區，會移除後面的Tab之後再建立一個新的Tab。選擇好之後，如果點選Tab會切換到相應地區級別，並且滾動到之前選擇的地區顯示，建立新的Tab就預設滾動到第一個position的位置。
其次，來看看我們這個介面的佈局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="560dp"
   android:orientation="vertical"
   android:paddingStart="12dp"
   android:paddingEnd="12dp">
   <!-- Dialog的標題 -->
   <TextView
       android:id="@+id/user_tv_dialog_title"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="18dp"
       android:layout_gravity="center_horizontal"/>
   <!-- 標題下的第一條橫線 -->
   <View
       android:layout_width="match_parent"
       android:layout_height="1dp"
       android:background="#e6e6e6"
       android:layout_marginTop="17dp"/>
   <!-- 頂部的TabLayout -->
   <android.support.design.widget.TabLayout
       android:id="@+id/user_tb_dialog_tab"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabSelectedTextColor="@color/colorPrimary"
       app:tabGravity="fill"
       app:tabMode="scrollable"/>
   <!-- TabLayout下方的橫線 -->
   <View
       android:layout_width="match_parent"
       android:layout_height="1dp"
       android:background="#e6e6e6"/>
   <!-- 顯示地區資料的RecyclerView -->
   <android.support.v7.widget.RecyclerView
       android:id="@+id/user_rv_dialog_list"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"/>
</LinearLayout>
複製程式碼

從佈局中我們可以看出，我最主要靠TabLayout加RecyclerView實現這個效果，而拼多多個人猜測是TabLayout加RecyclerView加ViewPager，所以拼多多的RecyclerView是可以側滑到上一個Tab頁或下一個，這也就是和拼多多效果的不同之處。

開始擼程式碼

從程式碼下手，首先把單個地區列表的佈局寫好：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    tools:ignore="UseCompoundDrawables">
    <!-- 顯示地區名稱 -->
    <TextView
        android:id="@+id/user_tv_address_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <!-- 顯示後面的勾選圖示 -->
    <ImageView
        android:id="@+id/user_iv_address_dialog"
        android:layout_width="13dp"
        android:layout_height="9dp"
        android:src="@drawable/user_icon_address_check"
        android:layout_marginStart="11dp"
        android:layout_gravity="center_vertical"
        android:visibility="gone"
        tools:ignore="ContentDescription" />
</LinearLayout>
複製程式碼

把地區這個實體物件建立好：

public class AddressItem {
    // 地區名
    private String address;
    // 是否勾選
    private boolean isChecked;
    // 地區的ID，我這邊專案需要的是int型，大家可以根據自己專案需要進行修改
    private int id;

    public String getAddress() {
        return this.address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public boolean isChecked() {
        return this.isChecked;
    }

    public void setChecked(boolean checked) {
        this.isChecked = checked;
    }

    public int getId() {
        return this.id;
    }

    public void setId(int id) {
        this.id = id;
    }

    @Override
    public String toString() {
        return "AddressItem{" +
                "address='" + address + '\'' +
                ", isChecked=" + isChecked +
                ", id=" + id +
                '}';
    }
}
複製程式碼

把RecyclerView的介面卡寫好：

public class AddressAdapter extends RecyclerView.Adapter<AddressAdapter.MyViewHolder> {
    // 儲存地區資料的列表
    private List<AddressItem> list = new ArrayList<>();
    // 自定義的單項被點選監聽事件
    private ItemClickListener listener;

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.user_item_address_bottom_sheet_dialog, viewGroup, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder myViewHolder, int i) {
        AddressItem item = list.get(i);
        if (item.isChecked()) {
            myViewHolder.tvAddress.setText(item.getAddress());
            myViewHolder.tvAddress.setTextColor(Color.parseColor("#1F83FF"));
            myViewHolder.ivChecked.setVisibility(View.VISIBLE);
        } else {
            myViewHolder.tvAddress.setText(item.getAddress());
            myViewHolder.tvAddress.setTextColor(Color.BLACK);
            myViewHolder.ivChecked.setVisibility(View.GONE);
        }
    }

    @Override
    public int getItemCount() {
        return this.list == null ? 0 : list.size();
    }

    public void setList(List<AddressItem> list) {
        if (this.list != null && list != null) {
            this.list.clear();
            this.list.addAll(list);
            this.notifyDataSetChanged();
        }
    }

    public void setOnItemClickListener(@NonNull ItemClickListener listener) {
        this.listener = listener;
    }

    class MyViewHolder extends RecyclerView.ViewHolder {
        TextView tvAddress;
        ImageView ivChecked;
        MyViewHolder(@NonNull View itemView) {
            super(itemView);
            tvAddress = itemView.findViewById(R.id.user_tv_address_dialog);
            ivChecked = itemView.findViewById(R.id.user_iv_address_dialog);
            if (listener != null) {
                itemView.setOnClickListener(v -> listener.onItemClick(getAdapterPosition()));
            }
        }
    }

    public interface ItemClickListener {
        void onItemClick(int position);
    }
}
複製程式碼

首先自己動手寫了兩個BaseDialog，沒什麼營養，程式碼也很簡單：

public abstract class CustomBaseDialog extends Dialog {

    protected Context context;

    public CustomBaseDialog(@NonNull Context context) {
        super(context);
        this.context = context;
    }

    protected abstract Integer getLayout();
    protected abstract Integer getGravity();
    protected abstract Integer getBackgroundRes();
    protected abstract Integer getWindowAnimations();
    protected abstract void initView();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getLayout() != null)
            setContentView(getLayout());
        Window window = getWindow();
        if (window != null) {
            // 去除DecorView預設的內邊距，好讓佈局佔滿整個橫向螢幕
            View decorView = window.getDecorView();
            decorView.setPadding(0,0,0,0);
            if (getGravity() != null)
                window.setGravity(getGravity());
            else
                window.setGravity(Gravity.CENTER);
            if (getWindowAnimations() != null)
                window.setWindowAnimations(getWindowAnimations());
            if (getBackgroundRes() != null)
                decorView.setBackgroundResource(getBackgroundRes());
        }
        initView();
    }

    protected void setClickListener(int id, View.OnClickListener listener) {
        findViewById(id).setOnClickListener(listener);
    }
}

public abstract class CustomBaseBottomSheetDialog extends CustomBaseDialog {
    public CustomBaseBottomSheetDialog(@NonNull Context context) {
        super(context);
    }

    @Override
    protected Integer getGravity() {
        return Gravity.BOTTOM;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Window window = getWindow();
        if (null != window) {
            // 去除window的margin，目的也是為了讓佈局佔滿螢幕
            WindowManager.LayoutParams layoutParams = window.getAttributes();
            layoutParams.width = WindowManager.LayoutParams.MATCH_PARENT;
            layoutParams.horizontalMargin = 0;
            window.setAttributes(layoutParams);
        }
    }
}
複製程式碼

接著才是重點，自定義地址選擇器Dialog：

public class AddressBottomSheetDialog extends CustomBaseBottomSheetDialog {

    private TabLayout tabLayout;
    private AddressAdapter addressAdapter;

    private int maxLevel;   // 最大有多少級的地區，可以通過setMaxLevel方法進行自定義
    private SparseArray<List<AddressItem>> levelList;     // 級別列表資料
    private SparseIntArray levelPosition;                 // 各個級別選中的列表position
    private SparseIntArray levelIds;                      // 各個級別選擇的地址ID
    private String title;  // 標題
    private String tabText = "請選擇";                    // 新的Tab預設顯示的文字
    private TabSelectChangeListener changeListener;       // Tab的選擇被改變的監聽

    public AddressBottomSheetDialog(@NonNull Context context) {
        super(context);
    }

    @Override
    protected Integer getLayout() {
        return R.layout.user_layout_address_bottom_sheet_dialog;
    }

    @Override
    protected Integer getBackgroundRes() {
        return R.drawable.bg_dialog_bottom;
    }

    @Override
    protected Integer getWindowAnimations() {
        return R.style.DialogBottom;
    }

    @Override
    protected void initView() {
        levelList = new SparseArray<>();
        levelPosition = new SparseIntArray();
        levelIds = new SparseIntArray();

        ((TextView)findViewById(R.id.user_tv_dialog_title)).setText(title);
        tabLayout = findViewById(R.id.user_tb_dialog_tab);
        final RecyclerView recyclerView = findViewById(R.id.user_rv_dialog_list);

        tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                final int position = tab.getPosition();
                List<AddressItem> list = levelList.get(position);
                if (null != list && !list.isEmpty()) {   // 如果選中級別的List沒有資料就通過執行回撥來獲取，否則直接複用
                    addressAdapter.setList(list);
                    final int lastClickPositon = levelPosition.get(position, -1); // 獲取上一次選中的地區的position，如果找不到，預設返回-1
                    if (lastClickPositon >= 0) recyclerView.smoothScrollToPosition(lastClickPositon); // 如果上一次有選擇，RecyclerView滾動到指定position
                } else if (changeListener != null) {
                    changeListener.onSelectChange(position, levelIds.get(position));
                }
            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {}
            @Override
            public void onTabReselected(TabLayout.Tab tab) {}
        });
        addressAdapter = new AddressAdapter();
        // 列表單項點選事件
        addressAdapter.setOnItemClickListener(position -> {
            final int selectedTabPosition = tabLayout.getSelectedTabPosition(); // 選中的Tab的position
            levelIds.put(selectedTabPosition, levelList.get(selectedTabPosition).get(position).getId()); // 更新選中的地區的ID
            changeSelect(selectedTabPosition, position);
            levelPosition.put(selectedTabPosition, position); // 更新選中的地區在列表中的position
            setTabText(selectedTabPosition, levelList.get(selectedTabPosition).get(position).getAddress()); // 將選中的地區的名字顯示在Tab上
            if (selectedTabPosition < maxLevel - 1 && selectedTabPosition == tabLayout.getTabCount() - 1) { // 如果沒達到MaxLevel並且選中的Tab是最後一個就新增一個Tab，並且RecyclerView滾動到最頂部
                tabLayout.addTab(createTab(), true);
                recyclerView.smoothScrollToPosition(0);
            }
        });
        recyclerView.setLayoutManager(new LinearLayoutManager(context));
        recyclerView.setAdapter(addressAdapter);
        tabLayout.addTab(createTab(), true); // 預設新增一個Tab
    }

    // 建立一個請選擇的tab並返回
    private TabLayout.Tab createTab() {
        return tabLayout.newTab().setText(tabText);
    }

    // 當點選了RecyclerView條目的時候執行的方法
    private void changeSelect(int selectedTabPosition, int nowClickPosition) {
        // 儲存下來的當前列表上一個點選位置.如果找不到該值，預設返回-1
        final int lastPosition = levelPosition.get(selectedTabPosition, -1);
        // 如果上一個點選位置和下一個點選位置相同，則不做改變
        if (nowClickPosition == lastPosition) {
            return;
        }
        // 如果不是最後一個並且又重新選擇了級別地區，移除後面的Tab
        final int count = tabLayout.getTabCount();
        // 這裡要倒過來移除Tab，不然會出現這樣的情況，假如你有四個Tab，你移除第0個，接著移除第一個的話，第一個不是原來的第一個。因為你把第0個移除，原來的第一個就到了第0個的位置上。所以倒過來移除是明智的做法
        if (selectedTabPosition < count - 1) {
            TabLayout.Tab nowTab = tabLayout.getTabAt(selectedTabPosition);
            if (null != nowTab) nowTab.setText(tabText);
            for (int i = count - 1; i > selectedTabPosition; i--) {
                // 將相應地區級別的列表資料移除
                levelList.remove(i);
                // 將之前選中的position重置為-1
                levelPosition.put(i, -1);
                // 將之前記錄的地區ID重置為-1
                levelIds.put(i, -1);
                tabLayout.removeTabAt(i);
            }
        }
        // 將現在選擇的地區設定為已經選中
        levelList.get(selectedTabPosition).get(nowClickPosition).setChecked(true);
        // 通過adapter更新列表單個物件
        addressAdapter.notifyItemChanged(nowClickPosition);
        if (lastPosition >= 0) {
            // 將上一個選中的地區標記為未選中
            levelList.get(selectedTabPosition).get(lastPosition).setChecked(false);
            // 通過adapter更新列表單個物件
            addressAdapter.notifyItemChanged(lastPosition);
        }
    }
    // 設定第幾個tab的文字
    private void setTabText(int tabPosition, String text) {
        TabLayout.Tab tab = tabLayout.getTabAt(tabPosition);
        if (null != tab) tab.setText(text);
    }




    // -----------------------------  以下是對外公開方法與介面  --------------------------

    /**
     *  設定Dialog的標題
     * @param title 標題文字
     */
    public void setDialogTitle(String title) {
        this.title = title;
    }

    /**
     *  設定在當前tab下還未選擇區域時候tab預設顯示的文字
     * @param tabDefaultText 預設顯示的文字
     */
    public void setTabDefaultText(String tabDefaultText) {
        this.tabText = tabDefaultText;
    }

    /**
     *  設定地址最大級別（如：省，市，縣，鎮的話就是最大4級）
     * @param level 最大級別
     */
    public void setMaxLevel(int level) {
        this.maxLevel = level;
    }

    /**
     *  設定當前級別列表需要顯示的列表資料
     * @param list 列表資料
     * @param level 地區級別
     */
    public void setCurrentAddressList(List<AddressItem> list, int level) {
        levelList.put(level, list);
        addressAdapter.setList(list);
    }

    /**
     *  設定Dialog中Tab點選切換的監聽
     * @param listener tab切換監聽實現
     */
    public void setTabSelectChangeListener(@NonNull TabSelectChangeListener listener) {
        this.changeListener = listener;
    }

    /**
     *  自定義的Tab切換監聽介面
     */
    public interface TabSelectChangeListener {
        void onSelectChange(int level, int parentId);
    }
}
複製程式碼

使用方法：

private void init() {
    mDialog = new AddressBottomSheetDialog(this);
    mDialog.setDialogTitle("配送至");
    mDialog.setMaxLevel(4);
    mDialog.setTabDefaultText("請選擇");
    mDialog.setTabSelectChangeListener((level, parentId) ->
            mDialog.setCurrentAddressList(requestAddress(level, parentId), level)
    );
    binding.userIvSelectAddress.setOnClickListener(v -> mDialog.show());
}
private List<AddressItem> requestAddress(int level, int parentID) {
    List<AddressItem> list = new ArrayList<>();
    String levelTxt = "未知";
    switch (level) {
        case 0:
            levelTxt = "省級";
            break;
        case 1:
            levelTxt = "市級";
            break;
        case 2:
            levelTxt = "縣級";
            break;
        case 3:
            levelTxt = "鎮級";
    }
    for (int i = 0; i < 32; i++) {
        AddressItem item = new AddressItem();
        item.setChecked(false);
        item.setAddress(levelTxt + i);
        list.add(item);
    }
    return list;
}  
複製程式碼

總結

雖然上面的程式碼已經有很詳細的註釋，但是還是有一些東西沒細講，比如SparseArray是什麼等等。

SparseArray是什麼？SparseArray後面需要一個泛型，SparseArray，可以理解為是HashMap<Integer, T>。但是為什麼不用HashMap而使用這個東西？SparseArray是谷歌專門為安卓打造的Map，優點是省記憶體，佔用記憶體沒HashMap大。之前我的做法是省級列表資料一個list，市級一個list。。。這種寫法，不但耦合度高，使用者也不能自定義最大的地區級別是多少，而且在寫法過程中少不了各種switch判斷。後來靈機一動，Tab選中的position就是代表的一個級別，直接通過Map來取對應級別的list出來不就好了。
SparseIntArray是什麼？其實它就相當於SparseArray，谷歌還為我們封裝了其他基本資料型別的SparseArray，它們就是SparseBooleanArray和SparseLongArray，用法都是相似的。
為什麼不使用一個成員變數來記錄當前選中的tab的position，然後在onTabSelected中更新該成員變數？之前我是這麼做的，但是會出奇怪的問題：在市級重新選擇之後，移除後面的tab後再重新選縣級之後，TabLayout的橫線不會移動到鎮級上了。不知道什麼原因造成的，猜測可能是onTabSelected觸發時機造成選中的Tab的position更新不及時。如果有知道的旁友還望不吝賜教。如下圖：

仿淘寶，京東多級地址選擇器
2018-04-01
OC:自定義日期選擇器
2018-06-04
自定義時間選擇器
2018-04-25
Android 實現一個仿微信的圖片選擇器
2017-05-15
Android
Android自定義View之區塊選擇器
2019-02-26
AndroidView
Android View 自定義 RangeSeekBar 範圍選擇器
2016-07-21
AndroidView
模仿京東選擇地址器
2017-12-13
Flutter 自定義輸入框Selection選單和選擇器
2019-08-05
Flutter
一次地址選擇器的實踐
2019-03-02
Android 自定義 View 實戰之角度選擇器
2017-05-18
AndroidView
自定義view——仿酷狗的側滑選單
2018-02-26
View
對選擇螢幕上的一個欄位設定自定義Search Help
2009-10-16
自定義一個類載入器
2017-11-23
element ui 自定義的快捷選項的日期選擇器並格式化
2024-03-15
UI
Flutter 自定義View——仿同花順自選股列表
2020-07-14
FlutterView
一個高仿閒魚鍵自定義數字鍵盤特效
2017-08-20
特效
一個選擇器工具。測試結構偽類選擇器方法
2015-11-19
android自定義佈局——城市選擇介面
2014-05-29
Android
『為移動端而生』的自定義多級聯動選擇器
2016-12-01
HarmonyOS NEXT應用開發案例—自定義日曆選擇器
2024-04-22
Android小記-仿淘寶聯動地址選擇對話方塊
2018-07-06
Android
iOS 自定義日曆（日期選擇）控制元件
2018-03-23
iOS控制元件
Vue富文字帶圖片修改圖片大小自定義選擇項自定義字型
2019-02-15
Vue自定義字型
iOS仿滴滴預約用車時間選擇器
2018-11-23
iOS
CSS選擇器(一)
2021-09-09
CSS
vue 手寫一個時間選擇器
2018-08-02
Vue
002---選擇器（標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器）
2018-04-18
字元
微信小程式三級聯動地址選擇器
2017-07-11
微信小程式
jQuery選擇器介紹：基本選擇器、層次選擇器、過濾選擇器、表單選擇器
2018-03-04
jQuery
WebView 自定義長按選擇，實現收藏 / 分享選中文字。
2019-03-04
WebView
IE瀏覽器自定義地址協議的實現
2008-03-19
瀏覽器協議
自定義一個kaniko映象
2021-09-24
一個自定義函式
2009-01-08
函式
Vue element下拉框加一個自定義的選項
2020-04-17
Vue
【Flutter 專題】97 仿網易新聞標籤選擇器
2021-07-12
Flutter
[譯] 用 CSS 選擇器和自定義屬性來升級你的專案
2017-12-22
CSS
jQuery選擇器——基本選擇器
2017-07-30
jQuery
如何快速實現一個顏色選擇器
2022-01-21

自定義一個仿拼多多地址選擇器

前言

開始

開始擼程式碼

總結

相關文章