The floating effect of group buying items for Android-like public comments

This is an effect in group buying by the public comments. on the Group Buying page, there is a purchase item under the merchant's picture. When you scroll through the Group Buying details page, the purchase item will stay at the top of the page. specific results:

Figure 1 Figure 2

Figure 3

As you can see, in the comments, in order to highlight this purchase item, the scroll bar will be displayed on the top (2) when the user slides back, you can restore the first image (1 ).

The specific implementation ideas are as follows:

From this figure, we can see the specific layout. in fact, in the top position, there is a purchase item 1, which is hidden at the very beginning. When sliding from top to bottom to a specific position, the purchase item 1 is displayed, 2. Hide the purchased items.

On the contrary, when sliding back, we will show the purchase items 2 and hide the purchase items 1.

The core part is to control the display and hiding of purchased items based on the sliding height of scrollview. it should be noted that the sliding height must be determined. Otherwise, non-smooth effects may occur, affecting the user experience.

Let's take a look at this figure (it's ugly, I hope you don't mind it). When the original view on the face slides to this position, that is to say, when the above part stays on the page, it is just the height of the purchased items. We need to display the hidden purchase items and then hide the original purchase items, in this way, there will be no abrupt effect, so that the effect becomes smooth. the same is true when the interface is up and down, so we will not repeat it here. let's take a look at the Code:

Layout file:

Activity_main.xml:

<Relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android" xmlns: Tools = "http://schemas.android.com/tools" Android: layout_width = "match_parent" Android: layout_height = "match_parent"> <COM. tony. orderview. orderview Android: Id = "@ + ID/refreshview" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: Background = "#77 aaaa"> <scrollview Android: id = "@ + ID/scrollview" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: Background = "# accaac"> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: Orientation = "vertical"> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "250dip" Android: background = "@ drawable/upload" Android: text = "one" Android: textcolor = "# ffccee"/> <include Android: id = "@ + ID/theview" layout = "@ layout/deal_buy_item"/> <textview Android: layout_width = "fill_parent" Android: layout_height = "1250dip" Android: background = "@ drawable/ic_tuan_info_bg_1" Android: text = "WeChat noodle stories for only 49 RMB, great value to enjoy"/> <textview Android: layout_width = "fill_parent" Android: layout_height = "50dip" Android: Background = "# ff0055" Android: text = ""/> </linearlayout> </scrollview> </COM. tony. orderview. orderview> <include Android: visibility = "gone" Android: Id = "@ + ID/theviewstay" layout = "@ layout/deal_buy_item"/> </relativelayout>

Purchase layout:

<? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "65.0dip" Android: Background = "@ drawable/ic_tuan_info_bg_1" Android: orientation = "vertical"> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "0.0dip" Android: layout_weight = "1.0" Android: gravity = "center_vertical" Android: orientation = "horizontal" android Oid: paddingleft = "10.0dip" Android: paddingright = "10.0dip"> <linearlayout Android: layout_width = "0.0dip" Android: layout_height = "fill_parent" Android: layout_weight = "1.0" Android: gravity = "center_vertical" Android: Orientation = "vertical"> <textview Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_marginright = "8.0dip" Android: singleline = "true" Android: textcolor = "# F Fe55600 "Android: textsize =" 21.0sp "/> <textview Android: layout_width =" wrap_content "Android: layout_height =" wrap_content "Android: ellipsize =" end "Android: singleline = "true" Android: textcolor = "# ff979797" Android: textsize = "12.0sp"/> </linearlayout> <button Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: ellipsize = "end" Android: maxlines = "1" Android: minwidth = "1501_dip" Android: text = "Buy now" Android: textappearance = "? Android: textappearancemedium "/> </linearlayout> <imageview Android: layout_width =" fill_parent "Android: layout_height =" 1.0dip "Android: background = "@ drawable/ic_tuan_info_bg_3"/> </linearlayout>

Mainactivity:

Package COM. tony. orderview; import android. app. activity; import android. OS. bundle; import android. view. menu; import android. view. view; import android. widget. scrollview; import COM. example. stayview. r; import COM. tony. orderview. orderview. stayviewlistener; public class mainactivity extends activity {@ override public void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. activity_main); orderview refreshableview = (orderview) findviewbyid (R. id. refreshview); refreshableview. setstayview (findviewbyid (R. id. theview), (scrollview) findviewbyid (R. id. scrollview), new stayviewlistener () {@ overridepublic void onstayviewshow () {// The findviewbyid (R. id. theviewstay ). setvisibility (view. visible) ;}@ overridepublic void onstayviewgone () {// hide the layout findviewbyid (R. id. theviewstay ). setvisibility (view. gone) ;}}) ;}@ override public Boolean oncreateoptionsmenu (menu) {getmenuinflater (). inflate (R. menu. activity_main, menu); Return true ;}}

The next step is the core part. The specific control height is displayed and hidden. I did this. I overwrote an orderview, set it out of the entire layout, and then calculated the sliding height of the scrollview:

package com.tony.orderview;import android.content.Context;import android.util.AttributeSet;import android.view.View;import android.widget.LinearLayout;import android.widget.ScrollView;import android.widget.Scroller;public class OrderView extends LinearLayout {private Scroller scroller;private Context mContext;private View stayView;private StayViewListener stayViewListener;private ScrollView scrollView;public void setStayView(View stayview,ScrollView scrollview,StayViewListener stayViewListener){this.stayView = stayview;this.scrollView = scrollview;this.stayViewListener = stayViewListener;}public OrderView(Context context) {super(context);mContext = context;}public OrderView(Context context, AttributeSet attrs) {super(context, attrs);mContext = context;init();}private void init() {setOrientation(LinearLayout.VERTICAL);scroller = new Scroller(mContext);}/** *  */boolean up = true;@Overridepublic void computeScroll() {if(stayView!=null&&scrollView!=null&&stayViewListener!=null){int y = scrollView.getScrollY();if(up){int top = stayView.getTop();if(y>=top){stayViewListener.onStayViewShow();up = false;}}if(!up){int bottom = stayView.getBottom();if(y<=bottom-stayView.getHeight()){stayViewListener.onStayViewGone();up = true;}}}}public interface StayViewListener{public void onStayViewShow();public void onStayViewGone();}}

In fact, there are still many practices regarding the effect of purchasing items similar to the public comments, which may not necessarily be defined like my own view. however, the overall idea remains unchanged. It must be determined based on the scrollview's rolling height. regardless of the implementation method, you must pay attention to the location control to make the effect smooth, instead of suddenly purchasing a bar on the interface. there are still a lot of details. Please try again later.

If you have reproduced, please declare the Source: http://blog.csdn.net/t12x3456