Android小記-仿淘寶聯動地址選擇對話方塊

apin發表於2018-07-06
Android

介紹

github：github.com/apinIron/Li…

由於UI設計需要，模仿了淘寶的收貨地址選擇對話方塊，就簡單的封裝了一個對話方塊。

使用了TabLayout + ViewPager來進行實現，ViewPager中每個頁面都是一個RecyclerView。

效果如下：

Android小記-仿淘寶聯動地址選擇對話方塊

使用

在程式碼中使用：

LinkageDialog dialog = new LinkageDialog.Builder(MainActivity.this, 3).setLinkageData(getCityList())
        .setTitle("配送至")
        .setTabIndicatorColor(Color.parseColor("#EA6F5A"))
        .setTabTitleColor(Color.BLACK, Color.parseColor("#EA6F5A"))
        .setTabIndicatorHeight((int) getResources().getDimension(R.dimen.indicator_height))
        .setContentHeight((int) (getResources().getDimension(R.dimen.item_city_height) * 4))
        .setOnLinkageAdapterListener(new LinkageDialog.IOnLinkageAdapterListener() {
            @Override
            public BaseLinkageItemAdapter getAdapter() {
                return new MyLinkageItemAdapter(MainActivity.this);
            }
        })
        .setOnLinkageSelectListener(new LinkageDialog.IOnLinkageSelectListener() {
            @Override
            public void onLinkageSelect(LinkageItem... items) {
                toastLinkageItem(items);
            }
        }).build();
複製程式碼

方法描述

//設定對話方塊的標題
setTitle(String title) 

//設定資料來源(資料需實現LinkageItem介面)
setLinkageData(List data) 

//設定內容高度（RecyclerView）
setContentHeight(int contentHeight) 

//設定tabLayout指示器顏色
setTabIndicatorColor(int colorTabIndicator) 

//設定tabLayout指示器高度
setTabIndicatorHeight(int tabIndicatorHeight) 

//設定tabLayout標題選中和未選中的字型顏色
setTabTitleColor(int colorTabSelectTitleColor,int colorTabWaitSelectTitleColor) 

//監聽選擇事件
setOnLinkageSelectListener(IOnLinkageSelectListener listener) 

//如需要自定義RecyclerView的item佈局，需設定這個方法
setOnLinkageAdapterListener(IOnLinkageAdapterListener listener) 
複製程式碼

如果想要自定義選擇列表的item效果，只需要自定義自己的Adapter實現BaseLinkageItemAdapter即可，如下：

public class MyLinkageItemAdapter extends BaseLinkageItemAdapter<MyLinkageItemAdapter.ViewHolder> {

    public MyLinkageItemAdapter(Context context) {
        super(context);
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_linkage_my, parent,false));
    }

    @Override
    protected void bindView(ViewHolder holder, LinkageItem item, boolean isSelect) {
        holder.textView.setText(item.getLinkageName());
        holder.textView.setTextColor(isSelect ? Color.BLACK : Color.GRAY);
        holder.imageView.setVisibility(isSelect ? View.VISIBLE : View.INVISIBLE);
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        TextView textView;
        ImageView imageView;

        public ViewHolder(View itemView) {
            super(itemView);

            textView = itemView.findViewById(R.id.tv_linkage_title);
            imageView = itemView.findViewById(R.id.iv_select);
        }
    }
}
複製程式碼

實現

在建立對話方塊的時候需要設定最多聯動級數。

//新增tab
for (int i = 0; i < mBuilder.linkageCount; i++) {
    tlLinkageTab.addTab(tlLinkageTab.newTab());
}
複製程式碼

但是新增的tab都是可以點選的，可是需要的效果是已選擇過的tab和待選擇的tab才可以點選，然後就通過設定clickable來讓待選擇的tab後面的tab都無法點選。（每個tab並不是tabLayout的直接孩子，需要getChildAt(0)，然後遍歷獲取每一個tab）

LinearLayout tabStrip = ((LinearLayout)tlLinkageTab.getChildAt(0));
for(int i = position; i < tabStrip.getChildCount(); i++) {
    tabStrip.getChildAt(i).setClickable(false);
    setLinkageTabText(i,"");
}
複製程式碼

到此tab還有一個問題，就是 tabLayout.setTabTextColorssetTabTextColors(int normalColor, int selectedColor) 無法直接使用，因為他是效果是選中和預設情況下tab的字型顏色，而需求是已選擇過的tab是一個字型顏色，等待選擇的tab字型是一個顏色而不是跟著選擇走。所以用了tab.setCustomView(tv)方式自定義tab的View。

然後就是為ViewPager設定介面卡，每個頁面都建立一個RecyclerView。監聽每個recyclerView的item點選事件來處理點選事件。

已這篇文章記錄下當初實現的時候遇到的一些問題。

相關文章