Android省市區三級聯動控制元件

ChuckChenLw發表於2017-01-05
Android控制元件

　　最近有需求需要實現省市區三級聯動，但是發現之前的實現不夠靈活，自己做了一些優化。為了方便以後使用，抽離出來放在了github上WheelView。同時把其核心庫放在了JCenter中了，可以直接引用。也可以參考專案中的Demo進行引用
　　下面介紹一下如何使用
　　如果用的是AndroidStudio那麼直接在build.gradle檔案中新增依賴：
　　

dependencies {
    compile 'chuck.WheelItemView:library:1.0.1'
 }

　　
　　成功引入庫之後，可以在需要彈出省市區選擇框的頁面生成一AddressPickerView 例項。
　　

pickerView = new AddressPickerView(this);

　　下面來說說需要的資料來源，我對資料做了抽象，在使用的時候，將自己的資料model實現IWheelViewModel介面就可以了，如下：
　　

public class AddressModel implements IWheelViewModel {
    public String addressName;
    public String addressId;

    @Override
    public String getValueString() {
        return addressName;
    }

    @Override
    public String getValueId() {
        return addressId;
    }
}

　　而後，就是講你自己從伺服器或者本地資料庫得到到的資料按照一定的格式元件成三級資料List，這裡可能會有一點複雜，需要在組裝的過程中小心一定，省市區要對應不然資料會錯亂。組裝資料來源，最後得到省市區對應的List：
　　

 private List<IWheelViewModel> mOneItems = new ArrayList<>();

 private List<List<IWheelViewModel>> mTwoItems;

 private List<List<List<IWheelViewModel>>> mThreeItems;

　　將資料來源填充到View中：
　　

//設定三級資料
        pickerView.setPickerData(mOneItems, mTwoItems, mThreeItems, true);

　　給確定和關閉按鈕設定監聽：
　　

pickerView.setOnPickerSelectListener(new OnPickerSelectListener() {
            @Override
            public void onSelect(int pos1, int pos2, int pos3) {
                String resultOne, resultTwo, resultThree;
                resultOne = mOneItems.get(pos1).getValueString();
                resultTwo = mTwoItems.get(pos1).get(pos2).getValueString();
                resultThree = mThreeItems.get(pos1).get(pos2).get(pos3).getValueString();
                Toast.makeText(MainActivity.this, resultOne + resultTwo + resultThree, Toast.LENGTH_SHORT).show();
            }
        });
        pickerView.setOnDismissListener(new OnDismissListener() {
            @Override
            public void onDismiss(Object o) {

            }
        });

　　如果不做特殊的設定，選中字型和非中字型都有預設的顏色和大小，如果想改變這些屬性，我也在AddressPickerView中提供了對應的方法：
　　

/**
     * 被選中Item的字型大小
     *
     * @param size
     */
    public void setSelectTextSize(int size) 

    /**
     * 被選中Item字型顏色
     *
     * @param color
     */
    public void setSelectTextColor(int color) 

    /**
     * 被選中Item的字型大小
     *
     * @param size dimen中定義的Size大小
     */
    public void setUnselectTextSize(int size) 

    /**
     * 被選中Item字型顏色
     *
     * @param colorId
     */
    public void setUnselectTextColor(int colorId)

　　設定完這些屬性之後，直接呼叫show()方法就可以彈出這個選擇框了。
　
　　Android省市區三級聯動控制元件

　　完整的程式碼：
　　

public class MainActivity extends AppCompatActivity {
    AddressPickerView pickerView;
    private List<IWheelViewModel> mOneItems = new ArrayList<>();
    private List<List<IWheelViewModel>> mTwoItems;
    private List<List<List<IWheelViewModel>>> mThreeItems;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        //建立例項
        pickerView = new AddressPickerView(this);
        //設定title
        pickerView.setTitle("收貨地址");
        //設定被選中文字的顏色
        pickerView.setSelectTextColor(R.color.green);
        pickerView.setSelectTextSize(R.dimen.select_text_size);
        pickerView.setUnselectTextColor(R.color.address_view_confirm_text_color);
        pickerView.setUnselectTextSize(R.dimen.unselect_text_size);
        //設定三級資料
        pickerView.setPickerData(mOneItems, mTwoItems, mThreeItems, true);
        //設定確定和關閉監聽
        pickerView.setOnPickerSelectListener(new OnPickerSelectListener() {
            @Override
            public void onSelect(int pos1, int pos2, int pos3) {
                String resultOne, resultTwo, resultThree;
                resultOne = mOneItems.get(pos1).getValueString();
                resultTwo = mTwoItems.get(pos1).get(pos2).getValueString();
                resultThree = mThreeItems.get(pos1).get(pos2).get(pos3).getValueString();
                Toast.makeText(MainActivity.this, resultOne + resultTwo + resultThree, Toast.LENGTH_SHORT).show();
            }
        });
        pickerView.setOnDismissListener(new OnDismissListener() {
            @Override
            public void onDismiss(Object o) {

            }
        });
    }

    private void initData() {
        AddressModel model = new AddressModel();
        model.addressName = "北京";
        mOneItems.add(model);
        AddressModel model1 = new AddressModel();
        model1.addressName = "湖北";
        mOneItems.add(model1);
        AddressModel model2 = new AddressModel();
        model2.addressName = "河北";
        mOneItems.add(model2);

        mTwoItems = new ArrayList<>();

        List<IWheelViewModel> l21 = new ArrayList<>();
        AddressModel model21 = new AddressModel();
        model21.addressName = "北京市";
        l21.add(model21);

        List<IWheelViewModel> l22 = new ArrayList<>();
        AddressModel model221 = new AddressModel();
        model221.addressName = "武漢";
        AddressModel model222 = new AddressModel();
        model222.addressName = "襄陽";
        AddressModel model223 = new AddressModel();
        model223.addressName = "十堰";
        AddressModel model224 = new AddressModel();
        model224.addressName = "孝感";
        AddressModel model225 = new AddressModel();
        model225.addressName = "荊州";
        l22.add(model221);
        l22.add(model222);
        l22.add(model223);
        l22.add(model224);
        l22.add(model225);

        List<IWheelViewModel> l23 = new ArrayList<>();
        AddressModel model231 = new AddressModel();
        model231.addressName = "石家莊";
        AddressModel model232 = new AddressModel();
        model232.addressName = "邯鄲";
        AddressModel model233 = new AddressModel();
        model233.addressName = "秦皇島";
        AddressModel model234 = new AddressModel();
        model234.addressName = "保定";
        AddressModel model235 = new AddressModel();
        model235.addressName = "張家口";
        l23.add(model231);
        l23.add(model232);
        l23.add(model233);
        l23.add(model234);
        l23.add(model235);

        mTwoItems.add(l21);
        mTwoItems.add(l22);
        mTwoItems.add(l23);

        mThreeItems = new ArrayList<>();
        List<IWheelViewModel> l31 = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            AddressModel model3 = new AddressModel();
            model3.addressName = "北京市" + i;
            l31.add(model3);
        }
        List<List<IWheelViewModel>> list21 = new ArrayList<>();
        list21.add(l31);
        mThreeItems.add(list21);
        for (int k = 0; k < 2; k++) {
            List<List<IWheelViewModel>> temp = new ArrayList<>();
            for (int j = 0; j < 5; j++) {
                List<IWheelViewModel> temp1 = new ArrayList<>();
                for (int i = 0; i < 10; i++) {
                    AddressModel model111 = new AddressModel();
                    model111.addressName = "地區" + i;
                    temp1.add(model111);
                }
                temp.add(temp1);
            }
            mThreeItems.add(temp);
        }


    }

    public void onClick(View view) {
        pickerView.show();
    }
}

　　這些程式碼可以參考demo，實際上，這裡只是實現了省市區的三級聯動，還可以自己參考AddressPickerView定製自己想要的滾動選擇框。這裡只討論省市區這種場景，其他的場景可以自己實現。
　　如果覺得有用，歡迎star，如果覺得有問題，歡迎給出建議。
　　https://github.com/hgchenkai/WheelView

相關文章