DropDownMenu使用解析
下拉篩選列表網上有很多，但是想到自己動手豐衣足食，就自己試試啦！
在佈局時因爲考慮到流暢問題，所以沒用PopupWindow，而是採用基本佈局方式完成的。
經過篩選我用的是這個
https://github.com/dongjunkun/DropDownMenu.git，想要的可以自己下demo哈！
只要核心代碼如下：
Gradle Dependency
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
dependencies {
compile 'com.github.dongjunkun:DropDownMenu:1.0.3'
}
使用
添加DropDownMenu 到你的佈局文件，如下
<com.yyydjk.library.DropDownMenu android:id="@+id/dropDownMenu" android:layout_width="match_parent" android:layout_height="match_parent" app:ddmenuTextSize="13sp" //tab字體大小 app:ddtextUnselectedColor="@color/drop_down_unselected" //tab未選中顏色 app:ddtextSelectedColor="@color/drop_down_selected" //tab選中顏色 app:dddividerColor="@color/gray" //分割線顏色 app:ddunderlineColor="@color/gray" //下劃線顏色 app:ddmenuSelectedIcon="@mipmap/drop_down_selected_icon" //tab選中狀態圖標 app:ddmenuUnselectedIcon="@mipmap/drop_down_unselected_icon"//tab未選中狀態圖標 app:ddmaskColor="@color/mask_color" //遮罩顏色，一般是半透明 app:ddmenuBackgroundColor="@color/white" //tab 背景顏色 ... />
我們只需要在java代碼中調用下面的代碼
//tabs 所有標題，popupListViews 所有菜單，contentView 內容mDropDownMenu.setDropDownMenu(tabs, popupListViews, contentView);
mDropDownMenu.setTabText(position == 0 ? headers[2] : sexs[position]); //item被選擇時調用
mDropDownMenu.closeMenu(); //默認自帶動畫效果setDropDownMenu(List<String> tabTexts,List<View> popupViews,View contentView)ScreenShot
那麼我們需要做什麼呢？
其實就是圍繞mDropDownMenu.setDropDownMenu(tabs, popupListViews, contentView);參數展開的：
0.準備最上邊tabs數據；
1.準備PopupView集合，及對應的adapter，包括填充條目item佈局樣式；
2.contentView的佈局及數據變化加載需要自己設置；
3.可通過listView的setOnItemClickListener獲得需要自己獲取所選的條目position；
2.contentView的佈局及數據變化加載需要自己設置；
3.可通過listView的setOnItemClickListener獲得需要自己獲取所選的條目position；
adapter這裏就不絮叨了，我們直接看Activity中代碼：
public class DropDownMenuActivity extends AppCompatActivity {
@InjectView(R.id.dropDownMenu)
DropDownMenu mDropDownMenu;
private String headers[] = {"城市", "年齡", "性別", "星座"};
private List<View> popupViews = new ArrayList<>();
private GirdDropDownAdapter cityAdapter;
private ListDropDownAdapter ageAdapter;
private ListDropDownAdapter sexAdapter;
private ConstellationAdapter constellationAdapter;
private String citys[] = {"不限", "武漢", "北京", "上海", "成都", "廣州", "深圳", "重慶", "天津", "西安", "南京", "杭州"};
private String ages[] = {"不限", "18歲以下", "18-22歲", "23-26歲", "27-35歲", "35歲以上"};
private String sexs[] = {"不限", "男", "女"};
private String constellations[] = {"不限", "白羊座", "金牛座", "雙子座", "巨蟹座", "獅子座", "處女座", "天秤座", "天蠍座", "射手座", "摩羯座", "水瓶座", "雙魚座"};
private int constellationPosition = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.dropdowmenu);
ButterKnife.inject(this);
initView();
}
private void initView() {
//init city menu
final ListView cityView = new ListView(this); //gird:準備
cityAdapter = new GirdDropDownAdapter(this, Arrays.asList(citys));
cityView.setDividerHeight(0);
cityView.setAdapter(cityAdapter);
//init age menu
final ListView ageView = new ListView(this);
ageView.setDividerHeight(0);
ageAdapter = new ListDropDownAdapter(this, Arrays.asList(ages));
ageView.setAdapter(ageAdapter);
//init sex menu
final ListView sexView = new ListView(this);
sexView.setDividerHeight(0);
sexAdapter = new ListDropDownAdapter(this, Arrays.asList(sexs));
sexView.setAdapter(sexAdapter);
//init constellation
final View constellationView = getLayoutInflater().inflate(R.layout.custom_layout, null);
GridView constellation = ButterKnife.findById(constellationView, R.id.constellation);
constellationAdapter = new ConstellationAdapter(this, Arrays.asList(constellations));
constellation.setAdapter(constellationAdapter);
TextView ok = ButterKnife.findById(constellationView, R.id.ok);
ok.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//其內部已經設置了記錄當前tab位置的參數，該參數會隨tab被點擊而改變，所以這裏直接設置tab值即可
//此處若想獲得constellations第一個值“不限”，可修改constellationPosition初始值爲-1，且這裏代碼改爲constellationPosition == -1)
mDropDownMenu.setTabText((constellationPosition == 0) ? headers[3] : constellations[constellationPosition]);
mDropDownMenu.closeMenu();
// changeContentView(); //在這裏可以請求獲得經篩選後要顯示的內容
}
});
//add item click event
cityView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
cityAdapter.setCheckItem(position);
mDropDownMenu.setTabText(position == 0 ? headers[0] : citys[position]);
mDropDownMenu.closeMenu();
}
});
ageView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
ageAdapter.setCheckItem(position);
mDropDownMenu.setTabText(position == 0 ? headers[1] : ages[position]);
mDropDownMenu.closeMenu();
}
});
sexView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
sexAdapter.setCheckItem(position);
mDropDownMenu.setTabText(position == 0 ? headers[2] : sexs[position]);
mDropDownMenu.closeMenu();
}
});
constellation.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
constellationAdapter.setCheckItem(position);
constellationPosition = position;
}
});
//init popupViews
popupViews.add(cityView);
popupViews.add(ageView);
popupViews.add(sexView);
popupViews.add(constellationView);
//init context view
TextView contentView = new TextView(this);
contentView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
contentView.setText("內容顯示區域");
contentView.setGravity(Gravity.CENTER);
contentView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);
//init dropdownview
mDropDownMenu.setDropDownMenu(Arrays.asList(headers), popupViews, contentView);
}
@Override
public void onBackPressed() {
//退出activity前關閉菜單
if (mDropDownMenu.isShowing()) {
mDropDownMenu.closeMenu();
} else {
super.onBackPressed();
}
}
}下邊是我自己畫的DropDownMenu層級圖,可以幫助理解佈局:
雖然有點醜，下次改進吧，嘿嘿。。。
簡書 3Q竹林
