底部劃出視圖,輕松實現「知乎日報β版」:SlideBottomPanel

jopen 9年前發布 | 26K 次閱讀 Android開發 移動開發 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();
    }

效果圖

SlideBottomPanel SlideBottomPanel

動圖展示:

知乎效果 ListView 效果

項目主頁:http://www.baiduhome.net/lib/view/home/1439215560864

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!