ezgif-5-1d05be3b91.gif
安卓中的商品详情页一般都是由上下二个全屏的可以滚动的view组成,当上面的试图滚到底部时,才可以拖到下面的试图，我们可以用一个Viewgroup来放置一个Scrollview和一个WebView，再对上下View进行判断是否可以继续上滑或下滑
1.定义一个GoodsDetailLayout继承Viewgroup,在构造初始化参数
2.在onInterceptTouchEvent方法中进行事件的判断,当View没有滑动到底部或顶部时,我们不对事件进行拦截,让View响应自己的滑动,否则就对事件进行拦截，根据滑动的参数自己处理事件
3.怎么知道View是否滑动到了底部或顶部呢，ViewCompat类中有一个方法
/**
* Check if this view can be scrolled vertically in a certain direction.
*
* @param view The View against which to invoke the method.
* @param direction Negative to check scrolling up, positive to check scrolling down.
* @return true if this view can be scrolled in the specified direction, false otherwise.
*
* @deprecated Use {@link View#canScrollVertically(int)} directly.
*/
@Deprecated
public static boolean canScrollVertically(View view, int direction) {
return view.canScrollVertically(direction);
}
第一个参数表示用于要判断的view，第二个参数direction,大于0时表示是否可以上滑,小于0表示是否可以下滑
4.onInterceptTouchEvent方法是这里面最为关键的一步,如果当前的屏幕是上面的View且不可以上滑时,就代表上面的View滑动到了底部,就自己来处理事件.或者当前屏幕的布局是下面的View且不可以下滑就代表下面的布局已经滑动到了顶部,就拦截事件让自己处理.
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
int y = (int) ev.getY();
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mDownY = y;
break;
case MotionEvent.ACTION_MOVE:
mMoveY = y;
mLastMoveY = mMoveY;
//第二个参数,当direction>0时，判断是否可以上滑
boolean b1 = ViewCompat.canScrollVertically(getChildAt(0), 1);
//第二个参数,当direction<0时，判断是否可以下滑
boolean b4 = ViewCompat.canScrollVertically(getChildAt(1), -1);
//
// if ((Math.abs(mMoveY - mDownY)) > mTouchSlop) {
// return true;
// }
//dy>0表示下滑
int dy = mMoveY - mDownY;
if (mCurrentIndex == UP && !b1 && dy < 0) {
return true;
}
if (mCurrentIndex == DOWN && !b4 && dy > 0) {
return true;
}
}
return false;
}
5.然后在Ontouchevent方法中对事件进行处理,规定可以滑动的范围,抬起手时根据getScrollY的值进行判断属于上面还是下面
完整代码:
public class GoodsDetailLayout extends ViewGroup {
//滑动敏感值
private int mTouchSlop;
private int mDownY;
private int mMoveY;
private int mLastMoveY;
private Scroller mScroller;
private int mCurrentIndex = UP;
public static final int UP = 1;
public static final int DOWN = 2;
public GoodsDetailLayout(Context context) {
this(context, null);
}
public GoodsDetailLayout(Context context, AttributeSet attrs) {
super(context, attrs);
ViewConfiguration viewConfiguration = ViewConfiguration.get(context);
mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(viewConfiguration);
mScroller = new Scroller(context);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
measureChild(getChildAt(0), widthMeasureSpec, heightMeasureSpec);
measureChild(getChildAt(1), widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
View child1 = getChildAt(0);
View child2 = getChildAt(1);
child1.layout(0, 0, child1.getMeasuredWidth(), child1.getMeasuredHeight());
child2.layout(0, child1.getMeasuredHeight(), child1.getMeasuredWidth(), child1.getMeasuredHeight() +
child2.getMeasuredHeight());
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
int y = (int) ev.getY();
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mDownY = y;
break;
case MotionEvent.ACTION_MOVE:
mMoveY = y;
mLastMoveY = mMoveY;
//第二个参数,当direction>0时，判断是否可以上滑
boolean b1 = ViewCompat.canScrollVertically(getChildAt(0), 1);
//第二个参数,当direction<0时，判断是否可以下滑
boolean b4 = ViewCompat.canScrollVertically(getChildAt(1), -1);
//
// if ((Math.abs(mMoveY - mDownY)) > mTouchSlop) {
// return true;
// }
//dy>0表示下滑
int dy = mMoveY - mDownY;
if (mCurrentIndex == UP && !b1 && dy < 0) {
return true;
}
if (mCurrentIndex == DOWN && !b4 && dy > 0) {
return true;
}
}
return false;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
int height =0;
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
int y = (int) event.getY();
mMoveY = y;
scrollBy(0, mLastMoveY - mMoveY);
if (getScrollY() <= 0) {
scrollTo(0, 0);
}
if (getScrollY() >= getHeight()) {
scrollTo(0, getHeight());
}
height = mCurrentIndex == UP ? getHeight() / 3 : getHeight() - getHeight() / 3;
if (getScrollY() < height) {
if(mOnViewChangeListener!=null )
mOnViewChangeListener.onDownAnim(mCurrentIndex);
}
if (getScrollY() >= height) {
if(mOnViewChangeListener!=null )
mOnViewChangeListener.onPullAnim(mCurrentIndex);
}
mLastMoveY = mMoveY;
break;
case MotionEvent.ACTION_UP:
int dy = 0;
height = mCurrentIndex == UP ? getHeight() / 3 : getHeight() - getHeight() / 3;
if (getScrollY() < height) {
dy = 0 - getScrollY();
mCurrentIndex = UP;
if(mOnViewChangeListener!=null)
mOnViewChangeListener.onUp();
}
if (getScrollY() >= height) {
dy = getHeight() - getScrollY();
mCurrentIndex = DOWN;
}
mScroller.startScroll(0, getScrollY(), 0, dy);
invalidate();
break;
}
return super.onTouchEvent(event);
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
invalidate();
}
}
public interface onViewChangeListener {
void onPullAnim(int index);
void onDownAnim(int index);
void onUp();
}
private onViewChangeListener mOnViewChangeListener;
public void setOnViewChangeListener(onViewChangeListener onViewChangeListener) {
mOnViewChangeListener = onViewChangeListener;
}
}
布局文件:
<?xml version="1.0" encoding="utf-8"?>
<com.chinamall21.mobile.animstudy.view.GoodsDetailLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/goods_detail"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="上面条目1"/>
<Button
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="上面条目2"/>
<Button
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="上面条目3"/>
<Button
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="上面条目4"/>
<Button
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="上面条目5"/>
<Button
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="上面条目6"/>
<Button
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="上面条目7"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10dp">
<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/pull"/>
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@+id/iv"
android:text="上拉加载更多"/>
</RelativeLayout>
</LinearLayout>
</ScrollView>
<!--下面-->
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webview">
</WebView>
</com.chinamall21.mobile.animstudy.view.GoodsDetailLayout>
Activity里面:
public class GoodsDetailActivity extends AppCompatActivity {
private ImageView mImageView;
private TextView mTextView;
private GoodsDetailLayout mGoodsDetailLayout;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_goods_detail);
mGoodsDetailLayout = findViewById(R.id.goods_detail);
mImageView =findViewById(R.id.iv);
mTextView =findViewById(R.id.tv);
WebView webView = findViewById(R.id.webview);
webView.loadUrl("//www.greatytc.com/p/346f37b7191f");
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webView.getSettings().setSupportMultipleWindows(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.setWebViewClient(new WebViewClient());
webView.setWebChromeClient(new WebChromeClient());
mGoodsDetailLayout.setOnViewChangeListener(new GoodsDetailLayout.onViewChangeListener() {
@Override
public void onPullAnim(int index) {
if(index == GoodsDetailLayout.UP){
mTextView.setText("松开加载更多");
mImageView.setRotation(180);
}else {
mTextView.setText("下拉回到顶部");
mImageView.setRotation(180);
}
}
@Override
public void onDownAnim(int index) {
if(index == GoodsDetailLayout.UP){
mTextView.setText("上拉加载更多");
mImageView.setRotation(0);
}else {
mTextView.setText("松开回到顶部");
mImageView.setRotation(0);
}
}
@Override
public void onUp() {
mTextView.setText("上拉加载更多");
}
});
}
}
