底部劃出視圖,輕松實現「知乎日報β版」: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 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!



