樓主: 天天bug

江苏7位数17202: Android仿美團下拉菜單(商品選購)實例代碼,android高仿美團

5
回復
1103
查看
打印 上一主題 下一主題
[復制鏈接]

体彩江苏7位数18148 www.zyvyo.com 329

主題

996

帖子

722

安幣

手工藝人

樓主
發表于 2018-1-18 16:12:27 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式

            

        美團電商應用平臺大家使用非常頻繁,下面小編通過本文給大家介紹電商應用平臺中常用的選擇類別下拉列表的實現。先給大家展示下效果圖:

        

        一、下拉列表的實現

        其實實現方法有很多,這時實現的也沒有什么技術含量,只是總結下自己在項目中的做法,也提供一個思路。

        首先是列表的數據,一般數據都是從后臺讀過來,這里因為沒有后臺,所以寫死在客戶端:

[Java] 查看源文件 復制代碼
private void initmenudata() {
menudata = new arraylist<map<string, string="">>();
string[] menustr = new string[] { "全部", "糧油", "衣服", "圖書", "電子產品",
"酒水飲料", "水果" };
map<string, string=""> map;
for (int i = , len = menustr.length; i < len; ++i) {
map = new hashmap<string, string="">();
map.put("name", menustr[i]);
menudata.add(map);
}
menudata = new arraylist<map<string, string="">>();
string[] menustr = new string[] { "綜合排序", "配送費最低" };
map<string, string=""> map;
for (int i = , len = menustr.length; i < len; ++i) {
map = new hashmap<string, string="">();
map.put("name", menustr[i]);
menudata.add(map);
}
menudata = new arraylist<map<string, string="">>();
string[] menustr = new string[] { "優惠活動", "特價活動", "免配送費",
"可在線支付" };
map<string, string=""> map3;
for (int i = 0, len = menustr3.length; i < len; ++i) {
map3 = new hashmap<string, string="">();
map3.put("name", menustr3[i]);
menudata3.add(map3);
}
}</string,></string,></map<string,></string,></string,></map<string,></string,></string,></map<string,>

        就是做了簡單的封裝。彈出列表的實現考慮使用popwindow。

[Java] 查看源文件 復制代碼
popmenu = new popupwindow(contentview,
linearlayout.layoutparams.match_parent,
linearlayout.layoutparams.match_parent);
popmenu.setoutsidetouchable(true);
popmenu.setbackgrounddrawable(new bitmapdrawable());
popmenu.setfocusable(true);
popmenu.setanimationstyle(r.style.popwin_anim_style);
popmenu.setondismisslistener(new ondismisslistener() {
public void ondismiss() {
producttv.settextcolor(color.parsecolor("#5a5959"));
sorttv.settextcolor(color.parsecolor("#5a5959"));
activitytv.settextcolor(color.parsecolor("#5a5959"));
}
});

        接著將數據封裝到adapter中:

[Java] 查看源文件 復制代碼
menuadapter1 = new simpleadapter(this, menudata1,
r.layout.item_listview_popwin, new string[] { "name" },
new int[] { r.id.listview_popwind_tv });
menuadapter2 = new simpleadapter(this, menudata2,
r.layout.item_listview_popwin, new string[] { "name" },
new int[] { r.id.listview_popwind_tv });
menuadapter3 = new simpleadapter(this, menudata3,
r.layout.item_listview_popwin, new string[] { "name" },
new int[] { r.id.listview_popwind_tv });

        設置點擊標題頭彈出列表,并改變標題頭的顏色

[Java] 查看源文件 復制代碼
public void onclick(view v) {
// todo auto-generated method stub
switch (v.getid()) {
case r.id.supplier_list_product:
producttv.settextcolor(color.parsecolor("#ac"));
poplistview.setadapter(menuadapter);
popmenu.showasdropdown(product, , );
menuindex = ;
break;
case r.id.supplier_list_sort:
sorttv.settextcolor(color.parsecolor("#ac"));
poplistview.setadapter(menuadapter);
popmenu.showasdropdown(product, , );
menuindex = ;
break;
case r.id.supplier_list_activity:
activitytv.settextcolor(color.parsecolor("#ac"));
poplistview.setadapter(menuadapter);
popmenu.showasdropdown(product, , );
menuindex = ;
break;
}
}

        showasdropdown是為了讓popwindow定位在product這個選擇標題的正下方。從而實現上面那種方式。

        最后完整的貼出代碼,還是蠻簡單的。最后也會提供代碼下載鏈接。

[Java] 查看源文件 復制代碼
public class mainactivity extends activity implements
onclicklistener {
private listview listview, poplistview;
private progressbar progressbar;
private list<map<string, string="">> menudata1, menudata2, menudata3;
private popupwindow popmenu;
private simpleadapter menuadapter1, menuadapter2, menuadapter3;
private linearlayout product, sort, activity;
private imageview cartiv;
private textview producttv, sorttv, activitytv, titletv;
private int green, grey;
private string currentproduct, currentsort, currentactivity;
private int menuindex = 0;
private intent intent;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_supplier_list);
findview();
initmenudata();
initpopmenu();
}
private void initmenudata() {
menudata1 = new arraylist<map<string, string="">>();
string[] menustr1 = new string[] { "全部", "糧油", "衣服", "圖書", "電子產品",
"酒水飲料", "水果" };
map<string, string=""> map1;
for (int i = 0, len = menustr1.length; i < len; ++i) {
map1 = new hashmap<string, string="">();
map1.put("name", menustr1[i]);
menudata1.add(map1);
}
menudata2 = new arraylist<map<string, string="">>();
string[] menustr2 = new string[] { "綜合排序", "配送費最低" };
map<string, string=""> map2;
for (int i = 0, len = menustr2.length; i < len; ++i) {
map2 = new hashmap<string, string="">();
map2.put("name", menustr2[i]);
menudata2.add(map2);
}
menudata3 = new arraylist<map<string, string="">>();
string[] menustr3 = new string[] { "優惠活動", "特價活動", "免配送費",
"可在線支付" };
map<string, string=""> map3;
for (int i = 0, len = menustr3.length; i < len; ++i) {
map3 = new hashmap<string, string="">();
map3.put("name", menustr3[i]);
menudata3.add(map3);
}
}
@override
public void onclick(view v) {
// todo auto-generated method stub
switch (v.getid()) {
case r.id.supplier_list_product:
producttv.settextcolor(color.parsecolor("#39ac69"));
poplistview.setadapter(menuadapter1);
popmenu.showasdropdown(product, 0, 2);
menuindex = 0;
break;
case r.id.supplier_list_sort:
sorttv.settextcolor(color.parsecolor("#39ac69"));
poplistview.setadapter(menuadapter2);
popmenu.showasdropdown(product, 0, 2);
menuindex = 1;
break;
case r.id.supplier_list_activity:
activitytv.settextcolor(color.parsecolor("#39ac69"));
poplistview.setadapter(menuadapter3);
popmenu.showasdropdown(product, 0, 2);
menuindex = 2;
break;
}
}
protected void findview() {
listview = (listview) findviewbyid(r.id.supplier_list_lv);
product = (linearlayout) findviewbyid(r.id.supplier_list_product);
sort = (linearlayout) findviewbyid(r.id.supplier_list_sort);
activity = (linearlayout) findviewbyid(r.id.supplier_list_activity);
producttv = (textview) findviewbyid(r.id.supplier_list_product_tv);
sorttv = (textview) findviewbyid(r.id.supplier_list_sort_tv);
activitytv = (textview) findviewbyid(r.id.supplier_list_activity_tv);
titletv = (textview) findviewbyid(r.id.supplier_list_title_tv);
cartiv = (imageview) findviewbyid(r.id.supplier_list_cart_iv);
progressbar = (progressbar) findviewbyid(r.id.progress);
product.setonclicklistener(this);
sort.setonclicklistener(this);
activity.setonclicklistener(this);
cartiv.setonclicklistener(this);
}
private void initpopmenu() {
initmenudata();
view contentview = view.inflate(this, r.layout.popwin_supplier_list,
null);
popmenu = new popupwindow(contentview,
linearlayout.layoutparams.match_parent,
linearlayout.layoutparams.match_parent);
popmenu.setoutsidetouchable(true);
popmenu.setbackgrounddrawable(new bitmapdrawable());
popmenu.setfocusable(true);
popmenu.setanimationstyle(r.style.popwin_anim_style);
popmenu.setondismisslistener(new ondismisslistener() {
public void ondismiss() {
producttv.settextcolor(color.parsecolor("#5a5959"));
sorttv.settextcolor(color.parsecolor("#5a5959"));
activitytv.settextcolor(color.parsecolor("#5a5959"));
}
});
poplistview = (listview) contentview
.findviewbyid(r.id.popwin_supplier_list_lv);
contentview.findviewbyid(r.id.popwin_supplier_list_bottom)
.setonclicklistener(new onclicklistener() {
public void onclick(view arg0) {
popmenu.dismiss();
}
});
menuadapter1 = new simpleadapter(this, menudata1,
r.layout.item_listview_popwin, new string[] { "name" },
new int[] { r.id.listview_popwind_tv });
menuadapter2 = new simpleadapter(this, menudata2,
r.layout.item_listview_popwin, new string[] { "name" },
new int[] { r.id.listview_popwind_tv });
menuadapter3 = new simpleadapter(this, menudata3,
r.layout.item_listview_popwin, new string[] { "name" },
new int[] { r.id.listview_popwind_tv });
poplistview.setonitemclicklistener(new onitemclicklistener() {
public void onitemclick(adapterview arg0, view arg1, int pos,
long arg3) {
popmenu.dismiss();
if (menuindex == 0) {
currentproduct = menudata1.get(pos).get("name");
titletv.settext(currentproduct);
producttv.settext(currentproduct);
toast.maketext(mainactivity.this, currentproduct, toast.length_short).show();
} else if (menuindex == 1) {
currentsort = menudata2.get(pos).get("name");
titletv.settext(currentsort);
sorttv.settext(currentsort);
toast.maketext(mainactivity.this, currentsort, toast.length_short).show();
} else {
currentactivity = menudata3.get(pos).get("name");
titletv.settext(currentactivity);
activitytv.settext(currentactivity);
toast.maketext(mainactivity.this, currentactivity, toast.length_short).show();
}
}
});
}
}</string,></string,></map<string,></string,></string,></map<string,></string,></string,></map<string,></map<string,>

        二、加載圓形progressbar的顯示

        就是效果圖中的那種加載progressbar,圓形progresbar可以用原生的bar來實現,但樣式單一,之前我做這種效果第一時間總是考慮到幀動畫,但用這種方式需要有很多圖片來鏈接起來,這樣一來實現麻煩,二來圖片多了占內存。下面用改變原生progressbar的動畫來實現這種效果,非常簡單:

[Java] 查看源文件 復制代碼
<progressbar android:id="@+id/progress" android:indeterminatedrawable="@drawable/shape_progress" android:indeterminateduration="1000" android:layout_centerinparent="true" android:layout_height="wrap_content" android:layout_width="wrap_content"></progressbar>

        indeterminatedrawable是加載背景圖片,indeterminateduration是旋轉的速度。這里的思路是用xml來畫一張圖,它是環形的,且環形圈中有漸變顏色。如下:

[Java] 查看源文件 復制代碼
<rotate android:fromdegrees="" android:pivotx="%" android:pivoty="%" android:todegrees="" xmlns:android="//schemas.android.com/apk/res/android">
<shape android:innerradiusratio="" android:shape="ring" android:thicknessratio="" android:uselevel="false">
<gradient android:centercolor="#cdaa" android:centery="." android:endcolor="#ffffff" android:startcolor="#ac" android:type="sweep" android:uselevel="false">
</gradient></shape>
</rotate>

        rotate設置旋轉動畫,360度旋轉。shape="ring"設置背景為圓。android:innerradiusratio="3"設置內環半徑,android:thicknessratio="10"設置外環半徑。最后為了讓環中顏色有漸變效果,使用gradient來設置。gradient可以有三種漸變方式,線性,輻射,掃描。這里type要設置成掃描。然后設置中心點,開始顏色和結束顏色,就能實現上面的那種效果了。



        
分享到:  QQ好友和群 QQ空間 微信
收藏
收藏0
支持
支持1
反對
反對0

0

主題

9517

帖子

2469

安幣

Android大神

Rank: 6Rank: 6

沙發
發表于 2018-1-19 21:36:19 | 只看該作者
支持樓主,支持安卓巴士!

8

主題

9348

帖子

3547

安幣

碼皇(巴士元老)

Rank: 8Rank: 8

板凳
發表于 2018-1-21 04:47:07 | 只看該作者
樓主威武,以后多發干貨,多辦活動~!

9

主題

9479

帖子

1813

安幣

Android大神

Rank: 6Rank: 6

QQ達人

地板
發表于 2018-1-22 01:27:16 | 只看該作者
不錯不錯,樓主辛苦了。。。

0

主題

71

帖子

51

安幣

程序猿

Rank: 2

5#
發表于 2018-1-22 12:04:59 | 只看該作者
感謝分享,安卓巴士有你更精彩:)
我學習我快樂

3

主題

29

帖子

713

安幣

代碼手工藝人

爵士

Rank: 4

QQ達人

QQ
6#
發表于 2019-6-5 09:55:29 | 只看該作者

感謝分享,安卓巴士有你更精彩
人生只有不斷努力才能獲得自己想要的一切!
您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規則

領先的中文移動開發者社區
18620764416
7*24全天服務
意見反?。[email protected]

掃一掃關注我們

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粵ICP備15117877號 )