android仿制应用宝的应用详情页

最近看到了应用宝的软件详情页，感觉不明觉厉的样子，

于是粗略的仿制了一下，发现做的还算是可以出来见人吧

实现方法很简单，就是通过重写ScrollView的分发事件，详情请看代码。

public class MultiScrollView extends ScrollView{Scroller mScroller;ViewGroup mChid;private Toolbar mToolbar;View destineView;View firstChid;View secondChid;View thirdChid;float startY;public MultiScrollView(Context context) {this(context,null,0);}public MultiScrollView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public MultiScrollView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mScroller = new Scroller(context);}//设置toolbarpublic void setToolbar(Toolbar toolbar){this.mToolbar = toolbar;}//设置listview,public void setDestineView(View view){this.destineView = view;}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {super.onLayout(changed, l, t, r, b);mChid = (ViewGroup) getChildAt(0);//判断scrollview是否有三个孙view,是的话将第三个（默认认为是listview）调整高度if(mChid != null && mChid.getChildCount() == 3 && (getHeight() - mChid.getChildAt(1).getMeasuredHeight() != mChid.getChildAt(2).getMeasuredHeight())){firstChid = mChid.getChildAt(0);secondChid = mChid.getChildAt(1);thirdChid = mChid.getChildAt(2);//listview高度调整为listview高度＋导航条高度＋toolbar高度 = scrollview高度(getHeight),这样scrollview最多刚好滚动到除了导航条＋toolbar，其余的都是listviewint listviewHeight = getHeight() - secondChid.getMeasuredHeight() - (mToolbar == null ?  0 : mToolbar.getMeasuredHeight());thirdChid.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, listviewHeight));}}@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);//设置背景颜色渐变if(mToolbar!= null && firstChid != null){int alpha = t * 255/ (firstChid.getMeasuredHeight()/2) ;mToolbar.getBackground().setAlpha(Math.min(255,alpha));}}//父类Scrollview在onInterceptTouchEvent实现滑动逻辑，故重写此方法@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {if(destineView == null || mChid == null || mChid.getChildCount() != 3){return super.onInterceptTouchEvent(ev);}//listview可向上滚动,将点击事件分发给listviewif(destineView.canScrollVertically(-1)){return false;}switch (ev.getAction()){case MotionEvent.ACTION_DOWN:startY = ev.getY();break;case MotionEvent.ACTION_MOVE:float offsetY = ev.getY() - startY;//向下滚动if(offsetY < 0){//scrollview刚好滚动到除了导航条＋toolbar，其余的都是listview的时候，在向下滚动的时候就滚动listview，// 注意getScrollY不会随着touch move而改变，滚动的时候getScrollY()一直保持不变;所以你从其他位置滚动到临界值的时候不会分发事件，从临界值再次滚动是才会符合条件if(getScrollY() >= mChid.getChildAt(0).getMeasuredHeight()-(mToolbar == null ? 0 : mToolbar.getMeasuredHeight())){return false;}}//向上滚动else if(offsetY > 0){//listview滚动到头了，再向上滚动，会自动滚动到scrollview顶部(0,0);if(getScrollY() == firstChid.getMeasuredHeight()-(mToolbar == null ? 0 : mToolbar.getMeasuredHeight())){//缓慢的滚动到顶部^^^^^^mScroller.startScroll(0,getScrollY(),0,-getScrollY(),1000);}}break;}return super.onInterceptTouchEvent(ev);}@Overridepublic void computeScroll() {if(mScroller.computeScrollOffset()){int currY = mScroller.getCurrY();scrollTo(0,currY);invalidate();}}
}

上面Scrollview，我将他的孙view定为3个，第一个view算是banner页，第二个是导航条，第三个是包裹listview的viewpager,因为scrollview下的listview设置高度有点蛋疼，所以就在onLayout中设置它的高度，最终的第三个view的高度为scrollview的高度减去toolbar和导航栏的高度。
然后在onInterceptTouchEvent处理事件，返回false时将事件交给它的子控件处理，大体就是这一些逻辑，

对布局文件有一些要求，要求只能用三个孙控件，布局文件有一点需要小注意

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.example.tian.myapplication.listview.Main2Activity"><com.example.tian.myapplication.github.MultiScrollView
        android:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/scrollView"><!--android:focusable="true"android:focusableInTouchMode="true"这里添加这两个，否则scrollview初始化完会自动滚动到viewpager那里--><LinearLayout
            android:layout_width="match_parent"android:layout_height="match_parent"android:focusable="true"android:focusableInTouchMode="true"android:orientation="vertical"><!--三层三层三层三层三层三层三层三层三层三层三层 view--><RelativeLayout
                android:layout_width="match_parent"android:layout_height="200dp"android:background="#28c8f4"><ImageView
                    android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/ic_launcher"android:id="@+id/imageview"android:layout_centerInParent="true"/><TextView
                    android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/imageview"android:layout_marginTop="10dp"android:text="HELLO WOELD"android:textSize="20sp"android:textColor="#ff0000"android:layout_centerHorizontal="true"/></RelativeLayout><RelativeLayout
                android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.design.widget.TabLayout
                    xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/tablayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabTextColor="#1bccef"/></RelativeLayout><android.support.v4.view.ViewPager
                android:layout_width="match_parent"android:layout_height="300dp"android:background="#777777"android:id="@+id/viewPager"/></LinearLayout></com.example.tian.myapplication.github.MultiScrollView><android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/toolbar"android:layout_height="50dp"android:minHeight="50dp"android:layout_width="match_parent"android:background="#fe6d18"/></RelativeLayout>

最后附上一些微不住道的代码
http://download.csdn.net/detail/recall2012/9402757

android仿制应用宝的应用详情页相关推荐

Android 仿淘宝京东商品详情页阻力翻页效果
原文链接:http://code.taobao.org/p/android-example/diff/46/trunk/%E5%95%86%E5%9F%8E%E8%AF%A6%E6%83%85/src ...
android 自定义ViewGroup实现仿淘宝的商品详情页
最近公司在新版本上有一个需要, 要在首页添加一个滑动效果, 具体就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 如下图 X东的商品详情页,如果用户继续向上拉的话就进入商品图文描述界面: 刚 ...
自己定义ViewGroup实现仿淘宝的商品详情页
近期公司在新版本号上有一个须要. 要在首页加入一个滑动效果, 详细就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 例如以下图 X东的商品详情页,假设用户继续向上拉的话就进入商品图文描写叙述 ...
Android仿京东、天猫商品详情页
前言前面在介绍控件TabLayout控件和CoordinatorLayout使用的时候说了下实现京东.天猫详情页面的效果,今天要说的是优化版,是我们线上实现的效果,首先看一下效果: 项目结构分析首 ...
c店banner的一个宽高度范围，详情页的宽高度是。淘宝天猫的详情页,看尺寸的快捷键,banner的设计规则和技巧
c店banner的一个宽高度范围一般都是设置宽度为950px,高度的安全范围是614及以内详情页的宽度是750px 淘宝天猫的详情页是790px 看尺寸的快捷键ctrl+alt+i 首先主体的话应 ...
淘宝爆款详情页制作的几个方法(理论)
淘宝爆款详情页制作的几个方法如果你是运营淘宝的店主,抑或是准备从事这个行业的,这个文章将会对你有很大帮助. 转载于:https://www.cnblogs.com/lanren2017/p/7746 ...
vue 实现类似淘宝的商品详情页的商品展示
vue 实现类似淘宝的商品详情页的商品展示利用vue和swiper实现缩略图控制 / Swiper互相控制具体需求描述: 图片大图自动轮播展示,下面的缩略图跟着变化,点击小图切换到对应的大图,大图 ...
淘宝/Tmall商品详情页视频数据接口（视频数据，销量数据，sku属性数据，页面上有的数据均可以拿到，支持高并发）
Tmall商品详情页视频数据接口(视频数据,销量数据,sku属性数据,页面上有的数据均可以拿到,支持高并发)接口代码教程如下: 1.公共参数名称类型必须描述 key String 是调用ke ...
Android 自定义控件轻松实现360软件详情页
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 转载请标 ...

android仿制应用宝的应用详情页

android仿制应用宝的应用详情页相关推荐

最新文章

热门文章