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

{

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代码：

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” >

//省略了无数控件

没撒说的 ，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;

}

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

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

我们设置为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);

}

总结

开发是面向对象。我们找工作应该更多是面向面试。哪怕进大厂真的只是去宁螺丝，但你要进去得先学会面试的时候造飞机不是么？

作者13年java转Android开发，在小厂待过，也去过华为，OPPO等，去年四月份进了阿里一直到现在。等大厂待过也面试过很多人。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。

这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。

相信它会给大家带来很多收获：

资料太多，全部展示会影响篇幅，暂时就先列举这些部分截图

当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。早早确定自己的职业方向，才能在工作和能力提升中甩开同龄人。

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
mTopViewHeight)

{

y = mTopViewHeight;

}

if (y != getScrollY())

{

super.scrollTo(x, y);

}

总结

开发是面向对象。我们找工作应该更多是面向面试。哪怕进大厂真的只是去宁螺丝，但你要进去得先学会面试的时候造飞机不是么？

作者13年java转Android开发，在小厂待过，也去过华为，OPPO等，去年四月份进了阿里一直到现在。等大厂待过也面试过很多人。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。

这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。

相信它会给大家带来很多收获：

[外链图片转存中…(img-OOfxYXPF-1714453307777)]

[外链图片转存中…(img-K5iJDPPP-1714453307779)]

资料太多，全部展示会影响篇幅，暂时就先列举这些部分截图

当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。早早确定自己的职业方向，才能在工作和能力提升中甩开同龄人。

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！