快捷導(dǎo)航

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

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

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

今天給大家?guī)硪粋€非常熟悉的效果——高德首頁

咱們話不多說，直接上效果圖：

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

首先，xml中根布局需要是CoordinatorLayout，其子view需要是一個可滑動的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>

這里需要注明下：

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

完成xml編寫后直接運行得到如下效果：

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

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

原來還可以半展開，咱們直接配置上全套效

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