Android 自定义控件轻松实现360软件详情页
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/43649913，本文出自：【张鸿洋的博客】

1、概述

最近有不少朋友私聊问应用宝、360软件助手之类的软件详情页怎么做，刚好，最近有时间就模仿360软件助手详情页给大家做个Demo，供大家参考。嗯，关于实现呢，我写了两种方式：

1、ScrollView内嵌软件介绍+ViewPager+ViewPager中是ScrollView，这种方式呢，纯原生，没有涉及到自定义控件，但是这样嵌套呢，涉及到测量以及事件的冲突处理，大家可以自己尝试去做一下，想像起来蛮容易的，做起来其实还是挺费劲的，代码我会给出，核心代码不多，大家自行参考。本文将重点分析第二种方式。

2、将做外层的ScrollView改为了自定义的一个控件，继承自LinearLayout，叫做StickyNavLayout，这里感谢小七的命名，同时本方式感谢二群暖暖提供的源码。

最后看下效果图，第一张是360的，第二张是我们的：

360：

擦，别问我为什么这么模糊，尽力了。。。

我们的效果图：

2、使用方式

上面我们也说了，之所以有第二种方式，完全是为了考虑使用的容易度。

1、自定义id资源文件

values/ids_sticky_nav_Llayout.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <item name="id_stickynavlayout_topview" type="id"/>    <item name="id_stickynavlayout_viewpager" type="id"/>    <item name="id_stickynavlayout_indicator" type="id"/>    <item name="id_stickynavlayout_innerscrollview" type="id"/></resources>

定义了几个id资源，主要是为了方便使用了，供声明布局时使用的，看名字应该能猜出来吧，猜不出来没事，接下来我就贴布局文件了。这个其实不属于使用方式了，但是下文会见到，所以提前贴出来。

2、布局文件

<com.zhy.view.StickyNavLayout xmlns:tools="http://schemas.android.com/tools"    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <RelativeLayout        android:id="@id/id_stickynavlayout_topview"        android:layout_width="match_parent"        android:layout_height="300dp"        android:background="#4400ff00" >        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:text="软件介绍"            android:textSize="30sp"            android:textStyle="bold" />    </RelativeLayout>    <com.zhy.view.SimpleViewPagerIndicator        android:id="@id/id_stickynavlayout_indicator"        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="#ffffffff" >    </com.zhy.view.SimpleViewPagerIndicator>    <android.support.v4.view.ViewPager        android:id="@id/id_stickynavlayout_viewpager"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#44ff0000" >    </android.support.v4.view.ViewPager></com.zhy.view.StickyNavLayout>

最外层是我们的自定义的控件StickyNavLayout，然后是顶部内容区域，Vp的指示器，ViewPager。按照效果图，去写就ok，注意部分id使用我们预设定的id资源。因为我们的StickyNavLayout需要通过id找到该控件，去进行一些计算。

然后在我们的MainActivity中，对ViewPager进行初始化即可。

3、MainActivity

package com.zhy.sample.StickyNavLayout;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import com.zhy.view.SimpleViewPagerIndicator;public class MainActivity extends FragmentActivity{	private String[] mTitles = new String[] { "简介", "评价", "相关" };	private SimpleViewPagerIndicator mIndicator;	private ViewPager mViewPager;	private FragmentPagerAdapter mAdapter;	private TabFragment[] mFragments = new TabFragment[mTitles.length];	@Override	protected void onCreate(Bundle savedInstanceState)	{		super.onCreate(savedInstanceState);		setContentView(R.layout.activity_main);		initViews();		initDatas();		initEvents();	}	private void initEvents()	{		mViewPager.setOnPageChangeListener(new OnPageChangeListener()		{			@Override			public void onPageSelected(int position)			{			}			@Override			public void onPageScrolled(int position, float positionOffset,					int positionOffsetPixels)			{				mIndicator.scroll(position, positionOffset);			}			@Override			public void onPageScrollStateChanged(int state)			{			}		});	}	private void initDatas()	{		mIndicator.setTitles(mTitles);		for (int i = 0; i < mTitles.length; i++)		{			mFragments[i] = (TabFragment) TabFragment.newInstance(mTitles[i]);		}		mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())		{			@Override			public int getCount()			{				return mTitles.length;			}			@Override			public Fragment getItem(int position)			{				return mFragments[position];			}		};		mViewPager.setAdapter(mAdapter);		mViewPager.setCurrentItem(0);	}	private void initViews()	{		mIndicator = (SimpleViewPagerIndicator) findViewById(R.id.id_stickynavlayout_indicator);		mViewPager = (ViewPager) findViewById(R.id.id_stickynavlayout_viewpager);	}}

没有什么复杂的代码，主要就是初始化我们的Vp；

对了这个指示器我是临时写的，也算一个自定义控件吧，主要就是跟随Vp一起移动，详细写法请参考：Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI，只是把三角形改成了下划线，非本文重点，你可以暂时忽略。

我们的Vp中每个页面为一个Fragment，Fragment的代码我们就不贴了，布局就是ScrollView为根布局，内部随意填充，具体可参考源码。

介绍完了用法有木有一点小激动，基本按照常规去写布局就ok，效果自动实现。

4、Fragment及其布局

贴一下我们的Fragment代码：

package com.zhy.sample.StickyNavLayout;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;public class TabFragment extends Fragment{	public static final String TITLE = "title";	private String mTitle = "Defaut Value";	private TextView mTextView;	@Override	public void onCreate(Bundle savedInstanceState)	{		super.onCreate(savedInstanceState);		if (getArguments() != null)		{			mTitle = getArguments().getString(TITLE);		}	}	@Override	public View onCreateView(LayoutInflater inflater, ViewGroup container,			Bundle savedInstanceState)	{		View view = inflater.inflate(R.layout.fragment_tab, container, false);		mTextView = (TextView) view.findViewById(R.id.id_info);		mTextView.setText(mTitle);		return view;	}	public static TabFragment newInstance(String title)	{		TabFragment tabFragment = new TabFragment();		Bundle bundle = new Bundle();		bundle.putString(TITLE, title);		tabFragment.setArguments(bundle);		return tabFragment;	}}

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@id/id_stickynavlayout_innerscrollview"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:scrollbars="none" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#eee"        android:orientation="vertical"        android:padding="5dp" >        <TextView            android:id="@+id/id_info"            android:layout_width="match_parent"            android:layout_height="50dp"            android:background="#ffffffff"            android:gravity="center" >        </TextView>	//省略了无数控件    </LinearLayout></ScrollView>

没撒说的，let's go 。

3、StickyNavLayout源码剖析

1、构造

public class StickyNavLayout extends LinearLayout{	private View mTop;	private View mNav;	private ViewPager mViewPager;		private int mTopViewHeight;	private ScrollView mInnerScrollView;	private boolean isTopHidden = false;	private OverScroller mScroller;	private VelocityTracker mVelocityTracker;	private int mTouchSlop;	private int mMaximumVelocity, mMinimumVelocity;		private float mLastY;	private boolean mDragging;			public StickyNavLayout(Context context, AttributeSet attrs)	{		super(context, attrs);		setOrientation(LinearLayout.VERTICAL);		mScroller = new OverScroller(context);		mVelocityTracker = VelocityTracker.obtain();		mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();		mMaximumVelocity = ViewConfiguration.get(context)				.getScaledMaximumFlingVelocity();		mMinimumVelocity = ViewConfiguration.get(context)				.getScaledMinimumFlingVelocity();	}	@Override	protected void onFinishInflate()	{		super.onFinishInflate();		mTop = findViewById(R.id.id_stickynavlayout_topview);		mNav = findViewById(R.id.id_stickynavlayout_indicator);		View view = findViewById(R.id.id_stickynavlayout_viewpager);		if (!(view instanceof ViewPager))		{			throw new RuntimeException(					"id_stickynavlayout_viewpager show used by ViewPager !");		}		mViewPager = (ViewPager) view;	}

ok，首先看下成员变量，和我们的变量的初始化，mTop、mNav、mViewPager代表我们布局的三大块了，初始化在onFinishInflate中完成，可以看到直接通过我们的id资源读取就ok。接下来还有些mScroller、mVelocityTracker、mTouchSlop、mMaximumVelocity、mMinimumVelocity、mLastY、mDragging，不用说大家都能想到这是和移动相关的，OverScroller是个辅助类，用于自定移动时帮我们处理掉数学的计算部分。mVelocityTracker相关几个变量，当然是计算什么时候需要自动移动；mTouchSlop帮我区别用户是点击还是拖拽。android中封装了很多常量在ViewConfiguration中，大家有兴趣可以了解他，之所以使用这些常量不仅仅是说，省的我们自己去定义，而是为了和系统的行为保持一致。

看完了构造以后，由于我们使用的是LinearLayout，直接setOrientation(LinearLayout.VERTICAL);也就不必去layout了，控件都自定垂直排列了。那么我们在onMeasure中还需要做些处理。

2、onMeasure

@Override	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)	{		super.onMeasure(widthMeasureSpec, heightMeasureSpec);		ViewGroup.LayoutParams params = mViewPager.getLayoutParams();		params.height = getMeasuredHeight() - mNav.getMeasuredHeight();	}	@Override	protected void onSizeChanged(int w, int h, int oldw, int oldh)	{		super.onSizeChanged(w, h, oldw, oldh);		mTopViewHeight = mTop.getMeasuredHeight();	}

主要是去设置ViewPager的高度，给它一个固定值，ViewPager自己在测量自己的时候，你要是不给它固定值，可能测量结果与你的预期会差距很大。比如你给它设置个WRAP_CONTENT，你希望他去计算孩子的高度去设置自己的，那么你就想多了。大家可以看下ViewPager测量的源码：

 @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        // For simple implementation, our internal size is always 0.        // We depend on the container to specify the layout size of        // our view.  We can't really know what it is since we will be        // adding and removing different arbitrary views and do not        // want the layout to change as this happens.        setMeasuredDimension(getDefaultSize(0, widthMeasureSpec),                getDefaultSize(0, heightMeasureSpec));   }   public static int getDefaultSize(int size, int measureSpec) {        int result = size;        int specMode = MeasureSpec.getMode(measureSpec);        int specSize = MeasureSpec.getSize(measureSpec);        switch (specMode) {        case MeasureSpec.UNSPECIFIED:            result = size;            break;        case MeasureSpec.AT_MOST:        case MeasureSpec.EXACTLY:            result = specSize;            break;        }        return result;    }

可以看到，对于AT_MOST和EXACTLY两种模式，都是直接读取父类的传入的测量值，也就是说，他不会去测量自己孩子的高度。然后如果模式是：UNSPECIFIED，那么高度直接为0呢。这里大家如果做过这个例子，应该能遇到这种情况，ScrollView中放ViewPager时，测量模式就是UNSPECIFIED，那么Vp直接不显示，原因就在这里。

扯远了，回来，我们继续。

我们设置为Vp的值以后，理论上来说，我们的显示已经正常了，控件都按照我们的预期显示了，但是，但是什么呢？我们现在在自定义的LinearLayout，那么移动是不是应该我们自己去写。

移动的代码很简单，想必大家都知道，直接拿到dx，然后scrollBy就行了。

3、onTouchEvent

	@Override	public boolean onTouchEvent(MotionEvent event)	{		mVelocityTracker.addMovement(event);		int action = event.getAction();		float y = event.getY();		switch (action)		{		case MotionEvent.ACTION_DOWN:			if (!mScroller.isFinished())				mScroller.abortAnimation();			mVelocityTracker.clear();			mVelocityTracker.addMovement(event);			mLastY = y;			return true;		case MotionEvent.ACTION_MOVE:			float dy = y - mLastY;			if (!mDragging && Math.abs(dy) > mTouchSlop)			{				mDragging = true;			}			if (mDragging)			{				scrollBy(0, (int) -dy);				mLastY = y;			}			break;		case MotionEvent.ACTION_CANCEL:			mDragging = false;			if (!mScroller.isFinished())			{				mScroller.abortAnimation();			}			break;		case MotionEvent.ACTION_UP:			mDragging = false;			mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);			int velocityY = (int) mVelocityTracker.getYVelocity();			if (Math.abs(velocityY) > mMinimumVelocity)			{				fling(-velocityY);			}			mVelocityTracker.clear();			break;		}		return super.onTouchEvent(event);	}

比较简单哈，我们因为只需要判断y方向的，所以down的时候记录下y的值，然后move的时候拿到dy，直接去进去scrollBy就好，当然我们在整个过程中.addMovement(event);所以，up的时候，我们得到v方向的velocityY，调用fling进行移动。

还好fling的核心代码OverScroller给我们实现了，so nice。

大家应该清楚，我们使用Scroller这样的辅助类时，它们帮我们完成的，知识数学方面的计算，至于自动我们还是需要自己去干的。

那怎么干，在哪干？这个无非就是重写computeScroll方法，在里面判断scroller是否结束，如果没有，则scrollTo一下，最后记得invalidate，相关代码：

public void fling(int velocityY)	{		mScroller.fling(0, getScrollY(), 0, velocityY, 0, 0, 0, mTopViewHeight);		invalidate();	}	@Override	public void scrollTo(int x, int y)	{		if (y < 0)		{			y = 0;		}		if (y > mTopViewHeight)		{			y = mTopViewHeight;		}		if (y != getScrollY())		{			super.scrollTo(x, y);		}		isTopHidden = getScrollY() == mTopViewHeight;	}	@Override	public void computeScroll()	{		if (mScroller.computeScrollOffset())		{			scrollTo(0, mScroller.getCurrY());			invalidate();		}	}

ok，到此，我们的onTouchEvent搞定了~~but，别得意，为什么这么说呢？因为你完成的，知识当然View对于上下拖动的处理。大家别忘了，我们当前的StickyNavLayout内部可是有一个ScrollView的，那么根据事件的转发机制，这个内部的ScrollView肯定会处理上下拖动这种情况的，也就是我们的事件会被它拦截。

4、onInterceptTouchEvent

好了，接下来我们要处理拦截，对于拦截，我们要清楚的知道什么时候应该拦截，什么时候不需要，当前我们的例子：

1、如果我们的顶部view只要没有完全隐藏，那么直接拦截上下的拖动；

2、还有个需要拦截的地方，就是当顶部的view彻底隐藏了，我们现在内部的sc应该可以上下滑动了，但是如果sc滑动到顶部再往下的时候，此时又该拦截了，我们需要把顶部view可以下滑出来。

分析完成以后，看代码，这叫一个酸爽：

@Override	public boolean onInterceptTouchEvent(MotionEvent ev)	{		int action = ev.getAction();		float y = ev.getY();		switch (action)		{		case MotionEvent.ACTION_DOWN:			mLastY = y;			break;		case MotionEvent.ACTION_MOVE:			float dy = y - mLastY;			getCurrentScrollView();			if (Math.abs(dy) > mTouchSlop)			{				mDragging = true;				if (!isTopHidden						|| (mInnerScrollView.getScrollY() == 0 && isTopHidden && dy > 0))				{					return true;				}			}			break;		}		return super.onInterceptTouchEvent(ev);	}

ok，move中判断上述两种情况，o了。

源码点击下载，如有bug，欢迎提出。

群号：423372824

博主部分视频已经上线，如果你不喜欢枯燥的文本，请猛戳（初录，期待您的支持）：

视频目录地址：本人录制的视频教程

47楼u013211506昨天 00:46: 弘扬，猴赛高~~~~o(>_<)o ~~

46楼wzlyd1前天 18:14: 猴赛雷，loader哥第一

45楼qq_15721753前天 18:14: 前段时间要实现的效果跟这个几乎一模一样，最后被事件冲突弄得放弃了，得好好学习下

44楼chenssy前天 18:12: mark！n最近也在学习Android，

43楼wubaopeng前天 17:20: 赞

42楼haogangshang前天 16:59: 我说看着这帅哥这么熟悉，原来在慕课网上的学习视频，是大神做的，看着你的视频，我感觉移动开发越来越有意思了，赞一个！

41楼weifule20前天 15:37: 厉害

40楼u010458342前天 11:37: 先占个位先

39楼elsdnwn前天 11:05: 弘扬，猴赛高~~~~o(>_<)o ~~

38楼u012790030前天 10:55: 前排，好厉害

37楼u013216593前天 00:43: 猴赛雷

36楼lxmxrx前天 00:31: 再次膜拜鸿洋大神

35楼BlueArvin3天前 22:14: 源码下载不了啊

34楼txfyteen3天前 22:11: 谢谢分享啊，自定义控件写的很有逻辑，很受用

33楼longzw04天前 15:17: 博主你好，自己有个不情之请，不知道博主是否可以做一个高仿QQ5.0版本上的那个消息提示的红点（那个红点可以拖拽消失）的文章。我个人认为是个自定义的View做成的，可是自己仔细画图计算，尝试自定义，但没有出来效果。自己也一直在看你的博客，受益颇多。所以希望您能看到我的留言，能给些启发或者最好能以此写篇技术文章来实现。

32楼singwhatiwanna4天前 14:18: 看完以后，这酸爽

31楼bizhiguang4天前 10:23: 感谢楼主的辛苦工作。有2个问题希望能改进一下：n1. 当上面的header滑出屏幕后，listview不能继续向上滚动，需要手指抬起之后，再次按下才能继续滑动，这样操作就不连贯连贯了。n2. 比较复杂，我试着描述一下。在viewpager的一页中，把header推出屏幕，然后把listview滑到中间的一个位置。然后viewpager滑到另一页，在该页中把header向下拉出来。再回到之前的第一页，这个时候listview是不能滑动的，只能滑动伸缩header，这样是不对的吧。应该是listview可以向下滑动，向上的滑动的时候会推动header。是否描述清楚了？谢谢。n这个可以做参考，但是似乎还是不够完美nhttps://github.com/chenupt/DragTopLayout

30楼ThOrz4天前 09:47: 先评后看

29楼YoungEdison4天前 22:57: 楼主，用的什么软件录屏？

28楼liuxiangjia5天前 18:47: 必须mark~~

27楼jiankeufo5天前 17:41: 顶一个

26楼u0105062165天前 17:21: 先顶下,在慢慢品味文章！

25楼gaolei12015天前 15:05: 亲，知道软件更新，本来100M的app，更新时可以是几兆，好像只是更新了一部分请问是什么技术

24楼haifeng_java5天前 15:00: 鸿洋你为何这么牛逼

23楼qq_250629175天前 14:32: 赞!

22楼u0119623665天前 12:06: 分享一下录屏软件吧。

21楼u0101343825天前 11:54: mTopVeiw上加上onclick事件后会影响拖动。请问有什么好的办法可以解决吗？

20楼baidu_259153335天前 11:42: 大神

19楼whqet5天前 11:03: 赞！

18楼qibin05065天前 11:00: come on saonianmen!

17楼soledadzz5天前 10:58: 您的文章已被推荐到CSDN首页，感谢您的分享。

16楼fangzhibin47125天前 10:58: 下载地址打不开呀，大神

15楼u0112543085天前 10:39: 前排，好屌，好快。

14楼pansong291PS5天前 10:34: 请问那个图片是用什么做到的？谢谢

13楼longzw05天前 10:33: 博主你好，自己有个不情之请，不知道博主是否可以做一个高仿QQ5.0版本上的那个消息提示的红点（那个红点可以拖拽消失）的文章。我个人认为是个自定义的View做成的，可是自己仔细画图计算，尝试自定义，但没有出来效果。自己也一直在看你的博客，受益颇多。所以希望您能看到我的留言，能给些启发或者最好能以此写篇技术文章来实现。

12楼u0122079135天前 10:02: 翔哥的东西越来越简单，明了了，感谢翔哥的移动分享。

11楼u0147254405天前 09:50: 先评后看

10楼u0113709335天前 09:48: LZ，太猛了，why？

9楼jijiaxin19895天前 09:43: 屌的要爆炸，伤及无辜了，我要报警了

8楼ItJavawfc5天前 09:39: 楼主，怎么上传大于2M的.gif图片，求解。

7楼wander1129005天前 09:36: 非常不错

6楼u0119623665天前 09:36: 翔哥研究一下UC浏览器新建页面时的动画吧，感觉很新颖。把activity像画廊一样的展示出来了

5楼luoxianfeng895天前 09:32: 博主，你好，就这个应用，如果在像华为P6这种有系统虚拟键的手机上，如果虚拟键打开关闭，如何让viewpager的高度自适应？

4楼luoxianfeng895天前 09:31: 最近也写了个差不多类似的demo，再研读下大神的代码，发现自己写的代码好乱，感触颇多，虽然用的方法不同，努力学习之。

3楼cheyiliu5天前 09:30: 围观

2楼ItJavawfc5天前 09:30: 您好，您这.gif图片是怎么上传的呢，要求的大小是2M以下的呀，为啥你的4点多M可以上传呢，求指教。我的也几兆，想上传，跪求方法。

1楼bravekingzhang5天前 09:29: 多谢翔哥