自定义View之仿淘宝详情页

自定义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