快捷導(dǎo)航

Android實(shí)現(xiàn)高德地圖首頁(yè)效果(上)

更新時(shí)間：2023年08月30日 09:02:43 作者：似曾相識(shí)2022

這篇文章主要為大家詳細(xì)介紹了基于Android實(shí)現(xiàn)高德地圖首頁(yè)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

今天給大家?guī)?lái)一個(gè)非常熟悉的效果——高德首頁(yè)

咱們?cè)挷欢嗾f(shuō)，直接上效果圖：

一般用上這個(gè)效果的都和地圖有關(guān)，看上去還是挺酷眩的。但如果從來(lái)沒(méi)了解過(guò)的同學(xué)要自己實(shí)現(xiàn)這個(gè)效果還是不容易的。值得慶幸的是，谷歌提供了現(xiàn)成的設(shè)計(jì)庫(kù)：CoordinatorLayout結(jié)合CoordinatorLayout.Behavior。

首先，xml中根布局需要是CoordinatorLayout，其子view需要是一個(gè)可滑動(dòng)的View，咱們這里直接使用NestedScrollView。

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/shape_white"
    app:behavior_hideable="false"
    app:behavior_peekHeight="300dp"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
        <TextView
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:layout_gravity="center_horizontal"
           android:layout_marginTop="20dp"
           android:drawablePadding="10dp"
           android:lineSpacingExtra="20dp"
           android:gravity="center"
           android:text="我是內(nèi)容\n我是內(nèi)容\n我是內(nèi)容\n我是內(nèi)容\n我是內(nèi)容\n我是內(nèi)容\n我是內(nèi)容\n                我是內(nèi)容\n" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

這里需要注明下：

滑動(dòng)控件中需要添加layout_behavior屬性，這里默認(rèn)使用BottomSheetBehavior。
behavior_hideable：代表是否隱藏
behavior_peekHeight：代表滑動(dòng)控件初始展示的高度

完成xml編寫后直接運(yùn)行得到如下效果：

看似好像差不多，但只能全部顯示或者只顯示我們?cè)O(shè)置的300dp高。其實(shí)，BottomSheetBehavior內(nèi)部還提供了很多屬性：

isFitToContents：是否填充整個(gè)內(nèi)容
expandedOffset：展開后距離頂部的高度
halfExpandedRatio：半展開占比
setState：設(shè)置當(dāng)前狀態(tài)：隱藏、半展開、全展開等等
setPeekHeight：設(shè)置初始顯示高度

原來(lái)還可以半展開，咱們直接配置上全套效

bottomSheetBehavior?.let {
   it.isFitToContents = false //展開后開度填充Parent的高度
    //setFitToContents 為false時(shí)，展開后距離頂部的位置（Parent會(huì)以PaddingTop填充）
    it.expandedOffset =  ImmersionBar.getStatusBarHeight(this) + 40//頂部距離
    it.halfExpandedRatio = 0.5f //半展開占比
    it.isHideable = false
    it.setPeekHeight(150, true)//有動(dòng)畫
    it.setState(BottomSheetBehavior.STATE_HIDDEN) 
}

到這里其實(shí)已經(jīng)可以滿足基本要求了，整體動(dòng)畫體驗(yàn)也是不錯(cuò)的，非常流暢。但我們的目標(biāo)還沒(méi)有達(dá)到，在之前有寫過(guò)監(jiān)聽滑動(dòng)控件實(shí)現(xiàn)狀態(tài)欄顏色切換，那么現(xiàn)在我們是否也可以利用類似的原理來(lái)實(shí)現(xiàn)滑動(dòng)過(guò)程中的一些效果呢？

答案是肯定的。下篇咱們繼續(xù)講解BottomSheetBehavior滑動(dòng)監(jiān)聽下的效果實(shí)現(xiàn)，最終完成高德首頁(yè)效果。

到此這篇關(guān)于Android實(shí)現(xiàn)高德地圖首頁(yè)效果(上)的文章就介紹到這了,更多相關(guān)Android實(shí)現(xiàn)高德地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: