怎么在Android中實現(xiàn)滑動定位和吸附懸停效果

本篇文章為大家展示了怎么在Android中實現(xiàn)滑動定位和吸附懸停效果,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。

10年積累的成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設經(jīng)驗,可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你,你也不認識我。但先網(wǎng)站設計后付款的網(wǎng)站建設流程,更有茄子河免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <com.tabscroll.CustomScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="200dp"
          android:background="#ccc"
          android:gravity="center">

          <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="這里是頂部內(nèi)容區(qū)域"
            android:textSize="16sp" />

        </LinearLayout>

        <!--占位的tablayout-->
        <android.support.design.widget.TabLayout
          android:id="@+id/tablayout_holder"
          android:layout_width="match_parent"
          android:layout_height="50dp"
          android:background="#ffffff"
          app:tabIndicatorColor="@color/colorPrimary"
          app:tabMode="scrollable"
          app:tabSelectedTextColor="@color/colorPrimary" />

        <LinearLayout
          android:id="@+id/container"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:padding="16dp" />

      </LinearLayout>


      <!--實際用戶操作的tablayout-->
      <android.support.design.widget.TabLayout
        android:id="@+id/tablayout_real"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ffffff"
        android:visibility="invisible"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorPrimary" />
    </FrameLayout>


  </com.tabscroll.CustomScrollView>

</LinearLayout>

實現(xiàn)

滑動定位的功能可以參考之前的文章,這里主要是進行吸附懸停的效果。

數(shù)據(jù)初始化:

/**
 * 占位tablayout,用于滑動過程中去確定實際的tablayout的位置
 */
private TabLayout holderTabLayout;
/**
 * 實際操作的tablayout,
 */
private TabLayout realTabLayout;
private CustomScrollView scrollView;
private LinearLayout container;
private String[] tabTxt = {"客廳", "臥室", "餐廳", "書房", "陽臺", "兒童房"};

private List<AnchorView> anchorList = new ArrayList<>();

//判讀是否是scrollview主動引起的滑動,true-是,false-否,由tablayout引起的
private boolean isScroll;
//記錄上一次位置,防止在同一內(nèi)容塊里滑動 重復定位到tablayout
private int lastPos = 0;
//監(jiān)聽判斷最后一個模塊的高度,不滿一屏時讓最后一個模塊撐滿屏幕
private ViewTreeObserver.OnGlobalLayoutListener listener;

for (int i = 0; i < tabTxt.length; i++) {
  AnchorView anchorView = new AnchorView(this);
  anchorView.setAnchorTxt(tabTxt[i]);
  anchorView.setContentTxt(tabTxt[i]);
  anchorList.add(anchorView);
  container.addView(anchorView);
}
for (int i = 0; i < tabTxt.length; i++) {
  holderTabLayout.addTab(holderTabLayout.newTab().setText(tabTxt[i]));
  realTabLayout.addTab(realTabLayout.newTab().setText(tabTxt[i]));
}

一開始讓實際的tablayout 移動到占位的tablayout 處,覆蓋占位的tablayout。

listener = new ViewTreeObserver.OnGlobalLayoutListener() {
  @Override
  public void onGlobalLayout() {
    //計算讓最后一個view高度撐滿屏幕
    int screenH = getScreenHeight();
    int statusBarH = getStatusBarHeight(AliHomeMoreActivity.this);
    int tabH = holderTabLayout.getHeight();
    int lastH = screenH - statusBarH - tabH - 16 * 3;
    AnchorView anchorView = anchorList.get(anchorList.size() - 1);
    if (anchorView.getHeight() < lastH) {
      LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
      params.height = lastH;
      anchorView.setLayoutParams(params);
    }

    //一開始讓實際的tablayout 移動到 占位的tablayout處,覆蓋占位的tablayout
    realTabLayout.setTranslationY(holderTabLayout.getTop());
    realTabLayout.setVisibility(View.VISIBLE);
    container.getViewTreeObserver().removeOnGlobalLayoutListener(listener);

  }
};
container.getViewTreeObserver().addOnGlobalLayoutListener(listener);

private int getScreenHeight() {
  return getResources().getDisplayMetrics().heightPixels;
}

public int getStatusBarHeight(Context context) {
  int result = 0;
  int resourceId = context.getResources()
      .getIdentifier("status_bar_height", "dimen", "android");
  if (resourceId > 0) {
    result = context.getResources().getDimensionPixelSize(resourceId);
  }
  return result;
}

scrollview滑動

主要在滑動過程這不斷監(jiān)聽滑動的距離,再移動實際的tablayout ,當在屏幕內(nèi)時,讓其一直覆蓋在占位的tablayout 上,看上去是跟著scrollview 一起滑動的;當滑出屏幕時,實際的tablayout 不斷移動 使其相對屏幕靜止,看上去是吸附在屏幕頂部。

scrollView.setOnTouchListener(new View.OnTouchListener() {
  @Override
  public boolean onTouch(View v, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
      isScroll = true;
    }
    return false;
  }
});

//監(jiān)聽scrollview滑動
scrollView.setCallbacks(new CustomScrollView.Callbacks() {
  @Override
  public void onScrollChanged(int x, int y, int oldx, int oldy) {
    //根據(jù)滑動的距離y(不斷變化的) 和 holderTabLayout距離父布局頂部的距離(這個距離是固定的)對比,
    //當y < holderTabLayout.getTop()時,holderTabLayout 仍在屏幕內(nèi),realTabLayout不斷移動holderTabLayout.getTop()距離,覆蓋holderTabLayout
    //當y > holderTabLayout.getTop()時,holderTabLayout 移出,realTabLayout不斷移動y,相對的停留在頂部,看上去是靜止的
    int translation = Math.max(y, holderTabLayout.getTop());
    realTabLayout.setTranslationY(translation);

    if (isScroll) {
      for (int i = tabTxt.length - 1; i >= 0; i--) {
        //需要y減去頂部內(nèi)容區(qū)域的高度(具體看項目的高度,這里demo寫死的200dp)
        if (y - 200 * 3 > anchorList.get(i).getTop() - 10) {
          setScrollPos(i);
          break;
        }
      }
    }

  }
});

private void setScrollPos(int newPos) {
  if (lastPos != newPos) {
    realTabLayout.setScrollPosition(newPos, 0, true);
  }
  lastPos = newPos;
}

tablayout點擊切換

由于實際操作的是realtablayout ,所以這里只需要一直監(jiān)聽該tablayout。

//實際的tablayout的點擊切換
realTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
  @Override
  public void onTabSelected(TabLayout.Tab tab) {
    isScroll = false;
    int pos = tab.getPosition();
    int top = anchorList.get(pos).getTop();
    //同樣這里滑動要加上頂部內(nèi)容區(qū)域的高度(這里寫死的高度)
    scrollView.smoothScrollTo(0, top + 200 * 3);
  }

  @Override
  public void onTabUnselected(TabLayout.Tab tab) {

  }

  @Override
  public void onTabReselected(TabLayout.Tab tab) {

  }
});

上述內(nèi)容就是怎么在Android中實現(xiàn)滑動定位和吸附懸停效果,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目:怎么在Android中實現(xiàn)滑動定位和吸附懸停效果
當前鏈接:http://muchs.cn/article34/ishjpe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供電子商務、用戶體驗、手機網(wǎng)站建設、企業(yè)建站響應式網(wǎng)站、網(wǎng)站營銷

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設