Android Imitation takeout shopping cart function _android

First look at the effect chart:

Knowledge Point Analysis

The effect of the picture is not complex content and not much, it is worth introducing the knowledge point is also the following several bar
-List title hover
-The left and right list sliding time linkage
-Parabolic animation when adding a product
-Bottom Pop-up shopping cart list
-Synchronization of data

Another is to achieve the effect of the time may encounter a few pits ...

The layout is simple and goes directly into the code

1: List title hover

Now do the project list what's the basic discard ListView instead of Recyclerview, the title hover in the previous blog is also using a Recyclerview open source project Sticky-headers-recyclerview, But when I wrote this demo, I ran into two pits.

1), Sticky-headers-recyclerview do hover title when the scrolltoposition (int position) method scrolling location is not accurate.
2, when the layout is complex, if the width of the recyclerview or the use of weight percentage can cause header display blank.

and the Open-source project author has stopped maintenance, so this time it's changed back to Stickylistheaderslistview.

Need a lot of shopping cart demo are novice, here is a brief introduction to the use of Stickylistheaderslistview

1), as reference Gradle file dependencies add
compile ' se.emilsjolander:stickylistheaders:2.7.0 '

2), XML file using Stickylistheaderslistview instead of ListView

 <se.emilsjolander.stickylistheaders.stickylistheaderslistview
  android:layout_width= "Match_parent"
  Android:background= "#fff"
  android:id= "@+id/itemlistview"
  android:layout_height= "match_parent" >
 </se.emilsjolander.stickylistheaders.StickyListHeadersListView>

3), adapter inherit Baseadapter and interface Stickylistheadersadapter
The Stickylistheadersadapter interface includes two methods

 View Getheaderview (int position, view Convertview, ViewGroup parent);

 Long Getheaderid (int position);

The code uses the same as ListView, here are a few unique methods, see the method name is also easy to understand the use of

public void Setareheaderssticky (Boolean areheaderssticky);
public boolean areheaderssticky ();

public void Setonheaderclicklistener (Onheaderclicklistener listener);

Public interface Onheaderclicklistener {public
 void Onheaderclick (Stickylistheaderslistview L, View header, int Itemposition, Long Headerid, Boolean currentlysticky);

public void Setonstickyheaderchangedlistener (Onstickyheaderchangedlistener listener);

Public interface Onstickyheaderchangedlistener {
 void onstickyheaderchanged (Stickylistheaderslistview l, View header, int itemposition, long headerid);

Public View getlistchildat (int index);
public int getlistchildcount ();

2: The left and right list linkage

Linkage mainly has two effects
-Left list Click Select category, right list slide to corresponding category
-On the right list slide the left list highlights the classification following changes

The first effect is simple, the list item on the left adds the click event, and the setselection (int positon) method of the list in the right.

The second effect adds Scrolllistener to the list on the right, setting the selected category to the left, based on the first data displayed in the list

 Listview.setonscrolllistener (New Abslistview.onscrolllistener () {
   @Override public
   Void Onscrollstatechanged (abslistview view, int scrollstate) {

   }

   @Override public
   void Onscroll (Abslistview view, int firstvisibleitem, int visibleitemcount, int totalitemcount) {
   //Get category ID according to Firstvisibleitem, Get the location to be selected on the left according to the category ID
    goodsitem item = datalist.get (Firstvisibleitem);
    if (Typeadapter.selecttypeid!= item.typeid) {
     Typeadapter.selecttypeid = Item.typeid;
     Typeadapter.notifydatasetchanged ();
     The list on the left is a recyclerview so use smoothscrolltoposition (int position) so that when the corresponding position item can scroll to show
     rvtype.smoothscrolltoposition (int position) (Getselectedgroupposition (Item.typeid));}}
  );

3: Add the animation of the product

Add product total three animations
-When the merchandise from 0 to 1 rotate left to show the minus button
-When merchandise from 1 to 0 minus button rotates right away
-parabola animation added to shopping cart icon when adding merchandise

The first two animations are simple to break down into three motion tweens, panning, and transparency.
Can be done in XML or code settings, but there's a little pit to note the rotation animation must be in front of the translation animation, otherwise it is not a scrolling translation, but jump ...

Here's how to put the animation code Setup

 Display the animation private Animation getshowanimation () {Animationset set = new Animationset (true) for the minus sign. 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;
  ///Hide minus animation 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;
  ///Execute animation just give the corresponding control setanimation and then call the Setvisibility method to {... tvminus.setanimation (gethiddenanimation ());
 Tvminus.setvisibility (View.gone);

 }

The parabolic animation and the above can be decomposed into two flat moving pictures, but two flat moving draw the difference is a linear acceleration, because the animation interface span is larger so need to write in the root, can not write in the list of item (this will show incomplete).
The anim_mask_layout in the code is the root layout of the entire layout file, which is a relativelayout

Implementation process:

1, first click on the plus icon to get the control on the screen absolute coordinates, callback activity display animation

 int[] loc = new int[2];
 V.getlocationinwindow (Loc);
 Activity.playanimation (Loc);

2. Create the animation control and add it to the root Bureau and remove the animated view after the animation is finished

 public void Playanimation (int[] start_location) {imageview img = new ImageView (this);
  Img.setimageresource (R.drawable.button_add);
 Setanim (img,start_location);
  //Create animation translation Animation Direct transfer offset private Animation createanim (int startx,int starty) {int[] des = new int[2];

  Imgcart.getlocationinwindow (DES);

  Animationset set = new Animationset (false);
  Animation Translationx = new Translateanimation (0, des[0]-startx, 0, 0);
  The linear interpolation defaults to the linear translationx.setinterpolator (new Linearinterpolator ());
  Animation translationy = new Translateanimation (0, 0, 0, des[1]-starty);
  Set the acceleration interpolation translationy.setinterpolator (New Accelerateinterpolator ());
  Animation alpha = new Alphaanimation (1,0.5f);
  Set.addanimation (Translationx);
  Set.addanimation (Translationy);
  Set.addanimation (Alpha);

  Set.setduration (500);
 return set; //Calculate animation View the coordinates in the root bureau are added to the root bureau in the private void Addviewtoanimlayout (final viewgroup VG, final view view, int[] Locat
  ION) {int x = location[0]; int y = LOCATION[1];
  int[] loc = new INT[2];
  Vg.getlocationinwindow (Loc);
  View.setx (x);
  View.sety (y-loc[1]);
 Vg.addview (view); //Set Animation end remove animation View private void Setanim (Final View V, int[] start_location) {addviewtoanimlayout (anim_mask_layout,
  V, start_location);
  Animation set = Createanim (Start_location[0],start_location[1]); Set.setanimationlistener (New Animation.animationlistener () {@Override public void Onanimationstart (Animation animat ION) {} @Override public void Onanimationend (final Animation Animation) {//Direct remove may be an error if the interface is still being drawn. M
     Hanlder.postdelayed (New Runnable () {@Override public void run () {Anim_mask_layout.removeview (v);
   }},100);
  @Override public void Onanimationrepeat (Animation Animation) {}});
 V.startanimation (set);

 }

4: Bottom Pop-up shopping cart list

Bottom pop-up effect everyone must be familiar with, a few back to each project will be used to, the official did not provide a simple control to achieve, generally need to write their own, but to do simple and smooth, easy to transplant recommended use of third-party libraries, here to recommend a

Bottomsheet

Simple integration and diverse effects here is a brief introduction to the use method

Integration
compile ' com.flipboard:bottomsheet-core:1.5.1 '
use
In XML, the background layout is used when the bottomsheetlayout package pops up the view, and the bottomsheetlayout inherits from the frame layout:

 <com.flipboard.bottomsheet.bottomsheetlayout xmlns:android=" http://
 Schemas.android.com/apk/res/android "android:id=" @+id/bottomsheetlayout "android:layout_width=" Match_parent " android:layout_height= "Match_parent" > <linearlayout android:orientation= "Horizontal" Match_parent "android:layout_height=" match_parent "> <android.support.v7.widget.recyclerview android:layout_ Width= "100DP" android:id= "@+id/typerecyclerview" android:layout_height= "match_parent" > </android.support.v7 . Widgets. recyclerview> <se.emilsjolander.stickylistheaders.stickylistheaderslistview android:layout_width= "Match_ Parent "android:background=" #fff "android:id=" @+id/itemlistview "android:layout_height=" match_parent "> </ Se.emilsjolander.stickylistheaders.stickylistheaderslistview> </LinearLayout> </ Com.flipboard.bottomsheet.bottomsheetlayout> 

It's simple to use in your code

 Pop-up View Bottomsheet is the view
 Bottomsheetlayout.showwithsheetview (Bottomsheet) to be popped up;

 Code-behind view (click outside the pop-up view to hide the pop-up view, to the slide can also be)
 bottomsheetlayout.dismisssheet ();

5: Synchronization of data

Synchronized data, control interface refresh should be the most easy to detours the novice, in fact, as long as it is not difficult to be careful, here simply provide a way of thinking (and not necessarily suitable for your project).

 List of items
 private arraylist<goodsitem> dataList;
 Category List
 private arraylist<goodsitem> typelist;
 Selected goods
 private sparsearray<goodsitem> selectedlist;
 The number used to record each grouping selection
 private Sparseintarray groupselect;

Sparsearray This class is actually hashmap< integer,object >

However, Sparsearray can either find value based on the key, or find value based on the location, performance is higher than HashMap, is the official recommended alternative class,
The same sparseintarray is actually a substitute for hashmap< integer,integer>.

The following methods are implemented in the activity, which are used to unify the purchase quantity of goods shown in the Data unified management
list from the activity acquisition, the addition and reduction of the goods, the method of calling the activity and then notifidatasetchanged, Because the code a lot of specific or look at the source bar

 /** * Item represents the purchase quantity of the item plus a * @param item * @param refreshgoodlist whether to refresh the product List/public void Add (Goodsitem item,boole
  An refreshgoodlist) {int groupcount = Groupselect.get (Item.typeid);
  if (groupcount==0) {groupselect.append (item.typeid,1);
  }else{groupselect.append (Item.typeid,++groupcount);
  Goodsitem temp = Selectedlist.get (item.id);
   if (temp==null) {item.count=1;
  Selectedlist.append (Item.id,item);
  }else{temp.count++;
 Update (refreshgoodlist); /** * The purchase quantity of item merchandise minus one * @param item * @param refreshgoodlist whether to refresh the product list/public void remove (Goodsitem item,boo
  Lean refreshgoodlist) {int groupcount = Groupselect.get (Item.typeid);
  if (groupcount==1) {groupselect.delete (Item.typeid);
  }else if (groupcount>1) {groupselect.append (Item.typeid,--GroupCount);
  Goodsitem temp = Selectedlist.get (item.id);
   if (temp!=null) {if (temp.count<2) {selectedlist.remove (item.id);
   }else{item.count--; } Update (RefreShgoodlist);
 /** * Refresh Interface Total price, purchase quantity, etc. * @param refreshgoodlist whether to refresh the product List/private void Update (Boolean refreshgoodlist) {...
  The purchase quantity of the current item is obtained according to the commodity ID public int Getselecteditemcountbyid (int id) {Goodsitem temp = selectedlist.get (ID);
  if (temp==null) {return 0;
 return temp.count;
 /////The number of the current category is obtained by the category ID public int getselectedgroupcountbytypeid (int typeid) {return groupselect.get (typeid);

 }

The concrete logic still looks the code, perhaps has the simpler realization ...

Demo download address, download to the file is a as module, you can create your own new project import module.

SOURCE Download: Android Imitation takeout shopping cart function

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.