1. The effect chart is as follows:
The user experience is still cool, so today we're going to talk about how to achieve this effect.
2, analysis
In order to facilitate understanding, drawing analysis
As the picture shows, the entire page is divided into four parts:
1, suspended content,floatView
2, the top of the content,headView
3, the middle content, and suspended content is the same,middleView
4, the Product Details Display page,detailView
Because the content of the page exceeds the height of the screen, Scrollview
scrolling with the implementation, suspension view
and scrollview
sibling, are in a frame layout or relative layout.
When the Y-direction of the scrolling distance is less than the middle of the content to the top middleView
of the distance, middleView
naturally with the page to slide up and disappear, we show the suspension view
, so that the middleView
effect has been stuck at the top.
When the Y-direction scrolling distance is greater than the middle content middleView
to the top of the distance, the suspension is view
hidden.
Through the analysis, we found that only know scrollview
the rolling distance and the middleView
top of the height can be. This has turned complex interaction effects into two simple APIs.
3, the first way to achieve
3.1 Gets the distance from the top of the Middleview to the parent container
Tv_title.getviewtreeobserver (). Addongloballayoutlistener (New Viewtreeobserver.ongloballayoutlistener ()
{
@Override public
void Ongloballayout ()
{
mtitletopandheight = Tv_title.gettop ();
Tv_title.getviewtreeobserver (). Removeglobalonlayoutlistener (this);
}
);
The height of the oncreate()
view can be obtained directly through the view method in the activity, getTop()
because the view is not yet drawn to the interface, so we use the above method to listen to the view set up, because it may occur more than once, So finally remember to remove the listener event.
The following code can also be obtained:
Tv_title.post (New Runnable ()
{
@Override public
Void Run ()
{
mtitletopandheight = tv_ Title.gettop ();
}
);
post
You can also get the correct values by using the method to place the actions in the queue, and then executing the events in the queue after the system layout completes view
top
.
3.2 Get vertical scrolling distance
There is a way in which Scrollview
content changes in the parent class View
Although the onScrollChanged(),
method is protect
not externally callable, but internally, scrollview
the method is executed when scrolling, so we customize a MyScrollView
onScrollChanged()
Passes the scrolling distance to the outside by a callback.
Custom ScrollView complete code as follows:
public class Myscrollview extends ScrollView {private Onscrolllistener monscrolllistener;
/** * Whether the user finger touch sliding * * Private Boolean mistouch = false;
Public Myscrollview {This (context, NULL);
Public Myscrollview (context, AttributeSet attrs) {This (context, attrs, 0); Myscrollview (context, AttributeSet attrs, int defstyleattr) {Super (context, Attrs, defstyleattr
); @Override protected void onscrollchanged (int l, int t, int oldl, int Oldt) {super.onscrollchanged (L, T, OLDL
, Oldt); if (Monscrolllistener!= null) {Monscrolllistener.onscroll (T, Mistouch?)
OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:OnScrollListener.SCROLL_STATE_FLING); @Override public boolean ontouchevent (motionevent ev) {switch (ev.getaction ()) {case Motionev Ent.
Action_move:mistouch = true;
Break Case MotionEvent.ACTION_UP:case Motionevent.acTion_cancel:mistouch = false;
Break
return super.ontouchevent (EV);
public void Setonscrolllistener (Onscrolllistener onscrolllistener) {monscrolllistener = Onscrolllistener;
} public interface Onscrolllistener {/** * user finger drag scroll/int scroll_state_touch_scroll = 0x0;
/** * Inertia glide rolling/int scroll_state_fling = 0x1; /** * The callback * when scrolling * @param scrolly y-direction scrolling distance * @param scroll_state current scrolling state: free scrolling or gesture drag scrolling/void
onscroll (int scrolly, int scroll_state); }
}
3.3 Use
acitivity
to scrollview
set custom scrolling listener events in
Mscrollview.setonscrolllistener (New Myscrollview.onscrolllistener ()
{
@Override public
void Onscroll ( int scrolly, int state)
{
log.d ("onscroll:", scrolly + "" + "-----------State:" + state);
if (scrolly <= mtitletopandheight)
{
tv_float.setvisibility (view.invisible);
} else
{
Tv_float.setvisibility (view.visible);
}
}
);
In this way, the display hidden by the scrolling value of the vertical method is controlled floatView
,
Tv_float.setontouchlistener (New View.ontouchlistener ()
{
@Override public
boolean Ontouch View V, Motionevent event)
{
mscrollview.ontouchevent (event);
return false;
}
});
To the suspension view
set touch monitoring, the user gestures passed to scrollView
, so that the user sliding suspension view
, the content area can also follow the scroll.
The following is the layout code
<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" match_parent "> <com.example.qike.scrol Ltitle. Myscrollview android:id= "@+id/sv_main" android:layout_width= match_parent "android:layout_height=" wrap_content "> <linearlayout android:layout_width=" match_parent "android:layout_height=" Wrap_content "and roid:orientation= "vertical" > <textview android:layout_width= "match_parent" Android:layout_hei ght= "200DP" android:gravity= "center" android:text= "product picture"/> <textview android:id= "@+id /tv_title "android:layout_width=" match_parent "android:layout_height=" 40DP "android:background=" #a 3c "android:gravity=" center "android:text=" title View "/> <textview android:layout_width="
Match_parent "android:layout_height= "600DP" android:background= "#a2bb" android:gravity= "center" android:text= "details Page "/> </LinearLayout> </com.example.qike.scrolltitle.MyScrollView> <textview android:id=" @+ Id/tv_float "android:layout_width=" match_parent "android:layout_height=" 40DP "android:background=" #a3c "an droid:gravity= "center" android:text= "title View" android:visibility= "invisible"/> </RelativeLayout>
4, the second way
The difference between this method and the first approach is that the method of getting the scroll position is different, and the method is simpler:
Mscrollview.getviewtreeobserver (). Addonscrollchangedlistener (New Viewtreeobserver.onscrollchangedlistener ()
{
@Override public
void onscrollchanged ()
{
int scrolly = mscrollview.getscrolly ();
if (scrolly <= mtitletopandheight)
{
tv_float.setvisibility (view.invisible);
} else
{
Tv_float.setvisibility (view.visible);
}
}
);
Some readers may ask why the first method is introduced, since there is such a simple way to set up listening directly. Careful you may have found that in the first method, I also callback the parameters representing the current callback state in the custom listener event, statue
because many apps do not have the option of manually dragging the scrolling and inertia scrolling. For example, Taobao product Details page, when view
the value of the middle of the boundary value top
, only the user manually drag a distance before pulling out the details of the bottom class, and the inertia of the slide will only stop there.
5, summary
The above is about the Android implementation button with up and down the top of the suspension in the fixed position of the method, I hope the content of this article for everyone to develop Android can help.