仿餓了么購(gòu)物車下單效果
前一段由于新項(xiàng)目需要入宦，開(kāi)發(fā)一個(gè)類似餓了么購(gòu)物車下單效果仰税，電商類缺虐、外賣類、點(diǎn)餐類項(xiàng)目都可以用的上,廢話不多說(shuō)請(qǐng)看效果功茴。
效果圖如下:
主要的功能：
就是左側(cè)展示分類庐冯，右側(cè)展示分類下商品的，點(diǎn)擊右側(cè)分類下的商品坎穿，如果商品是套餐類型的話展父，點(diǎn)擊可以看套餐詳情返劲，下單選擇完商品后，可以在購(gòu)物車?yán)锩嫣砑踊驕p少商品數(shù)量栖茉。
主要功能實(shí)現(xiàn)：
1:分類及商品及購(gòu)物車?yán)锩嫔唐窋?shù)量的聯(lián)動(dòng)效果
2:底部購(gòu)物車商品列表
3:選擇左側(cè)分類效果
4:添加商品是有0到1旭等，減少商品有1到0動(dòng)畫效果
5:下單動(dòng)畫
1：分類及商品及購(gòu)物車?yán)锩嫔唐窋?shù)量的聯(lián)動(dòng)效果
商品的分類和商品展示分別是兩個(gè)列表，每一個(gè)商品的數(shù)量取商品的number衡载、商品分類是取每一個(gè)分類下的商品list里面遍歷商品取商品數(shù)量之和。然后商品列表的
GoodsAdapter里面有一個(gè)參數(shù)傳的是商品分類的CatograyAdapter,當(dāng)下單時(shí)減少或則添加商品時(shí)隙袁，都會(huì)調(diào) MainActivity的handlerCarNum方法痰娱。
減少時(shí)type傳0，添加時(shí)傳1菩收。通過(guò)一個(gè)SparseArray梨睁，key是商品的product_id，value為商品的下單個(gè)數(shù)娜饵。1：當(dāng)添加商品都會(huì)傳入一個(gè)商品對(duì)象goodsBean坡贺，通過(guò)product_id取到這個(gè)商品對(duì)象，如果商品對(duì)象為空時(shí)箱舞，給傳入的對(duì)象下單數(shù)量goodsBean.setNum(1)遍坟，否則goodsBean.setNum(++i)。2：當(dāng)減少商品時(shí)晴股，通過(guò)product_id取到這個(gè)商品對(duì)象愿伴，通過(guò)對(duì)象取對(duì)象的下單數(shù)量如果小與2的時(shí)候goodsBean.setNum(0)，并將該對(duì)象從SparseArray中remove否goodsBean.setNum(--i)电湘。最后調(diào)update方法更新GoodsAdapter,CatograyAdapter.
public void handlerCarNum(int type, GoodsBean goodsBean, boolean refreshGoodList){
if (type == 0) {
GoodsBean temp = selectedList.get(goodsBean.getProduct_id());
if(temp!=null){
if(temp.getNum()<2){
goodsBean.setNum(0);
selectedList.remove(goodsBean.getProduct_id());
}else{
int i = goodsBean.getNum();
goodsBean.setNum(--i);
}
}
} else if (type == 1) {
GoodsBean temp = selectedList.get(goodsBean.getProduct_id());
if(temp==null){
goodsBean.setNum(1);
selectedList.append(goodsBean.getProduct_id(), goodsBean);
}else{
int i= goodsBean.getNum();
goodsBean.setNum(++i);
}
}
update(refreshGoodList);
}
//刷新布局 總價(jià)隔节、購(gòu)買數(shù)量等
private void update(boolean refreshGoodList){
int size = selectedList.size();
int count =0;
for(int i=0;i<size;i++){
GoodsBean item = selectedList.valueAt(i);
count += item.getNum();
totleMoney += item.getNum()*Double.parseDouble(item.getPrice());
}
tv_totle_money.setText("￥"+String.valueOf(df.format(totleMoney)));
totleMoney = 0.00;
if(count<1){
bv_unm.setVisibility(View.GONE);
}else{
bv_unm.setVisibility(View.VISIBLE);
}
bv_unm.setText(String.valueOf(count));
if(productAdapter!=null){
productAdapter.notifyDataSetChanged();
}
if(goodsAdapter!=null){
goodsAdapter.notifyDataSetChanged();
}
if(catograyAdapter!=null){
catograyAdapter.notifyDataSetChanged();
}
if(bottomSheetLayout.isSheetShowing() && selectedList.size()<1){
bottomSheetLayout.dismissSheet();
}
}
2：底部購(gòu)物車商品列表
點(diǎn)擊購(gòu)物車查看購(gòu)物車列表時(shí)，就是給含有下單商品的HashMap作為參數(shù)傳入ProductAdapter中寂呛，在購(gòu)物車中添加或減少商品數(shù)量同樣是調(diào) MainActivity的handlerCarNum方法怎诫。
除此之外，購(gòu)物車列表彈起的效果可以用一個(gè)bottomsheet效果贷痪。as直接集成
compile'com.flipboard:bottomsheet-core:1.5.1'即可幻妓。
3：選擇左側(cè)分類效果
由于選擇分類時(shí)，既要改變分類的背景色也要改變選擇分類文字的顏色劫拢，就不能直接在xml里面設(shè)置了涌哲，需要在getview里面根據(jù)外面?zhèn)鬟M(jìn)來(lái)選擇的selection與position比較后設(shè)置。
public void setSelection(int selection) {
this.selection = selection;
}
if (position == selection) {
viewholder.tv_catogray.setBackgroundResource(R.drawable.rec_red_left_stroke);
viewholder.tv_catogray.setTextColor(context.getResources().getColor(R.color.black));
} else {
viewholder.tv_catogray.setBackgroundResource(R.drawable.empty);
viewholder.tv_catogray.setTextColor(context.getResources().getColor(R.color.gray));
}
4：添加商品是有0到1尚镰，減少商品有1到0動(dòng)畫效果
其實(shí)動(dòng)畫效果做起來(lái)也不是特別復(fù)雜阀圾，首先要搞清android的幾種動(dòng)畫效果，分為在Android3.0（即API Level11）以前狗唉，Android僅支持2種動(dòng)畫：分別是Frame Animation（逐幀動(dòng)畫）和Tween Animation（補(bǔ)間動(dòng)畫）初烘，在3.0之后Android支持了一種新的動(dòng)畫系統(tǒng)，稱為：Property Animation（屬性動(dòng)畫）。
最常用的補(bǔ)間動(dòng)畫最常用的4中效果如下：
漸變透明度動(dòng)畫效果
漸變尺寸伸縮動(dòng)畫效果
畫面轉(zhuǎn)換位置移動(dòng)動(dòng)畫效果
畫面轉(zhuǎn)移旋轉(zhuǎn)動(dòng)畫效果
添加商品是有0到1肾筐，減少商品有1到0動(dòng)畫效果其實(shí)就是利用了translate哆料、rotate水平位移和旋轉(zhuǎn)動(dòng)畫效果。
//顯示減號(hào)的動(dòng)畫
private Animation getShowAnimation(){
AnimationSet set = new AnimationSet(true);
RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
set.addAnimation(rotate);
TranslateAnimation translate = new TranslateAnimation(
TranslateAnimation.RELATIVE_TO_SELF,2f
,TranslateAnimation.RELATIVE_TO_SELF,0
,TranslateAnimation.RELATIVE_TO_SELF,0
,TranslateAnimation.RELATIVE_TO_SELF,0);
set.addAnimation(translate);
AlphaAnimation alpha = new AlphaAnimation(0,1);
set.addAnimation(alpha);
set.setDuration(500);
return set;
}
//隱藏減號(hào)的動(dòng)畫
private Animation getHiddenAnimation(){
AnimationSet set = new AnimationSet(true);
RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
set.addAnimation(rotate);
TranslateAnimation translate = new TranslateAnimation(
TranslateAnimation.RELATIVE_TO_SELF,0
,TranslateAnimation.RELATIVE_TO_SELF,2f
,TranslateAnimation.RELATIVE_TO_SELF,0
,TranslateAnimation.RELATIVE_TO_SELF,0);
set.addAnimation(translate);
AlphaAnimation alpha = new AlphaAnimation(1,0);
set.addAnimation(alpha);
set.setDuration(500);
return set;
}
5：下單動(dòng)畫
下單動(dòng)畫首先要獲取添加商品時(shí)的初始位置坐標(biāo)吗铐，通過(guò)getLocationInWindow方法獲取初始位置的心x,y坐標(biāo)东亦，然后獲取添加商品要消失的地方的坐標(biāo)，一般都選擇購(gòu)物車logo的坐標(biāo)唬渗。然后計(jì)算x,y的位移值后典阵，通過(guò)TranslateAnimation轉(zhuǎn)換移動(dòng)效果，x,y同時(shí)移動(dòng)就實(shí)現(xiàn)了拋物線的效果镊逝。最后不要忘記設(shè)置當(dāng)動(dòng)畫結(jié)束的時(shí)候隱藏拋過(guò)來(lái)的小圖標(biāo)壮啊。
public void setAnim(final View v, int[] startLocation) {
anim_mask_layout = null;
anim_mask_layout = createAnimLayout();
anim_mask_layout.addView(v);//把動(dòng)畫小球添加到動(dòng)畫層
final View view = addViewToAnimLayout(anim_mask_layout, v, startLocation);
int[] endLocation = new int[2];// 存儲(chǔ)動(dòng)畫結(jié)束位置的X、Y坐標(biāo)
tv_car.getLocationInWindow(endLocation);
// 計(jì)算位移
int endX = 0 - startLocation[0] + 40;// 動(dòng)畫位移的X坐標(biāo)
int endY = endLocation[1] - startLocation[1];// 動(dòng)畫位移的y坐標(biāo)
TranslateAnimation translateAnimationX = new TranslateAnimation(0,endX, 0, 0);
translateAnimationX.setInterpolator(new LinearInterpolator());
translateAnimationX.setRepeatCount(0);// 動(dòng)畫重復(fù)執(zhí)行的次數(shù)
translateAnimationX.setFillAfter(true);
TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY);
translateAnimationY.setInterpolator(new AccelerateInterpolator());
translateAnimationY.setRepeatCount(0);// 動(dòng)畫重復(fù)執(zhí)行的次數(shù)
translateAnimationY.setFillAfter(true);
AnimationSet set = new AnimationSet(false);
set.setFillAfter(false);
set.addAnimation(translateAnimationY);
set.addAnimation(translateAnimationX);
set.setDuration(800);// 動(dòng)畫的執(zhí)行時(shí)間
view.startAnimation(set);
// 動(dòng)畫監(jiān)聽(tīng)事件
set.setAnimationListener(new Animation.AnimationListener() {
// 動(dòng)畫的開(kāi)始
@Override
public void onAnimationStart(Animation animation) {
v.setVisibility(View.VISIBLE);
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
// 動(dòng)畫的結(jié)束
@Override
public void onAnimationEnd(Animation animation) {
v.setVisibility(View.GONE);
}
});
}
最后肯定少不了源碼下載地址:shopcar 感覺(jué)需要的朋友歡迎star,fork撑蒜，有問(wèn)題可以提issue歹啼。
