안 드 로 이 드(android)모방 전자상거래 app 상품 상세 페이지 버튼 유동 효과

1.효과 도 는 다음 과 같다.

이 효 과 는 사용자 체험 이 여전히 멋 있 습 니 다.오늘 우 리 는 이 효 과 를 어떻게 실현 하 는 지 설명 하 겠 습 니 다.
2.분석
이해 하기 편리 하도록 그림 을 그 려 분석 하 다.

그림 에서 보 듯 이 전체 페이지 는 네 부분 으로 나 뉜 다.
     1.부상 내용,floatView     2.상단 내용,headView     3.중간 내용,부상 내용 과 동일,middleView     4.상품 상세 설명 페이지,detailView페이지 내용 의 높이 가 화면 을 초과 하기 때문에Scrollview로 스크롤 을 실현 하고 부상view은scrollview과 같은 등급 으로 한 프레임 의 구조 나 상대 적 인 구조 에 있 습 니 다.
Y 방향의 스크롤 거 리 는 중간 내용middleView보다 작 을 때middleView당연히 이 페이지 가 위로 미 끄 러 지면 서 사라 집 니 다.우 리 는 부상view을 표시 하여middleView상단 에 걸 려 있 는 효 과 를 실현 합 니 다.
Y 방향 스크롤 거리 가 중간 내용middleView보다 크 면 상단 의 거 리 를 수용 할 때 부유view를 숨 기 면 됩 니 다.
분석 을 통 해 우 리 는scrollview의 굴 러 가 는 거리 와middleView꼭대기 까지 의 높이 만 알 면 된다 는 것 을 발견 했다.이로써 복잡 한 상호작용 효 과 를 두 개의 간단 한 api 로 바 꾸 었 다.
3.첫 번 째 방법 실현
3.1 middleView 의 부모 용기 상단 까지 의 거 리 를 가 져 옵 니 다.

 tv_title.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener()
    {
      @Override
      public void onGlobalLayout()
      {
        mTitleTopAndHeight = tv_title.getTop();

        tv_title.getViewTreeObserver().removeGlobalOnLayoutListener(this);
      }
    });

activityoncreate()에서 view 의getTop()방법 으로 view 의 높이 를 직접 얻 으 면 0 으로 돌아 갑 니 다.이 는 이때 view 가 화면 에 그리 지 않 았 기 때문에 우 리 는 위의 방법 으로 view 에 감청 을 설정 하여 얻 을 수 있 습 니 다.여러 번 그 릴 수 있 기 때문에 감청 사건 을 제거 하 는 것 을 기억 합 니 다.
다음 코드 역시 가 져 올 수 있 습 니 다:

   tv_title.post(new Runnable()
    {
      @Override
      public void run()
      {
        mTitleTopAndHeight = tv_title.getTop();
      }
    });

post방법 을 이용 하여 작업 을 대기 열 에 넣 고 시스템 레이아웃 이 완 료 된 후에 대기 열 에 있 는 이 벤트 를 실행 하면 정확 한view값 을 얻 을 수 있 습 니 다.
3.2 수직 방향 스크롤 거리 가 져 오기top의 부모 클래스Scrollview에서 내용 변화 방법View이 있 습 니 다.이 방법 은onScrollChanged(),의 외부 에서 호출 할 수 없 지만 내부 에 서 는protect스크롤 할 때 이 방법 을 실행 하기 때문에scrollview이MyScrollView에서 스크롤 거 리 를 외부 로 전달 하 는 것 을 사용자 정의 합 니 다.
사용자 정의 scrollview 전체 코드 는 다음 과 같 습 니 다.

public class MyScrollView extends ScrollView
{
  private OnScrollListener mOnScrollListener;

  /**
   *           
   */
  private boolean mIsTouch = false;

  public MyScrollView(Context context)
  {
    this(context, null);
  }

  public MyScrollView(Context context, AttributeSet attrs)
  {
    this(context, attrs, 0);
  }

  public MyScrollView(Context 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 MotionEvent.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
  {
    /**
     *         
     */
    int SCROLL_STATE_TOUCH_SCROLL = 0x0;

    /**
     *       
     */
    int SCROLL_STATE_FLING = 0x1;

    /**
     *       
     *
     * @param scrollY   Y       
     * @param scroll_state       ：            
     */
    void onScroll(int scrollY, int scroll_state);
  }
}

3.3 사용onScrollChanged()에서acitivity사용자 정의 스크롤 감청 이 벤트 를 설정 하면 됩 니 다.

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

이렇게 수직 방법의 스크롤 값 을 통 해scrollview의 디 스 플레이 숨 김 을 제어 합 니 다.

    tv_float.setOnTouchListener(new View.OnTouchListener()
    {
      @Override
      public boolean onTouch(View v, MotionEvent event)
      {
        mScrollView.onTouchEvent(event);
        return false;
      }
    });

부유floatView에 터치 감청 을 설정 하고 사용자 의 손짓 을view에 전달 하면 사용자 가 미끄러져 부유scrollView할 때 내용 구역 도 따라 굴 러 갈 수 있다.
다음은 레이아웃 코드 입 니 다.

<?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.scrolltitle.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"
      android:orientation="vertical">

      <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:gravity="center"
        android:text="    "/>

      <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#a3c"
        android:gravity="center"
        android:text="  view"/>

      <TextView
        android:layout_width="match_parent"
        android:layout_height="600dp"
        android:background="#a2bb"
        android:gravity="center"
        android:text="    "/>
    </LinearLayout>
  </com.example.qike.scrolltitle.MyScrollView>

  <TextView
    android:id="@+id/tv_float"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="#a3c"
    android:gravity="center"
    android:text="  view"
    android:visibility="invisible"/>

</RelativeLayout>

4.두 번 째 방식
이 방법 과 첫 번 째 방식 의 차 이 는 스크롤 위 치 를 얻 는 방법 이 다 르 기 때문에 이 방법 은 더욱 간단 하 다.

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

이런 간단 한 방법 으로 감청 을 직접 설치 하 는데 왜 첫 번 째 방법 을 소개 하 느 냐 는 독자 들 의 질문 이 있 을 수 있다.세심 한 당신 은 첫 번 째 방법 에서 제 가 사용자 정의 감청 사건 에서 현재 반전 상 태 를 나타 내 는 매개 변수view를 되 돌 렸 다 는 것 을 알 게 되 었 을 것 입 니 다.많은 app 은 사용자 가 수 동 으로 스크롤 과 관성 스크롤 을 끌 어 당 기 는 처리 가 불가능 하기 때 문 입 니 다.예 를 들 어 타 오 바 오 상품 상세 페이지 는 경계 값 중간statue의view값 에 이 르 렀 을 때 사용자 가 수 동 으로 거 리 를 끌 어야 바닥 의 상세 한 모습 을 끌 어 낼 수 있 고 관성 이 미 끄 러 지면 멈 출 수 밖 에 없다.
5.총화
이상 은 안 드 로 이 드 실현 버튼 이 상하 로 굴 러 가면 서 고정 위치 에 떠 있 는 방법 에 관 한 것 입 니 다.본 논문 의 내용 이 안 드 로 이 드 개발 에 도움 이 되 기 를 바 랍 니 다.