Android (Android) imitation Electric Trader app product Details page button floating effect _android

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 ();
      }
    );

postYou 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

acitivityto 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.