上拉檢視詳情和下拉隱藏詳情
阿新 • • 發佈：2019-01-31
專案商品詳情頁的需求，實現上拉顯示和下拉隱藏詳情的功能，最終效果圖如圖：
實現思路：上下通過判斷兩個ScrollView的滑動位置及觸控事件發生的位置，對他們進行隱藏和顯示。
上拉部分，由於內部包裹了大量帶有點選事件的元件，故需要在上拉條上進行拖動，否則會衝突無法判斷。這部分是通過對其包裹內容動態的呼叫layout方法來實現拖拽效果；
下拉部分，通過對下拉頭動態設定marginTop的值，來改變其高度，並達到隱藏和顯示的效果。
核心程式碼
//上拉元件
@Bind(R.id.xscrollview)
XScrollView mXscrollview;
@Bind 佈局檔案
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/rlContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/nc_good_bg">
<!--上部ScrollView包裹上部內容-->
<ScrollView
android:id="@+id/xscrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_below="@+id/tvLoading"
android:visibility="visible">
<LinearLayout
android:id="@+id/scrollContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--省略部分-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="@color/app_white"
android:drawableLeft="@drawable/arrow_top"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/arrow_top"/>
<TextView
android:id="@+id/tvUpScroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/app_white"
android:gravity="center"
android:paddingBottom="20dp"
android:paddingLeft="4dp"
android:paddingTop="20dp"
android:text="上拉檢視圖文詳情"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<ScrollView
android:id="@+id/svBottomDetails"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone">
<RelativeLayout
android:id="@+id/scrollContainer2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible">
<!--給marginTop一個高度的負值，隱藏下拉的頭-->
<LinearLayout
android:id="@+id/llDownScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/pulldown_head_margin"
android:background="@color/app_white"
android:gravity="center"
android:orientation="horizontal"
android:visibility="visible">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/arrow_down"/>
<TextView
android:id="@+id/tvDownScroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/app_white"
android:gravity="center"
android:paddingBottom="20dp"
android:paddingLeft="4dp"
android:paddingTop="20dp"
android:text="下拉收起圖文詳情"/>
</LinearLayout>
<LinearLayout
android:id="@+id/llTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/llDownScroll"
android:background="@color/app_white"
android:orientation="horizontal"
android:padding="@dimen/dp8"
android:visibility="visible">
<!--省略部分-->
</LinearLayout>
<WebView
android:id="@+id/wvImg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/llTabs"/>
</RelativeLayout>
</ScrollView>
</RelativeLayout>重寫的ScrollView，可獲取最大滾動高度
//滾動到底部時，clampedY變為true，其餘情況為false，通過回撥將狀態傳出去即可。
@Override
protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
if (scrollY != 0 && null != mOnScrollToBottomListener) {
mOnScrollToBottomListener.onScrollBottomListener(clampedY);
}
}重寫後的ViewPager，可禁止水平滑動
public class MyViewPager extends ViewPager {
public MyViewPager(Context context) {
super(context);
}
public MyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
//預設為true
private boolean isCanScroll = true;
//通過設定為false，禁止ViewPager的水平滑動
public void setCanScroll(boolean isCanScroll) {
this.isCanScroll = isCanScroll;
}
@Override
public void scrollTo(int x, int y) {
if (isCanScroll) {
super.scrollTo(x, y);
}
}
}Activity中控制標題顯示
/*******************控制標題顯示*********************/
@Override
public void onShow(boolean showDetails) {
this.showDetails = showDetails;
if (showDetails){
setCommonHeader("圖文詳情");
tabGoods.setVisibility(View.GONE);
//禁止ViewPager水平滑動
vpFragment.setCanScroll(false);
}else {
setCommonHeader("");
//顯示TabLayout
tabGoods.setVisibility(View.VISIBLE);
//恢復ViewPager水平滑動
vpFragment.setCanScroll(true);
}
}