Android 自定义控件 轻松实现360软件详情页

转载请标明出处： http://blog.youkuaiyun.com/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

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.   
4.     <item name="id_stickynavlayout_topview" type="id"/>  
5.     <item name="id_stickynavlayout_viewpager" type="id"/>  
6.     <item name="id_stickynavlayout_indicator" type="id"/>  
7.     <item name="id_stickynavlayout_innerscrollview" type="id"/>  
8.   
9. </resources>  

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

2、布局文件

[html]  view plain copy

1. <com.zhy.view.StickyNavLayout xmlns:tools="http://schemas.android.com/tools"  
2.     xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <RelativeLayout  
8.         android:id="@id/id_stickynavlayout_topview"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="300dp"  
11.         android:background="#4400ff00" >  
12.   
13.         <TextView  
14.             android:layout_width="match_parent"  
15.             android:layout_height="match_parent"  
16.             android:gravity="center"  
17.             android:text="软件介绍"  
18.             android:textSize="30sp"  
19.             android:textStyle="bold" />  
20.     </RelativeLayout>  
21.   
22.     <com.zhy.view.SimpleViewPagerIndicator  
23.         android:id="@id/id_stickynavlayout_indicator"  
24.         android:layout_width="match_parent"  
25.         android:layout_height="50dp"  
26.         android:background="#ffffffff" >  
27.     </com.zhy.view.SimpleViewPagerIndicator>  
28.   
29.     <android.support.v4.view.ViewPager  
30.         android:id="@id/id_stickynavlayout_viewpager"  
31.         android:layout_width="match_parent"  
32.         android:layout_height="wrap_content"  
33.         android:background="#44ff0000" >  
34.     </android.support.v4.view.ViewPager>  
35.   
36. </com.zhy.view.StickyNavLayout>  

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

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

3、MainActivity

[java]  view plain copy

1. package com.zhy.sample.StickyNavLayout;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.support.v4.app.FragmentActivity;  
6. import android.support.v4.app.FragmentPagerAdapter;  
7. import android.support.v4.view.ViewPager;  
8. import android.support.v4.view.ViewPager.OnPageChangeListener;  
9.   
10. import com.zhy.view.SimpleViewPagerIndicator;  
11.   
12. public class MainActivity extends FragmentActivity  
13. {  
14.     private String[] mTitles = new String[] { "简介", "评价", "相关" };  
15.     private SimpleViewPagerIndicator mIndicator;  
16.     private ViewPager mViewPager;  
17.     private FragmentPagerAdapter mAdapter;  
18.     private TabFragment[] mFragments = new TabFragment[mTitles.length];  
19.   
20.     @Override  
21.     protected void onCreate(Bundle savedInstanceState)  
22.     {  
23.         super.onCreate(savedInstanceState);  
24.         setContentView(R.layout.activity_main);  
25.   
26.         initViews();  
27.         initDatas();  
28.         initEvents();  
29.     }  
30.   
31.     private void initEvents()  
32.     {  
33.         mViewPager.setOnPageChangeListener(new OnPageChangeListener()  
34.         {  
35.             @Override  
36.             public void onPageSelected(int position)  
37.             {  
38.             }  
39.   
40.             @Override  
41.             public void onPageScrolled(int position, float positionOffset,  
42.                     int positionOffsetPixels)  
43.             {  
44.                 mIndicator.scroll(position, positionOffset);  
45.             }  
46.   
47.             @Override  
48.             public void onPageScrollStateChanged(int state)  
49.             {  
50.   
51.             }  
52.         });  
53.   
54.     }  
55.   
56.     private void initDatas()  
57.     {  
58.         mIndicator.setTitles(mTitles);  
59.   
60.         for (int i = 0; i < mTitles.length; i++)  
61.         {  
62.             mFragments[i] = (TabFragment) TabFragment.newInstance(mTitles[i]);  
63.         }  
64.   
65.         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())  
66.         {  
67.             @Override  
68.             public int getCount()  
69.             {  
70.                 return mTitles.length;  
71.             }  
72.   
73.             @Override  
74.             public Fragment getItem(int position)  
75.             {  
76.                 return mFragments[position];  
77.             }  
78.   
79.         };  
80.   
81.         mViewPager.setAdapter(mAdapter);  
82.         mViewPager.setCurrentItem(0);  
83.     }  
84.   
85.     private void initViews()  
86.     {  
87.         mIndicator = (SimpleViewPagerIndicator) findViewById(R.id.id_stickynavlayout_indicator);  
88.         mViewPager = (ViewPager) findViewById(R.id.id_stickynavlayout_viewpager);  
89.     }  
90.   
91. }  

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

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

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

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

4、Fragment及其布局

贴一下我们的Fragment代码：

[java]  view plain copy

1. package com.zhy.sample.StickyNavLayout;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8. import android.widget.TextView;  
9.   
10. public class TabFragment extends Fragment  
11. {  
12.     public static final String TITLE = "title";  
13.     private String mTitle = "Defaut Value";  
14.     private TextView mTextView;  
15.   
16.     @Override  
17.     public void onCreate(Bundle savedInstanceState)  
18.     {  
19.         super.onCreate(savedInstanceState);  
20.         if (getArguments() != null)  
21.         {  
22.             mTitle = getArguments().getString(TITLE);  
23.         }  
24.     }  
25.   
26.     @Override  
27.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
28.             Bundle savedInstanceState)  
29.     {  
30.         View view = inflater.inflate(R.layout.fragment_tab, container, false);  
31.         mTextView = (TextView) view.findViewById(R.id.id_info);  
32.         mTextView.setText(mTitle);  
33.         return view;  
34.   
35.     }  
36.   
37.     public static TabFragment newInstance(String title)  
38.     {  
39.         TabFragment tabFragment = new TabFragment();  
40.         Bundle bundle = new Bundle();  
41.         bundle.putString(TITLE, title);  
42.         tabFragment.setArguments(bundle);  
43.         return tabFragment;  
44.     }  
45.   
46. }  

[html]  view plain copy

1. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@id/id_stickynavlayout_innerscrollview"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:scrollbars="none" >  
7.   
8.     <LinearLayout  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content"  
11.         android:background="#eee"  
12.         android:orientation="vertical"  
13.         android:padding="5dp" >  
14.   
15.         <TextView  
16.             android:id="@+id/id_info"  
17.             android:layout_width="match_parent"  
18.             android:layout_height="50dp"  
19.             android:background="#ffffffff"  
20.             android:gravity="center" >  
21.         </TextView>  
22.     //省略了无数控件  
23.     </LinearLayout>  
24.   
25. </ScrollView>  

没撒说的 ，let's go 。

3、StickyNavLayout源码剖析

1、构造

[java]  view plain copy

1. public class StickyNavLayout extends LinearLayout  
2. {  
3.   
4.     private View mTop;  
5.     private View mNav;  
6.     private ViewPager mViewPager;  
7.       
8.     private int mTopViewHeight;  
9.     private ScrollView mInnerScrollView;  
10.     private boolean isTopHidden = false;  
11.   
12.     private OverScroller mScroller;  
13.     private VelocityTracker mVelocityTracker;  
14.     private int mTouchSlop;  
15.     private int mMaximumVelocity, mMinimumVelocity;  
16.       
17.     private float mLastY;  
18.     private boolean mDragging;  
19.       
20.       
21.   
22.     public StickyNavLayout(Context context, AttributeSet attrs)  
23.     {  
24.         super(context, attrs);  
25.         setOrientation(LinearLayout.VERTICAL);  
26.   
27.         mScroller = new OverScroller(context);  
28.         mVelocityTracker = VelocityTracker.obtain();  
29.         mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();  
30.         mMaximumVelocity = ViewConfiguration.get(context)  
31.                 .getScaledMaximumFlingVelocity();  
32.         mMinimumVelocity = ViewConfiguration.get(context)  
33.                 .getScaledMinimumFlingVelocity();  
34.   
35.     }  
36.   
37.     @Override  
38.     protected void onFinishInflate()  
39.     {  
40.         super.onFinishInflate();  
41.         mTop = findViewById(R.id.id_stickynavlayout_topview);  
42.         mNav = findViewById(R.id.id_stickynavlayout_indicator);  
43.         View view = findViewById(R.id.id_stickynavlayout_viewpager);  
44.         if (!(view instanceof ViewPager))  
45.         {  
46.             throw new RuntimeException(  
47.                     "id_stickynavlayout_viewpager show used by ViewPager !");  
48.         }  
49.         mViewPager = (ViewPager) view;  
50.     }  

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

[java]  view plain copy

1. @Override  
2.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
3.     {  
4.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
5.         ViewGroup.LayoutParams params = mViewPager.getLayoutParams();  
6.         params.height = getMeasuredHeight() - mNav.getMeasuredHeight();  
7.     }  
8.   
9.     @Override  
10.     protected void onSizeChanged(int w, int h, int oldw, int oldh)  
11.     {  
12.         super.onSizeChanged(w, h, oldw, oldh);  
13.         mTopViewHeight = mTop.getMeasuredHeight();  
14.     }  

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

[java]  view plain copy

1. @Override  
2.    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
3.        // For simple implementation, our internal size is always 0.  
4.        // We depend on the container to specify the layout size of  
5.        // our view.  We can't really know what it is since we will be  
6.        // adding and removing different arbitrary views and do not  
7.        // want the layout to change as this happens.  
8.        setMeasuredDimension(getDefaultSize(0, widthMeasureSpec),  
9.                getDefaultSize(0, heightMeasureSpec));  
10.   }  
11.   public static int getDefaultSize(int size, int measureSpec) {  
12.        int result = size;  
13.        int specMode = MeasureSpec.getMode(measureSpec);  
14.        int specSize = MeasureSpec.getSize(measureSpec);  
15.   
16.        switch (specMode) {  
17.        case MeasureSpec.UNSPECIFIED:  
18.            result = size;  
19.            break;  
20.        case MeasureSpec.AT_MOST:  
21.        case MeasureSpec.EXACTLY:  
22.            result = specSize;  
23.            break;  
24.        }  
25.        return result;  
26.    }  

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

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

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

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

3、onTouchEvent

[java]  view plain copy

1. @Override  
2. public boolean onTouchEvent(MotionEvent event)  
3. {  
4.     mVelocityTracker.addMovement(event);  
5.     int action = event.getAction();  
6.     float y = event.getY();  
7.   
8.     switch (action)  
9.     {  
10.     case MotionEvent.ACTION_DOWN:  
11.         if (!mScroller.isFinished())  
12.             mScroller.abortAnimation();  
13.         mVelocityTracker.clear();  
14.         mVelocityTracker.addMovement(event);  
15.         mLastY = y;  
16.         return true;  
17.     case MotionEvent.ACTION_MOVE:  
18.         float dy = y - mLastY;  
19.   
20.         if (!mDragging && Math.abs(dy) > mTouchSlop)  
21.         {  
22.             mDragging = true;  
23.         }  
24.         if (mDragging)  
25.         {  
26.             scrollBy(0, (int) -dy);  
27.             mLastY = y;  
28.         }  
29.         break;  
30.     case MotionEvent.ACTION_CANCEL:  
31.         mDragging = false;  
32.         if (!mScroller.isFinished())  
33.         {  
34.             mScroller.abortAnimation();  
35.         }  
36.         break;  
37.     case MotionEvent.ACTION_UP:  
38.         mDragging = false;  
39.         mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);  
40.         int velocityY = (int) mVelocityTracker.getYVelocity();  
41.         if (Math.abs(velocityY) > mMinimumVelocity)  
42.         {  
43.             fling(-velocityY);  
44.         }  
45.         mVelocityTracker.clear();  
46.         break;  
47.     }  
48.   
49.     return super.onTouchEvent(event);  
50. }  

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

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

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

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

[java]  view plain copy

1. public void fling(int velocityY)  
2.     {  
3.         mScroller.fling(0, getScrollY(), 0, velocityY, 0, 0, 0, mTopViewHeight);  
4.         invalidate();  
5.     }  
6.   
7.     @Override  
8.     public void scrollTo(int x, int y)  
9.     {  
10.         if (y < 0)  
11.         {  
12.             y = 0;  
13.         }  
14.         if (y > mTopViewHeight)  
15.         {  
16.             y = mTopViewHeight;  
17.         }  
18.         if (y != getScrollY())  
19.         {  
20.             super.scrollTo(x, y);  
21.         }  
22.   
23.         isTopHidden = getScrollY() == mTopViewHeight;  
24.   
25.     }  
26.   
27.     @Override  
28.     public void computeScroll()  
29.     {  
30.         if (mScroller.computeScrollOffset())  
31.         {  
32.             scrollTo(0, mScroller.getCurrY());  
33.             invalidate();  
34.         }  
35.     }  

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

4、onInterceptTouchEvent

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

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

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

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

[java]  view plain copy

1. @Override  
2.     public boolean onInterceptTouchEvent(MotionEvent ev)  
3.     {  
4.         int action = ev.getAction();  
5.         float y = ev.getY();  
6.   
7.         switch (action)  
8.         {  
9.         case MotionEvent.ACTION_DOWN:  
10.             mLastY = y;  
11.             break;  
12.         case MotionEvent.ACTION_MOVE:  
13.             float dy = y - mLastY;  
14.   
15.             getCurrentScrollView();  
16.   
17.             if (Math.abs(dy) > mTouchSlop)  
18.             {  
19.                 mDragging = true;  
20.                 if (!isTopHidden  
21.                         || (mInnerScrollView.getScrollY() == 0 && isTopHidden && dy > 0))  
22.                 {  
23.                     return true;  
24.                 }  
25.             }  
26.             break;  
27.         }  
28.         return super.onInterceptTouchEvent(ev);  
29.     }  

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

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

注：如果你想要知道ListView如何替代上述的ScrollView，注意源码中已经添加了ListView的支持，大家自行下载查看。