Android 自訂控制項 輕鬆實現360軟體詳情頁

標籤：android   軟體詳情頁   stickynavlayout   

轉載請標明出處：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];@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViews();initDatas();initEvents();}private void initEvents(){mViewPager.setOnPageChangeListener(new OnPageChangeListener(){@Overridepublic void onPageSelected(int position){}@Overridepublic void onPageScrolled(int position, float positionOffset,int positionOffsetPixels){mIndicator.scroll(position, positionOffset);}@Overridepublic 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()){@Overridepublic int getCount(){return mTitles.length;}@Overridepublic 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;@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);if (getArguments() != null){mTitle = getArguments().getString(TITLE);}}@Overridepublic 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();}@Overrideprotected 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

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);ViewGroup.LayoutParams params = mViewPager.getLayoutParams();params.height = getMeasuredHeight() - mNav.getMeasuredHeight();}@Overrideprotected 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

@Overridepublic 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();}@Overridepublic 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;}@Overridepublic 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可以下滑出來。

分析完成以後，看代碼，這叫一個酸爽：

@Overridepublic 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

博主部分視頻已經上線，如果你不喜歡枯燥的文本，請猛戳（初錄，期待您的支援）：

視頻目錄位址：本人錄製的視頻教程

Android 自訂控制項 輕鬆實現360軟體詳情頁