滑 - 向上的時間可以飛起來控制元件的顯示區域。分類似至play music有效。

該控制元件在主介面中有一個例如以下圖紅色箭頭所指的底部觸發區域

該區域點選的時候被隱藏在下方的內容將網上漂移到頂部,直到被隱藏的內容全然擋住原來的佈局。可是這個觸發區域仍然存在,如圖。

當被隱藏區域全然顯示。這時再次點選觸發區域(或者是通過下滑的手勢)將恢復到最初的狀態。

一般再未點選的時候。這個觸發區域顯示一些被隱藏內容的簡要資訊。

這就是AndroidSlidingUpPanel的效果了。

AndroidSlidingUpPanel的實現是使用ViewdragHelper實現的。事實上ViewdragHelper在surport v4中已經能夠直接使用了。可是作者直接將ViewdragHelper的全部原始碼放到了自己的專案中。

以下是AndroidSlidingUpPanel庫的程式碼結構:

當中SlidingUpPanelLayout是一個繼承自ViewGroup的類。

用法:

.將com.sothree.slidinguppanel.SlidingUpPanelLayout作為根節點放到你activity的layout檔案裡。

.layout必須設定gravity屬性為top
或者bottom

.確保SlidingUpPanelLayout有兩個子view,一個是主介面。另外一個是向上滑動的介面。

.SlidingUpPanelLayout的width須要設定成match_parent,height能夠是match_parent或者是固定值。

.預設情況下。整個介面都能夠對應滑動和點選事件。你能夠通過呼叫setDragView來約束可滑動的View範圍。

很多其它的使用請參考demo。

<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:panelHeight="68dp"
sothree:shadowHeight="4dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Main Content"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top"
android:text="The Awesome Sliding Up Panel"
android:textSize="16sp" />
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

專案給出的demo中當向上滑動的時候actionbar也是跟著慢慢隱藏的。這樣的效果必須使用ActionBarOverlay模式:

<style name="AppTheme">
<item name="android:windowActionBarOverlay">true</item>
</style>

同一時候這樣的情況你須要為主區域的佈局設定margintop為actionbar的高度:

?

android:attr/actionBarSize

還須要在程式碼中動態的改變actionbar:

public void setActionBarTranslation(float y) {
// Figure out the actionbar height
int actionBarHeight = getActionBarHeight();
// A hack to add the translation to the action bar
ViewGroup content = ((ViewGroup) findViewById(android.R.id.content).getParent());
int children = content.getChildCount();
for (int i = 0; i < children; i++) {
View child = content.getChildAt(i);
if (child.getId() != android.R.id.content) {
if (y <= -actionBarHeight) {
child.setVisibility(View.GONE);
} else {
child.setVisibility(View.VISIBLE);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
child.setTranslationY(y);
} else {
AnimatorProxy.wrap(child).setTranslationY(y);
}
}
}
}
}

最後要說的是,AndroidSlidingUpPanel在某些方面有點類似與垂直的ViewPager。可是不同點也非常多。假設你想用ViewPager來實現AndroidSlidingUpPanel的效果是非常不明智的。

專案地址:

https://github.com/umano/AndroidSlidingUpPanel



版權宣告:本文博主原創文章,部落格,未經同意,不得轉載。