AndroidSlidingUpPanel控件的用法以及简单解析

EmmReibey 9年前

一个能够向上滑动的时候往上飞出一个显示区域的控件,类似于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的效果是非常不明智的。

项目地址:http://jcodecraeer.com/a/opensource/2014/1016/1782.html