Android實(shí)現(xiàn)高德地圖首頁效果(上)
今天給大家?guī)硪粋€(gè)非常熟悉的效果——高德首頁
咱們話不多說,直接上效果圖:
一般用上這個(gè)效果的都和地圖有關(guān),看上去還是挺酷眩的。但如果從來沒了解過的同學(xué)要自己實(shí)現(xiàn)這個(gè)效果還是不容易的。值得慶幸的是,谷歌提供了現(xiàn)成的設(shè)計(jì)庫: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)行得到如下效果:
看似好像差不多,但只能全部顯示或者只顯示我們設(shè)置的300dp高。其實(shí),BottomSheetBehavior內(nèi)部還提供了很多屬性:
- isFitToContents:是否填充整個(gè)內(nèi)容
- expandedOffset:展開后距離頂部的高度
- halfExpandedRatio:半展開占比
- setState:設(shè)置當(dāng)前狀態(tài):隱藏、半展開、全展開等等
- setPeekHeight:設(shè)置初始顯示高度
原來還可以半展開,咱們直接配置上全套效
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)還沒有達(dá)到,在之前有寫過監(jiān)聽滑動(dòng)控件實(shí)現(xiàn)狀態(tài)欄顏色切換,那么現(xiàn)在我們是否也可以利用類似的原理來實(shí)現(xiàn)滑動(dòng)過程中的一些效果呢?
答案是肯定的。下篇咱們繼續(xù)講解BottomSheetBehavior滑動(dòng)監(jiān)聽下的效果實(shí)現(xiàn),最終完成高德首頁效果。
到此這篇關(guān)于Android實(shí)現(xiàn)高德地圖首頁效果(上)的文章就介紹到這了,更多相關(guān)Android實(shí)現(xiàn)高德地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android開發(fā)中應(yīng)用程序分享功能實(shí)例
這篇文章主要介紹了Android開發(fā)中應(yīng)用程序分享功能,結(jié)合實(shí)例形式分析了基于Intent實(shí)現(xiàn)Android程序分享功能的技巧,需要的朋友可以參考下2016-02-02探討:android項(xiàng)目開發(fā) 統(tǒng)籌兼顧 需要考慮的因素
本篇文章是對基于android項(xiàng)目開發(fā) 統(tǒng)籌兼顧 需要考慮的因素進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06Android?DialogFragment使用之底部彈窗封裝示例
這篇文章主要為大家介紹了Android?DialogFragment使用之底部彈窗封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09Android實(shí)現(xiàn)藍(lán)牙客戶端與服務(wù)器端通信示例
這篇文章主要介紹了Android實(shí)現(xiàn)藍(lán)牙客戶端與服務(wù)器端通信示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-01-01Android連接服務(wù)器端的Socket的實(shí)例代碼
這篇文章主要介紹了Android連接服務(wù)器端的Socket的實(shí)例代碼,需要的朋友可以參考下2017-05-05詳解flutter中常用的container layout實(shí)例
這篇文章主要為大家介紹了詳解flutter中常用的container layout實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Android AsyncTask 后監(jiān)聽異步加載完畢的動(dòng)作詳解
這篇文章主要介紹了Android 使用AsyncTask 后監(jiān)聽異步加載完畢的動(dòng)作的相關(guān)資料,需要的朋友可以參考下2016-11-11