底部劃出視圖,輕松實現「知乎日報β版」:SlideBottomPanel
底部劃出視圖,輕松實現「知乎日報β版」效果(效果見底部效果圖)
可以劃出的視圖可以包裹 ListView 及 ScrollView。并且 ListView 及 ScrollView 可以在第二級或第三級視圖中。
Demo apk 下載地址:SlideBottomPanelDemo 下載
How to use 如何使用
導入項目
首先下載 SlideBottomPanel,將 SlideBottomPanel 文件夾拷貝到項目的目錄下面,然后在setting.gradle文件中增加文件夾名稱
include ":SlideBottomPanel"
然后在我們需要依賴這個模塊的module中的build.gradle文件中加入如下代碼:
compile project(':SlideBottomPanel')
布局文件
導入成功后,只需要在 XML 文件中添加如下視圖(層級比較簡單 FrameLayout 的子視圖直接包含 ListView 或者 ScrollView)
下面布局只作簡單演示,復雜效果請看 Demo.
<!-- sbp_hide_panel_title 為滑動過程中及子視圖顯示是是否需要隱藏標題,默認顯示(目前只支持 FrameLayout) --> <!-- background_layout 為首頁顯示在滑塊底部的視圖(下面的示例圖中的 WebView) --> <me.next.slidebottompanel.SlideBottomPanel android:id="@+id/sbv" android:layout_width="match_parent" android:layout_height="match_parent" app:sbp_title_height_no_display="55dp" app:sbp_panel_height="380dp" app:sbp_hide_panel_title="true" app:sbp_background_layout="@layout/background_layout"> <FrameLayout android:layout_width="match_parent" android:layout_height="380dp" android:background="#ffffff" android:orientation="vertical"> <ListView android:id="@+id/list_view" android:layout_width="match_parent" android:layout_height="match_parent"/> <!-- 標題,如果需要完整顯示標題,設置 sbp_title_height_no_display="標題的高度" --> <TextView android:layout_width="match_parent" android:layout_height="55dp" text="我是標題" android:orientation="horizontal" android:gravity="center_vertical" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:background="#ffffff"/> </FrameLayout> </me.next.slidebottompanel.SlideBottomPanel>
同時也支持復雜一點的效果(知乎日報β版),子視圖 FrameLayout 中包含 ViewGroup,ViewGroup 包含 ListView 或 ScrollView
<me.next.slidebottompanel.SlideBottomPanel android:id="@+id/sbv" android:layout_width="match_parent" android:layout_height="match_parent" app:sbp_hide_panel_title="true" app:sbp_title_height_no_display="55dp" app:sbp_panel_height="380dp" app:sbp_background_layout="@layout/background_layout"> <FrameLayout android:layout_width="match_parent" android:layout_height="380dp" android:background="#ffffff" android:orientation="vertical"> <LinearLayout android:weightSum="9" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ListView android:id="@+id/list_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="8"/> <TextView android:id="@+id/tv_edit" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="0dp" android:layout_gravity="center_vertical" android:gravity="center_vertical" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:text="寫點評..."/> </LinearLayout> </FrameLayout> <TextView android:layout_width="match_parent" android:layout_height="55dp" text="我是標題" android:orientation="horizontal" android:gravity="center_vertical" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:background="#ffffff"/> </me.next.slidebottompanel.SlideBottomPanel>
代碼控制
完成布局文件后,在 Activity 中將對應的視圖填充即可。
//隱藏 SlideBottomPanel if (sbv.isPanelShowing()) { sbv.hide(); }
效果圖
動圖展示:
本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!