模倣美団商品選択ドロップダウンメニュー実現
11690 ワード
実际に実现したブログをあまり书いていない気がします.最近実習を探していて、ブログを書く時間が少なくなりましたが、やはり続けなければなりません.今日のブログでは、電子商取引アプリケーションでよく見られる選択カテゴリのドロップダウンリストの実現について説明します.まず効果図を見てみましょう.
一、ドロップダウンリストの実現
実は実現方法はたくさんあって、この時実現したのも技術の含有量がなくて、ただ自分のプロジェクトの中のやり方を総括して、1つの構想を提供します.
まずリストのデータです.一般的なデータはバックグラウンドから読みます.ここにはバックグラウンドがないので、クライアントで死んでいます.
次にadapterにデータをカプセル化します.
showAsDropDownは、popwindowをProductという選択タイトルの真下に位置づけるためです.上記のような方法を実現します.
最後に完全にコードを貼るのは、やはり簡単です.最後にコードダウンロードリンクも提供されます.
二、ロード円形ProgressBarの表示
効果図の中のあのようなProgressBarをロードして、円形ProgresBarは原生のBarで実現することができて、しかしスタイルは単一で、前に私はこのような効果をして第1時間はいつもフレームのアニメーションを考慮して、しかしこのような方式で多くのピクチャーをリンクする必要があって、このようにして煩わしいことを実現して、2つはピクチャーが多くてメモリを占めます.この効果は、オリジナルProgressBarのアニメーションを変更して実現します.非常に簡単です.
rotateは回転アニメーションを設定し、360度回転します.shape=“ring”背景を円に設定します.android:innerRadiusRatio="3"内輪半径を設定し、android:thicknessRatio="10"外輪半径を設定します.最後にリングの色にグラデーション効果を持たせるためにgradientを使用して設定します.gradientは3つのグラデーション方式,線形,放射,走査がある.ここでtypeはスキャンに設定します.次に中心点を設定し、開始色と終了色を設定すると、上記のような効果が得られます.
はい、ここまで効果全体を話しました.ソースのダウンロードアドレスを貼り付けます.
https://github.com/reallin/PopWin_MeiTuan
一、ドロップダウンリストの実現
実は実現方法はたくさんあって、この時実現したのも技術の含有量がなくて、ただ自分のプロジェクトの中のやり方を総括して、1つの構想を提供します.
まずリストのデータです.一般的なデータはバックグラウンドから読みます.ここにはバックグラウンドがないので、クライアントで死んでいます.
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);
}
}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にデータをカプセル化します.
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 });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;
}
}showAsDropDownは、popwindowをProductという選択タイトルの真下に位置づけるためです.上記のような方法を実現します.
最後に完全にコードを貼るのは、やはり簡単です.最後にコードダウンロードリンクも提供されます.
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();
}
}
});
}
}二、ロード円形ProgressBarの表示
効果図の中のあのようなProgressBarをロードして、円形ProgresBarは原生のBarで実現することができて、しかしスタイルは単一で、前に私はこのような効果をして第1時間はいつもフレームのアニメーションを考慮して、しかしこのような方式で多くのピクチャーをリンクする必要があって、このようにして煩わしいことを実現して、2つはピクチャーが多くてメモリを占めます.この効果は、オリジナルProgressBarのアニメーションを変更して実現します.非常に簡単です.
<ProgressBar
android:id="@+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="@drawable/shape_progress"
android:indeterminateDuration="1000" /><rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false" >
<gradient
android:centerColor="#8cd4aa"
android:centerY="0.50"
android:endColor="#ffffff"
android:startColor="#39ac69"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>rotateは回転アニメーションを設定し、360度回転します.shape=“ring”背景を円に設定します.android:innerRadiusRatio="3"内輪半径を設定し、android:thicknessRatio="10"外輪半径を設定します.最後にリングの色にグラデーション効果を持たせるためにgradientを使用して設定します.gradientは3つのグラデーション方式,線形,放射,走査がある.ここでtypeはスキャンに設定します.次に中心点を設定し、開始色と終了色を設定すると、上記のような効果が得られます.
はい、ここまで効果全体を話しました.ソースのダウンロードアドレスを貼り付けます.
https://github.com/reallin/PopWin_MeiTuan