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>
然后在我们的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];
- @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一起移动,详细写法请参考: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;
- @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;
- }
- }
- <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();
- }
- @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
- @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测量的源码:
- @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;
- }
扯远了,回来,我们继续。
我们设置为Vp的值以后,理论上来说,我们的显示已经正常了,控件都按照我们的预期显示了,但是,但是什么呢?我们现在在自定义的LinearLayout,那么移动是不是应该我们自己去写。
移动的代码很简单,想必大家都知道,直接拿到dx,然后scrollBy就行了。
3、onTouchEvent
- @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,相关代码:
- 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可以下滑出来。
分析完成以后,看代码,这叫一个酸爽:
- @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的支持,大家自行下载查看。
==>
最新更新:已经支持了连续滚动,自行github下载代码;