App之上下滑動UIScrollview隱藏或者顯示導航欄

lvxiangan發表於2018-04-17

iOS版：

一、好多App都有上下滑動UIScrollview隱藏或者顯示導航欄,在這裡我說說我覺得有用的幾種方法:

1.iOS8之後系統有一個屬性hidesBarsOnSwipe

Objective-C程式碼如下

[objc]view plain copy
self.navigationController.hidesBarsOnSwipe = YES;  

swift程式碼如下

[objc]view plain copy
self.navigationController?.hidesBarsOnSwipe = true  

當使用以上程式碼時,可以達到效果

2.使用UIScrollViewDelegate一個代理方法

Objective-C程式碼如下

[objc]view plain copy
- (void)scrollViewDidScroll:(UIScrollView *)scrollView  
{  
    //scrollView已經有拖拽手勢，直接拿到scrollView的拖拽手勢  
    UIPanGestureRecognizer *pan = scrollView.panGestureRecognizer;  
    //獲取到拖拽的速度 >0 向下拖動 <0 向上拖動  
    CGFloat velocity = [pan velocityInView:scrollView].y;  
      
    if (velocity <- 5) {  
        //向上拖動，隱藏導航欄  
        [self.navigationController setNavigationBarHidden:YES animated:YES];  
    }else if (velocity > 5) {  
        //向下拖動，顯示導航欄  
        [self.navigationController setNavigationBarHidden:NO animated:YES];  
    }else if(velocity == 0){  
        //停止拖拽  
    }  
}  

swift程式碼如下

[objc]view plain copy
func scrollViewDidScroll(scrollView: UIScrollView) {  
          
        let pan = scrollView.panGestureRecognizer  
        let velocity = pan.velocityInView(scrollView).y  
        if velocity < -5 {  
            self.navigationController?.setNavigationBarHidden(true, animated: true)  
        } else if velocity > 5 {  
            self.navigationController?.setNavigationBarHidden(false, animated: true)  
        }  
          
    }  

這種效果最好

3.使用UIScrollViewDelegate另一個代理方法

Objective-C程式碼如下

[objc]view plain copy
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset</span>  

[objc]view plain copy
{  
    if (velocity.y > 0.0) {  
        [self.navigationController setNavigationBarHidden:YES animated:YES];  
    } else if (velocity.y < 0.0){  
        [self.navigationController setNavigationBarHidden:NO animated:YES];  
    }  
}  

swift程式碼如下

[objc]view plain copy
func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {  
        if velocity.y > 0 {  
            self.navigationController?.setNavigationBarHidden(true, animated: true)  
        } else if velocity.y < 0 {  
            self.navigationController?.setNavigationBarHidden(false, animated: true)  
        }  
    }  

二、總結：三種方法都可以,我個人覺得第二種方法效果最好,大家可以學習借鑑一下

Android版：

對於移動端，為了留出更多的空間來顯示內容，我們在向上滑動檢視的時候，總是希望，頂部工具欄和底部工具欄可以隨著我們向上滑動的手勢而自動隱藏。而當我們瀏覽完內容，向下滑動檢視的時候，又希望工具欄可以自動顯示出來響應我們操作。這是一種很好的互動模式，現在我們來看看這種互動怎麼實現。

佈局很簡單，上部工具欄和下部工具欄，還有中間的一個scrollView，裡面是一張圖片。

<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"
     tools:context=".MainActivity">

    <include
        android:id="@+id/top_menu"
        layout="@layout/top_menu"/>
    <ScrollView
        android:id="@+id/main_content"
        android:layout_below="@+id/top_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="夏季女裝爆款"
                android:textColor="#ffffff"
                android:background="#000000"
                android:textSize="20sp" />
            <ImageView
                android:id="@+id/photo_pic"
                android:layout_below="@+id/title"
                android:adjustViewBounds="true"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/clothes"/>
            <RelativeLayout
                android:layout_below="@+id/photo_pic"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:orientation="horizontal">
                <TextView
                    android:id="@+id/item_price"
                    android:layout_width="80dp"
                    android:layout_height="48dp"
                    android:background="#fd4101"
                    android:textSize="20sp"
                    android:textColor="#ffffff"
                    android:gravity="center"
                    android:text="¥987"/>
                <TextView
                    android:padding="5dp"
                    android:layout_toRightOf="@+id/item_price"
                    android:layout_width="match_parent"
                    android:layout_height="48dp"
                    android:textSize="16sp"
                    android:textColor="#333333"
                    android:text="夏季女裝爆款夏季女裝爆款夏季女裝爆款夏季女裝爆款"/>
            </RelativeLayout>
        </RelativeLayout>

    </ScrollView>

    <include
        android:id="@+id/bottom_menu"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        layout="@layout/bottom_menu_buy_now"/>

</RelativeLayout>

其中頂部工具欄和底部工具欄都是一些簡單的佈局，此處只給出頂部工具欄的佈局，具體可以檢視原始碼。

<?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="48dp"
    android:background="#ffffff"
    android:gravity="center_vertical">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >


        <Button
            android:layout_marginLeft="8dp"
            android:id="@+id/nav_search"
            android:layout_alignParentLeft="true"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_centerInParent="true"
            android:background="@drawable/nav_search_select"/>
       <LinearLayout
           android:layout_toRightOf="@+id/nav_search"
           android:layout_toLeftOf="@+id/nav_message"
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:gravity="center"
           android:layout_centerInParent="true"
           android:orientation="horizontal">
           <TextView
               android:layout_marginLeft="4dp"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:gravity="center"
               android:text="工具欄"
               android:textSize="20sp"
               android:textColor="#262626"/>

       </LinearLayout>
        <Button
            android:id="@+id/nav_message"
            android:layout_marginRight="8dp"
            android:layout_alignParentRight="true"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_centerInParent="true"
            android:background="@drawable/nav_message_select"/>


    </RelativeLayout>

</RelativeLayout>

這個佈局裡面，頂部工具欄和底部工具欄是重合的。我們可以在onCreate 方法裡設定底部工具欄的 topMargin 的屬性值來讓底部工具欄和底部對齊。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mScrollView = (ScrollView) findViewById(R.id.main_content);
        mTopMenu = (ViewGroup) findViewById(R.id.top_menu);
        mBottomMenu = (ViewGroup) findViewById(R.id.bottom_menu);
        marginTop = DisplayUtil.dip2px(this, TOOLBARHEIGHT);
        mBottomOriginalTopMargin = DisplayUtil.getScreenHeight(this) - DisplayUtil.dip2px(this, TOOLBARHEIGHT) - DisplayUtil.getStatusBarHeight(this);
        ((RelativeLayout.LayoutParams) mBottomMenu.getLayoutParams()).topMargin += mBottomOriginalTopMargin;
        mBottomMenu.requestLayout();
        initView();
    }

這樣，通過DisplayUtil這個工具類計算出來底部工具欄和底部對齊需要的margin值，然後把這個值賦給LayoutParams，然後通知檢視重新佈局就好。

同樣通過改變topMargin值來實現檢視組的向上或者向下運動，實現動畫效果。主要思路就是監聽ScrollView的滑動方法，然後根據上滑或者下滑的距離來相應改變兩個工具欄的topMargin值，initView方法如下。

 private void initView(){
        mScrollView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()){
                    case MotionEvent.ACTION_DOWN:
                        mFirstY = (int) event.getY();
                        break;
                    case MotionEvent.ACTION_MOVE:
                        mCurrentY = (int) event.getY();
                        if (mCurrentY - mFirstY > 0){
                            direction = true; //向下滑動
                        }else if (mFirstY - mCurrentY > 0){
                            direction = false; //向上滑動
                        }
                        if (!direction){
                            RelativeLayout.LayoutParams top = (RelativeLayout.LayoutParams) mTopMenu.getLayoutParams();
                            RelativeLayout.LayoutParams bottom = (RelativeLayout.LayoutParams) mBottomMenu.getLayoutParams();
                            if (top.topMargin > -marginTop){
                                top.topMargin += mCurrentY - mFirstY;
                                mTopMenu.requestLayout();
                                bottom.topMargin += mFirstY - mCurrentY;
                                mBottomMenu.requestLayout();
                            }else{
                                top.topMargin = -marginTop;
                                mTopMenu.requestLayout();
                                bottom.topMargin = (mBottomOriginalTopMargin + marginTop);
                                break;
                            }

                        }else if (direction){
                            RelativeLayout.LayoutParams top = (RelativeLayout.LayoutParams) mTopMenu.getLayoutParams();
                            RelativeLayout.LayoutParams bottom = (RelativeLayout.LayoutParams) mBottomMenu.getLayoutParams();
                            if (top.topMargin < 0){
                                top.topMargin += mCurrentY - mFirstY;
                                mTopMenu.requestLayout();
                                bottom.topMargin += mFirstY - mCurrentY;
                                mBottomMenu.requestLayout();
                            }
                            else{
                                top.topMargin = 0;
                                mTopMenu.requestLayout();
                                bottom.topMargin = mBottomOriginalTopMargin;
                                mBottomMenu.requestLayout();
                                break;
                            }

                        }
                        break;
                    case MotionEvent.ACTION_UP:
                        break;
                }
                return false;
            }
        });
    }

最後的效果，如下所示。
這裡寫圖片描述

原始碼地址:https://github.com/futureshine/AutoHideToolBar

Android 顯示、隱藏狀態列和導航欄
2019-03-26
Android
ElementUI側邊欄導航選單隱藏顯示問題
2019-04-09
UI
直播app系統原始碼，底部彈框顯示，底部導航隱藏
2023-11-13
APP原始碼
導航欄的隱藏問題
2018-10-16
Ubuntu 20.04 自動隱藏左側導航欄
2024-06-10
Ubuntu
IOS對於導航欄的顯示和隱藏不統一的解決方法
2018-12-26
iOS
在 Laravel 中動態隱藏 / 顯示 API 欄位
2018-03-02
LaravelAPI
僅2步實現拜拜漢堡導航欄效果~ 全新底部導航互動(滑動隱藏)
2019-03-04
mac顯示隱藏檔案，取消顯示隱藏檔案
2020-10-21
Mac
jqgrid動態顯示，隱藏指定列
2024-06-08
直播系統平臺原始碼隱藏虛擬導航欄，禁止下拉通知欄，禁止上滑出虛擬導航欄
2021-12-03
原始碼
fltk-rs 隱藏標題欄但顯示工作列圖示
2024-05-20
iOS 隱藏&顯示tabBar
2019-03-16
iOStabBar
Mac顯示和隱藏“隱藏檔案”命令
2024-03-27
Mac
成品直播原始碼推薦，uni底部導航欄隱藏單個
2023-11-13
原始碼
FloatingActionButton在RecycleView中滑動隱藏顯示
2018-10-15
View
jQuery動畫的顯示與隱藏效果
2021-07-19
jQuery動畫
jQuery動畫的顯示與隱藏效果！
2021-07-20
jQuery動畫
直播app系統原始碼，Fragment 顯示隱藏監聽
2023-03-29
APP原始碼Fragment
jQuery 效果 – 隱藏和顯示
2022-07-22
jQuery
Mac顯示/不顯示隱藏檔案教程！
2021-11-05
Mac
網頁佈局------導航欄下標縮放顯示
2024-05-18
網頁
如何在 macOS Monterey 或更早版本中隱藏或顯示Dock欄
2021-11-09
Mac
excel隱藏的部分如何顯示出來 excel裡面怎麼顯示隱藏部分
2022-03-04
Excel
SAP Fiori 應用 Adapt UI 動態顯示或者隱藏的技術設計細節解析
2022-07-19
APTUI
MACOS 如何顯示隱藏檔案
2018-12-19
Mac
區塊的顯示和隱藏
2024-07-10
【macOS】顯示/隱藏指定檔案
2021-07-05
Mac
OSX中隱藏和顯示[隱藏檔案]的命令列
2018-10-20
命令列
Vscode導航欄開啟多個檔案換行顯示
2024-06-06
VSCode
JavaScript實現HTML導航欄下拉選單[懸浮顯示]
2020-11-24
JavaScriptHTML
app直播原始碼，Android EditText的游標的顯示和隱藏
2021-11-04
APP原始碼Android
Mac如何移動隱藏刪除mac選單欄圖示
2020-04-21
Mac
steam隱藏的遊戲怎麼顯示出來 steam隱藏顯示遊戲方法介紹
2022-09-14
遊戲
直播平臺原始碼，隱藏app圖示並不在最近執行中顯示
2023-11-20
原始碼APP
CSS——文字超出隱藏顯示省略號
2020-06-25
CSS
JavaScript 設定div顯示與隱藏
2020-02-23
JavaScript
mac 隱藏檔案顯示快捷鍵
2024-08-25
Mac

App之上下滑動UIScrollview隱藏或者顯示導航欄

相關文章