自定义View之仿淘宝详情页

Posted 2020-08-04 Alex_MaHao

自定义View之仿淘宝详情页

转载请标明出处：
http://blog.csdn.net/lisdye2/article/details/52353071
本文出自:【Alex_MaHao的博客】
项目中的源码已经共享到github，有需要者请移步【Alex_MaHao的github】

基本介绍

现在的一些购物类App例如淘宝，京东等，在物品详情页，都采用了类似分层的模式，即上拉加载详情的方式，节省了空间，使用户的体验更加的舒适。只要对于某个东西的介绍很多时，都可以采取这样的方式，第一个页面显示必要的，第二个页面显示详细信息。

在之前写项目的时候，曾经写过一个类似淘宝详情页的UI效果，如下：

仔细分析这种UI效果，其实很简单，就是两个页面，垂直摆放，同时两个页面之间过渡时，加上一层特殊处理，及当第二个页面显示多少时，松开手指时复原或者直接显示第二个页面。

根据这种特殊的UI效果进行实现封装，最终的效果如下：

能够实现页面的切换，当滑动到第二个页面不足显示区域的三分之一时，则松开手指时会还原，如果超过三分之一，则会跳到第二个页面。

同时实现了一些事件分发的处理，能够嵌入按钮，ViewPager等控件。

使用方式

编写xml文件，添加控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.mahao.alex.customviewdemo.taobao.DetailVerticalView
        android:id="@+id/detailVerticalView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1000dp"
            android:background="#f0f">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="test" />
        </LinearLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="1000dp"
            android:background="#ff0" />

    </com.mahao.alex.customviewdemo.taobao.DetailVerticalView>

</RelativeLayout>

在实现中，一定要将控件的高度设置为match_parent，因为在代码中需要获取显示区域的高度，用以判断是否复原和跳转页面。

在该控件中添加两个布局控件。

在Activity中查找控件并设置一些监听。

public class DetailVerticalActivity extends AppCompatActivity {

    private DetailVerticalView v;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_taobao_detail);
        // 查找控件
        v = (DetailVerticalView) findViewById(R.id.detailVerticalView);
        // 设置滚动监听的回调
        v.setScrollChangeListener(new DetailVerticalView.ScrollChangeListener() {

            @Override
            public void scrollY(int y) {
                // y轴滑动偏移量的回调
            }

            @Override
            public void onScollStateChange(int type) {
                // 滑动到那个页面状体的变化
                if(DetailVerticalView.TOP == type){
                    Toast.makeText(DetailVerticalActivity.this, "1", Toast.LENGTH_SHORT).show();
                }else if(DetailVerticalView.BOTTOM==type){
                    Toast.makeText(DetailVerticalActivity.this, "2", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

    public void test(View view){
        Toast.makeText(getApplicationContext(),"点击",Toast.LENGTH_SHORT).show();
    }
}

实现原理

在实现过程中，主要考虑以下几点问题：

• 如何布置两个页面的控件位置。

解决方式是使自定义View实现ViewGroup，重写onMeasure和onLayout方法，对子View进行布局。

• 如何判断两个页面何时跳转，

解决方式：获取View显示区域高度的三分之一，如果超过，则显示第二个页面，否则
则恢复原状，不显示第二个页面。

• 如何实现滑动的过渡。

解决方式：使用Scroller进行滑动的控制。

• 判断的一些边界的问题。

滑动到底部和滑动到顶部时，等不可再滑，需要对边界进行配置。

• 事件分发的处理。

对于点击等事件，利用onInterceptTouchEvent() 对相关事件进行拦截。

代码实现

创建对象，初始化控件

/**
 *
 * 仿淘宝详情页
 * Created by alex_mahao on 2016/8/29.
 */
public class DetailVerticalView extends ViewGroup {

    // 滑动到顶部的状态
    public static final int TOP = 1;

    // 滑动到底部的状态
    public static final int BOTTOM = 2;

    public static final String TAG = "DetailVerticalView";

    /**
     * 屏幕高度
     */
    private int mScreenHeight;

    /**
     * 手指上次触摸事件的y轴位置
     */
    private int mLastY;

    /**
     * 点击时y轴的偏移量
     */
    private int mScrollY;

    /**
     * 滚动控件
     */
    private Scroller mScroller;

    /**
     * 最小移动距离判定
     */
    private int mTouchSlop;

    /**
     * 滑动结束的偏移量
     */
    private int mEnd;

    /**
     * 初始按下y轴坐标
     */
    private int mDownStartY;

    /**
     * 记录当前y轴坐标
     */
    private int y;

    /**
     * 控件的高度
     */
    private int mHeight;

    /**
     * 监听的回调
     */
    private ScrollChangeListener scrollChangeListener;

    public DetailVerticalView(Context context) {
        super(context, null);
    }

    public DetailVerticalView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    /**
     * 初始化方法
     */
    private void init() {

        // 创建滑对象，以便滑动时使用
        mScroller = new Scroller(getContext());

        // 获取系统的最小距离
        mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(ViewConfiguration.get(getContext()));
    }

    //....
}

一些变量的定义后面会有，此处不提。

mTouchSlop，系统默认的最小距离。当手指滑动的大小大于该值时，则认为是滑动，不在是点击，后面会通过与该值比对进行事件拦截。

测量自身的大小和两个页面控件的大小

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 获取显示区域的高度
        mScreenHeight = MeasureSpec.getSize(heightMeasureSpec);

        // 遍历子View
        int count = getChildCount();
        // 控件的高度
        mHeight = 0;
        for (int i = 0; i < count; i++) {
            View childView = getChildAt(i);
            // 测量子View 高度
            int childHeight = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
            measureChild(childView, widthMeasureSpec, childHeight);
            mHeight = getChildAt(i).getMeasuredHeight() + mHeight;
        }
        // 设置控件的高度
        setMeasuredDimension(widthMeasureSpec, MeasureSpec.makeMeasureSpec(mHeight, MeasureSpec.EXACTLY));

    }

设置自定义View的高度为match_parent，就是为了获取显示区域的高度，从此处可以看出。

测量子View的高度，便于后面的布局使用。在中间，会看到我对childView的高度设置了值childHeight，该值的目的是告诉子View,我给你一个很大的值，你看着自己需要多少自己设置就行，及AT_MOST模式

在最后的时候，设置当前控件的高度，为两个页面控件的高度之和。

对两个页面控件进行布置onLayout()方法

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

        int childCount = getChildCount();
        int childHeight = 0;
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() != View.GONE) {
                // 确定位置
                child.layout(l, childHeight, r, childHeight + child.getMeasuredHeight());
                childHeight = +child.getMeasuredHeight();
            }
        }

    }

这一段没什么难度，看着理解即可。

处理事件分发

 @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        // 获取当前触摸位置Y轴坐标
        y = (int) ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 第一次按下时的Y轴坐标
                mDownStartY = (int) ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                // 如果大于mTouchSlop，认为是滑动，则不再让子View处理事件
                if (Math.abs(y - mDownStartY) > mTouchSlop) {
                    // 因为是在onTouchEvent中处理，如果子View处理过事件，
                    // 则该控件的onTouchEvent()不再有DOWN事件，在这里获取一些值
                    mLastY = y;
                    mScrollY = getScrollY();
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return false;
    }

对于事件的传递，流程为 父：onInterceptTouchEventr - > 子：onTouchEvent() -> 父：onTouchEvent(),当然这里只是写了必要的流程。如果子：onTouchEvent()返回true,则当前控件就无法捕获触摸事件，那么滑动就无从处理了。所以，在此处，我们判断垂直滑动大于最小滑动距离时，就把事件给截断，不在交给子控件处理。

同时，如果子控件处理了一些事件，那么父控件的onTouchEvent()中，将不在有DOWN事件，那么我们需要先获取一次值，在打断子View的时候。

滑动相关的处理

@Override
    public boolean onTouchEvent(MotionEvent event) {
        y = (int) event.getY();
        mScrollY = getScrollY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 如果通过事件拦截获取到的触摸，则直接就为Move方法
                mLastY = y;
                mScrollY = getScrollY();
                break;

            case MotionEvent.ACTION_MOVE:
                int dy = mLastY - y;

                Log.i(TAG,"dy:"+dy+"-"+"mLastY:"+mLastY+"-"+"mScrolly:"+mScrollY);

                if(mScrollY+dy<0){
                    // 滑动到顶部，不可再滑动
                    scrollTo(0,0);
                }else if(mScrollY+dy>getMeasuredHeight()-mScreenHeight){
                    //底部时
                    scrollTo(0,getMeasuredHeight()-mScreenHeight);
                }else{
                    scrollBy(0, dy);
                    mLastY = y;
                }

                break;
            case MotionEvent.ACTION_UP:

                // 当前偏移量是
                int absScroll = mScrollY+mScreenHeight-getChildAt(0).getMeasuredHeight();

                if(absScroll<0||absScroll>mScreenHeight){
                    // 第一个页面未滑到底部，不做操作，如果absScroll>屏幕的高度，则完全滚动
                    // 不做任何滚动操作
                }else if(absScroll>mScreenHeight/3){
                    // 监听的回调
                    if(scrollChangeListener!=null){
                        scrollChangeListener.onScollStateChange(BOTTOM);
                    }
                    // 松开时显示第二个页面
                    mScroller.startScroll(0, mScrollY, 0, mScreenHeight-absScroll);
                }else if(absScroll<mScreenHeight/3){
                    // 回到第一个页面
                    if(scrollChangeListener!=null){
                        scrollChangeListener.onScollStateChange(TOP);
                    }
                    mScroller.startScroll(0,mScrollY,0,-absScroll);
                }
                break;
        }
        postInvalidate();

        return true;
    }

该段是整个自定义View中最重要的方法，总结来说干了两件事情：

• ACTION_MOVE中，处理触摸滑动的事件，及手指在屏幕滑动时的相关处理。

边界处理，判断滑动时，如果到顶部和底部，则不再滑动，否则进行相关的滑动。

• ACTION_UP：手指离开屏幕时，对是否需要跳转进行判断，如果需要跳转，则跳转。

在手指离开时，判断当前页面的显示量，偏移量+显示区域的高度-第一个控件的高度=第二个控件显示的高度。

如果显示的高度小于0，则表示还在第一个页面，第二个页面显示都没显示，不做任何处理。

如果显示的高度大于显示区域的高度，则表示第二个页面完全显示了，不做任何处理。

否则，如果显示的高度大于显示区域的1/3，则跳转到第二个页面，小于，则恢复到第一个页面。

可以看到通过mScroller.startScroll()实现页面的滑动跳转，使用该方式，需要重写另一个方法

   @Override
    public void computeScroll() {
        super.computeScroll();
        //判断scroller滚动是否完成
        if (mScroller.computeScrollOffset()) {
            // 这里调用View的scrollTo()完成实际的滚动
            scrollTo(0, mScroller.getCurrY());
            //刷新试图
            postInvalidate();
        }
    }

最后一步，设置一些必要的监听回调，和辅助方法

  /**
     * 监听的接口定义
     */
    public interface  ScrollChangeListener{
        void scrollY(int y);
        void onScollStateChange(int type);
    }

    /**
     * 设置监听
     * @param scrollChangeListener
     */
    public void setScrollChangeListener(ScrollChangeListener scrollChangeListener) {
        this.scrollChangeListener = scrollChangeListener;
    }

    /**
     * 回到第一个页面的顶部
     */
    public void scrollToTop(){
        mScroller.startScroll(0, getScrollY(), 0, -getScrollY());
        scrollChangeListener.onScollStateChange(TOP);
        postInvalidate();

    }