1、概述
最近有不少朋友私聊問應用寶、360軟體助手之類的軟體詳情頁怎麼做，剛好，最近有時間就模仿360軟體助手詳情頁給大家做個Demo，供大家參考。嗯，關於實現呢，我寫了兩種方式：
1、ScrollView內嵌軟體介紹+ViewPager+ViewPager中是ScrollView，這種方式呢，純原生，沒有涉及到自定義控制元件，但是這樣巢狀呢，涉及到測量以及事件的衝突處理，大家可以自己嘗試去做一下，想像起來蠻容易的，做起來其實還是挺費勁的，程式碼我會給出，核心程式碼不多，大家自行參考。本文將重點分析第二種方式。
2、將做外層的ScrollView改為了自定義的一個控制元件，繼承自LinearLayout，叫做StickyNavLayout，這裡感謝小七的命名，同時本方式感謝二群暖暖提供的原始碼。
最後看下效果圖，第一張是360的，第二張是我們的：
360：
擦，別問我為什麼這麼模糊，盡力了。。。
我們的效果圖：
2、使用方式
上面我們也說了，之所以有第二種方式，完全是為了考慮使用的容易度。
1、自定義id資原始檔
values/ids_sticky_nav_Llayout.xml.
|
1 2 3 4 5 6 7 8 9 |
<?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、佈局檔案
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
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程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
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; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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、構造
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@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測量的原始碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
@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，相關程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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可以下滑出來。
分析完成以後，看程式碼，這叫一個酸爽：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@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，歡迎提出。
注：如果你想要知道ListView如何替代上述的ScrollView，注意原始碼中已經新增了ListView的支援，大家自行下載檢視。