转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/43649913，本文出自：【张鸿洋的博客】
1、概述
最近有不少朋友私聊问应用宝、360软件助手之类的软件详情页怎么做，刚好，最近有时间就模仿360软件助手详情页给大家做个Demo，供大家参考。嗯，关于实现呢，我写了两种方式：
1、ScrollView内嵌软件介绍+ViewPager+ViewPager中是ScrollView，这种方式呢，纯原生，没有涉及到自定义控件，但是这样嵌套呢，涉及到测量以及事件的冲突处理，大家可以自己尝试去做一下，想像起来蛮容易的，做起来其实还是挺费劲的，代码我会给出，核心代码不多，大家自行参考。本文将重点分析第二种方式。
2、将做外层的ScrollView改为了自定义的一个控件，继承自LinearLayout，叫做StickyNavLayout，这里感谢小七的命名，同时本方式感谢二群暖暖提供的源码。
最后看下效果图，第一张是360的，第二张是我们的：
360：
擦，别问我为什么这么模糊，尽力了。。。
我们的效果图：
上面我们也说了，之所以有第二种方式，完全是为了考虑使用的容易度。
values/ids_sticky_nav_Llayout.xml
[html]view plaincopy
定义了几个id资源，主要是为了方便使用了，供声明布局时使用的，看名字应该能猜出来吧，猜不出来没事，接下来我就贴布局文件了。这个其实不属于使用方式了，但是下文会见到，所以提前贴出来。
[html]view plaincopy
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@id/id_stickynavlayout_topview"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#4400ff00">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="软件介绍"
android:textSize="30sp"
android:textStyle="bold"/>
android:id="@id/id_stickynavlayout_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ffffffff">
android:id="@id/id_stickynavlayout_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#44ff0000">
最外层是我们的自定义的控件StickyNavLayout，然后是顶部内容区域，Vp的指示器，ViewPager。按照效果图，去写就ok，注意部分id使用我们预设定的id资源。因为我们的StickyNavLayout需要通过id找到该控件，去进行一些计算。
然后在我们的MainActivity中，对ViewPager进行初始化即可。
[java]view plaincopy
packagecom.zhy.sample.StickyNavLayout;
importandroid.os.Bundle;
importandroid.support.v4.app.Fragment;
importandroid.support.v4.app.FragmentActivity;
importandroid.support.v4.app.FragmentPagerAdapter;
importandroid.support.v4.view.ViewPager;
importandroid.support.v4.view.ViewPager.OnPageChangeListener;
importcom.zhy.view.SimpleViewPagerIndicator;
publicclassMainActivityextendsFragmentActivity
{
privateString[] mTitles =newString[] {"简介","评价","相关"};
privateSimpleViewPagerIndicator mIndicator;
privateViewPager mViewPager;
privateFragmentPagerAdapter mAdapter;
privateTabFragment[] mFragments =newTabFragment[mTitles.length];
@Override
protectedvoidonCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
initDatas();
initEvents();
}
privatevoidinitEvents()
{
mViewPager.setOnPageChangeListener(newOnPageChangeListener()
{
@Override
publicvoidonPageSelected(intposition)
{
}
@Override
publicvoidonPageScrolled(intposition,floatpositionOffset,
intpositionOffsetPixels)
{
mIndicator.scroll(position, positionOffset);
}
@Override
publicvoidonPageScrollStateChanged(intstate)
{
}
});
}
privatevoidinitDatas()
{
mIndicator.setTitles(mTitles);
for(inti =0; i < mTitles.length; i++)
{
mFragments[i] = (TabFragment) TabFragment.newInstance(mTitles[i]);
}
mAdapter =newFragmentPagerAdapter(getSupportFragmentManager())
{
@Override
publicintgetCount()
{
returnmTitles.length;
}
@Override
publicFragment getItem(intposition)
{
returnmFragments[position];
}
};
mViewPager.setAdapter(mAdapter);
mViewPager.setCurrentItem(0);
}
privatevoidinitViews()
{
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，效果自动实现。
贴一下我们的Fragment代码：
[java]view plaincopy
packagecom.zhy.sample.StickyNavLayout;
importandroid.os.Bundle;
importandroid.support.v4.app.Fragment;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.TextView;
publicclassTabFragmentextendsFragment
{
publicstaticfinalString TITLE ="title";
privateString mTitle ="Defaut Value";
privateTextView mTextView;
@Override
publicvoidonCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
if(getArguments() !=null)
{
mTitle = getArguments().getString(TITLE);
}
}
@Override
publicView 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);
returnview;
}
publicstaticTabFragment newInstance(String title)
{
TabFragment tabFragment =newTabFragment();
Bundle bundle =newBundle();
bundle.putString(TITLE, title);
tabFragment.setArguments(bundle);
returntabFragment;
}
}
[html]view plaincopy
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">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#eee"
android:orientation="vertical"
android:padding="5dp">
android:id="@+id/id_info"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ffffffff"
android:gravity="center">
//省略了无数控件
没撒说的 ，let's go 。
[java]view plaincopy
publicclassStickyNavLayoutextendsLinearLayout
{
privateView mTop;
privateView mNav;
privateViewPager mViewPager;
privateintmTopViewHeight;
privateScrollView mInnerScrollView;
privatebooleanisTopHidden =false;
privateOverScroller mScroller;
privateVelocityTracker mVelocityTracker;
privateintmTouchSlop;
privateintmMaximumVelocity, mMinimumVelocity;
privatefloatmLastY;
privatebooleanmDragging;
publicStickyNavLayout(Context context, AttributeSet attrs)
{
super(context, attrs);
setOrientation(LinearLayout.VERTICAL);
mScroller =newOverScroller(context);
mVelocityTracker = VelocityTracker.obtain();
mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
mMaximumVelocity = ViewConfiguration.get(context)
.getScaledMaximumFlingVelocity();
mMinimumVelocity = ViewConfiguration.get(context)
.getScaledMinimumFlingVelocity();
}
@Override
protectedvoidonFinishInflate()
{
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(!(viewinstanceofViewPager))
{
thrownewRuntimeException(
"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中还需要做些处理。
[java]view plaincopy
@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
ViewGroup.LayoutParams params = mViewPager.getLayoutParams();
params.height = getMeasuredHeight() - mNav.getMeasuredHeight();
}
@Override
protectedvoidonSizeChanged(intw,inth,intoldw,intoldh)
{
super.onSizeChanged(w, h, oldw, oldh);
mTopViewHeight = mTop.getMeasuredHeight();
}
主要是去设置ViewPager的高度，给它一个固定值，ViewPager自己在测量自己的时候，你要是不给它固定值，可能测量结果与你的预期会差距很大。比如你给它设置个WRAP_CONTENT，你希望他去计算孩子的高度去设置自己的，那么你就想多了。大家可以看下ViewPager测量的源码：
[java]view plaincopy
@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec) {
// 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));
}
publicstaticintgetDefaultSize(intsize,intmeasureSpec) {
intresult = size;
intspecMode = MeasureSpec.getMode(measureSpec);
intspecSize = MeasureSpec.getSize(measureSpec);
switch(specMode) {
caseMeasureSpec.UNSPECIFIED:
result = size;
break;
caseMeasureSpec.AT_MOST:
caseMeasureSpec.EXACTLY:
result = specSize;
break;
}
returnresult;
}
可以看到，对于AT_MOST和EXACTLY两种模式，都是直接读取父类的传入的测量值，也就是说，他不会去测量自己孩子的高度。然后如果模式是：UNSPECIFIED，那么高度直接为0呢。这里大家如果做过这个例子，应该能遇到这种情况，ScrollView中放ViewPager时，测量模式就是UNSPECIFIED，那么Vp直接不显示，原因就在这里。
扯远了，回来，我们继续。
我们设置为Vp的值以后，理论上来说，我们的显示已经正常了，控件都按照我们的预期显示了，但是，但是什么呢？我们现在在自定义的LinearLayout，那么移动是不是应该我们自己去写。
移动的代码很简单，想必大家都知道，直接拿到dx，然后scrollBy就行了。
[java]view plaincopy
@Override
publicbooleanonTouchEvent(MotionEvent event)
{
mVelocityTracker.addMovement(event);
intaction = event.getAction();
floaty = event.getY();
switch(action)
{
caseMotionEvent.ACTION_DOWN:
if(!mScroller.isFinished())
mScroller.abortAnimation();
mVelocityTracker.clear();
mVelocityTracker.addMovement(event);
mLastY = y;
returntrue;
caseMotionEvent.ACTION_MOVE:
floatdy = y - mLastY;
if(!mDragging && Math.abs(dy) > mTouchSlop)
{
mDragging =true;
}
if(mDragging)
{
scrollBy(0, (int) -dy);
mLastY = y;
}
break;
caseMotionEvent.ACTION_CANCEL:
mDragging =false;
if(!mScroller.isFinished())
{
mScroller.abortAnimation();
}
break;
caseMotionEvent.ACTION_UP:
mDragging =false;
mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
intvelocityY = (int) mVelocityTracker.getYVelocity();
if(Math.abs(velocityY) > mMinimumVelocity)
{
fling(-velocityY);
}
mVelocityTracker.clear();
break;
}
returnsuper.onTouchEvent(event);
}
比较简单哈，我们因为只需要判断y方向的，所以down的时候记录下y的值，然后move的时候拿到dy，直接去进去scrollBy就好，当然我们在整个过程中.addMovement(event);所以，up的时候，我们得到v方向的velocityY，调用fling进行移动。
还好fling的核心代码OverScroller给我们实现了，so nice。
大家应该清楚，我们使用Scroller这样的辅助类时，它们帮我们完成的，知识数学方面的计算，至于自动我们还是需要自己去干的。
那怎么干，在哪干？这个无非就是重写computeScroll方法，在里面判断scroller是否结束，如果没有，则scrollTo一下，最后记得invalidate，相关代码：
[java]view plaincopy
publicvoidfling(intvelocityY)
{
mScroller.fling(0, getScrollY(),0, velocityY,0,0,0, mTopViewHeight);
invalidate();
}
@Override
publicvoidscrollTo(intx,inty)
{
if(y <0)
{
y =0;
}
if(y > mTopViewHeight)
{
y = mTopViewHeight;
}
if(y != getScrollY())
{
super.scrollTo(x, y);
}
isTopHidden = getScrollY() == mTopViewHeight;
}
@Override
publicvoidcomputeScroll()
{
if(mScroller.computeScrollOffset())
{
scrollTo(0, mScroller.getCurrY());
invalidate();
}
}
ok，到此，我们的onTouchEvent搞定了~~but，别得意，为什么这么说呢？因为你完成的，知识当然View对于上下拖动的处理。大家别忘了，我们当前的StickyNavLayout内部可是有一个ScrollView的，那么根据事件的转发机制，这个内部的ScrollView肯定会处理上下拖动这种情况的，也就是我们的事件会被它拦截。
好了，接下来我们要处理拦截，对于拦截，我们要清楚的知道什么时候应该拦截，什么时候不需要，当前我们的例子：
1、如果我们的顶部view只要没有完全隐藏，那么直接拦截上下的拖动；
2、还有个需要拦截的地方，就是当顶部的view彻底隐藏了，我们现在内部的sc应该可以上下滑动了，但是如果sc滑动到顶部再往下的时候，此时又该拦截了，我们需要把顶部view可以下滑出来。
分析完成以后，看代码，这叫一个酸爽：
[java]view plaincopy
@Override
publicbooleanonInterceptTouchEvent(MotionEvent ev)
{
intaction = ev.getAction();
floaty = ev.getY();
switch(action)
{
caseMotionEvent.ACTION_DOWN:
mLastY = y;
break;
caseMotionEvent.ACTION_MOVE:
floatdy = y - mLastY;
getCurrentScrollView();
if(Math.abs(dy) > mTouchSlop)
{
mDragging =true;
if(!isTopHidden
|| (mInnerScrollView.getScrollY() ==0&& isTopHidden && dy >0))
{
returntrue;
}
}
break;
}
returnsuper.onInterceptTouchEvent(ev);
}
网友评论