轉(zhuǎn)載請標明出處：http://blog.csdn.net/lmj623565791/article/details/43649913，本文出自：【張鴻洋的博客】
1、概述
最近有不少朋友私聊問應(yīng)用寶、360軟件助手之類的軟件詳情頁怎么做，剛好，最近有時間就模仿360軟件助手詳情頁給大家做個Demo，供大家參考。嗯，關(guān)于實現(xiàn)呢，我寫了兩種方式：
1、ScrollView內(nèi)嵌軟件介紹+ViewPager+ViewPager中是ScrollView，這種方式呢，純原生，沒有涉及到自定義控件，但是這樣嵌套呢，涉及到測量以及事件的沖突處理，大家可以自己嘗試去做一下，想像起來蠻容易的，做起來其實還是挺費勁的，代碼我會給出，核心代碼不多，大家自行參考。本文將重點分析第二種方式。
2、將做外層的ScrollView改為了自定義的一個控件，繼承自LinearLayout，叫做StickyNavLayout，這里感謝小七的命名，同時本方式感謝二群暖暖提供的源碼。
最后看下效果圖，第一張是360的，第二張是我們的：
360：
擦，別問我為什么這么模糊，盡力了。。。
我們的效果圖：
上面我們也說了，之所以有第二種方式，完全是為了考慮使用的容易度。
values/ids_sticky_nav_Llayout.xml
[html]view plaincopy
定義了幾個id資源，主要是為了方便使用了，供聲明布局時使用的，看名字應(yīng)該能猜出來吧，猜不出來沒事，接下來我就貼布局文件了。這個其實不屬于使用方式了，但是下文會見到，所以提前貼出來。
[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，然后是頂部內(nèi)容區(qū)域，Vp的指示器，ViewPager。按照效果圖，去寫就ok，注意部分id使用我們預設(shè)定的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[]?{"簡介","評價","相關(guān)"};
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，F(xiàn)ragment的代碼我們就不貼了，布局就是ScrollView為根布局，內(nèi)部隨意填充，具體可參考源碼。
介紹完了用法有木有一點小激動，基本按照常規(guī)去寫布局就ok，效果自動實現(xiàn)。
貼一下我們的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">
//省略了無數(shù)控件
沒撒說的 ，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，不用說大家都能想到這是和移動相關(guān)的，OverScroller是個輔助類，用于自定移動時幫我們處理掉數(shù)學的計算部分。mVelocityTracker相關(guān)幾個變量，當然是計算什么時候需要自動移動；mTouchSlop幫我區(qū)別用戶是點擊還是拖拽。Android中封裝了很多常量在ViewConfiguration中，大家有興趣可以了解他，之所以使用這些常量不僅僅是說，省的我們自己去定義，而是為了和系統(tǒng)的行為保持一致。
看完了構(gòu)造以后，由于我們使用的是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();
}
主要是去設(shè)置ViewPager的高度，給它一個固定值，ViewPager自己在測量自己的時候，你要是不給它固定值，可能測量結(jié)果與你的預期會差距很大。比如你給它設(shè)置個WRAP_CONTENT，你希望他去計算孩子的高度去設(shè)置自己的，那么你就想多了。大家可以看下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呢。這里大家如果做過這個例子，應(yīng)該能遇到這種情況，ScrollView中放ViewPager時，測量模式就是UNSPECIFIED，那么Vp直接不顯示，原因就在這里。
扯遠了，回來，我們繼續(xù)。
我們設(shè)置為Vp的值以后，理論上來說，我們的顯示已經(jīng)正常了，控件都按照我們的預期顯示了，但是，但是什么呢？我們現(xiàn)在在自定義的LinearLayout，那么移動是不是應(yīng)該我們自己去寫。
移動的代碼很簡單，想必大家都知道，直接拿到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，調(diào)用fling進行移動。
還好fling的核心代碼OverScroller給我們實現(xiàn)了，so nice。
大家應(yīng)該清楚，我們使用Scroller這樣的輔助類時，它們幫我們完成的，知識數(shù)學方面的計算，至于自動我們還是需要自己去干的。
那怎么干，在哪干？這個無非就是重寫computeScroll方法，在里面判斷scroller是否結(jié)束，如果沒有，則scrollTo一下，最后記得invalidate，相關(guān)代碼：
[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內(nèi)部可是有一個ScrollView的，那么根據(jù)事件的轉(zhuǎn)發(fā)機制，這個內(nèi)部的ScrollView肯定會處理上下拖動這種情況的，也就是我們的事件會被它攔截。
好了，接下來我們要處理攔截，對于攔截，我們要清楚的知道什么時候應(yīng)該攔截，什么時候不需要，當前我們的例子：
1、如果我們的頂部view只要沒有完全隱藏，那么直接攔截上下的拖動；
2、還有個需要攔截的地方，就是當頂部的view徹底隱藏了，我們現(xiàn)在內(nèi)部的sc應(yīng)該可以上下滑動了，但是如果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);
}
