Android通過自定義控件實(shí)現(xiàn)360軟件詳情頁效果
一、概述
最近有不少朋友私聊問應(yīng)用寶、360軟件助手之類的軟件詳情頁怎么做，剛好，最近有時(shí)間就模仿360軟件助手詳情頁給大家做個(gè)Demo，供大家參考。嗯，關(guān)于實(shí)現(xiàn)呢，我寫了兩種方式：
1、ScrollView內(nèi)嵌軟件介紹+ViewPager+ViewPager中是ScrollView，這種方式呢，純原生，沒有涉及到自定義控件，但是這樣嵌套呢，涉及到測量以及事件的沖突處理，大家可以自己嘗試去做一下，想像起來蠻容易的，做起來其實(shí)還是挺費(fèi)勁的，代碼我會(huì)給出，核心代碼不多，大家自行參考。本文將重點(diǎn)分析第二種方式。
2、將做外層的ScrollView改為了自定義的一個(gè)控件，繼承自LinearLayout，叫做StickyNavLayout，這里感謝小七的命名，同時(shí)本方式感謝二群暖暖提供的源碼。
最后看下效果圖，第一張是360的，第二張是我們的：
360：
擦，別問我為什么這么模糊，盡力了。。。
我們的效果圖：
二、使用方式
上面我們也說了，之所以有第二種方式，完全是為了考慮使用的容易度。
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>
定義了幾個(gè)id資源，主要是為了方便使用了，供聲明布局時(shí)使用的，看名字應(yīng)該能猜出來吧，猜不出來沒事，接下來我就貼布局文件了。這個(gè)其實(shí)不屬于使用方式了，但是下文會(huì)見到，所以提前貼出來。
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，然后是頂部內(nèi)容區(qū)域，Vp的指示器，ViewPager。按照效果圖，去寫就ok，注意部分id使用我們預(yù)設(shè)定的id資源。因?yàn)槲覀兊腟tickyNavLayout需要通過id找到該控件，去進(jìn)行一些計(jì)算。
然后在我們的MainActivity中，對ViewPager進(jìn)行初始化即可。
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[] { "簡介", "評價(jià)", "相關(guān)" };
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);
}
}
沒有什么復(fù)雜的代碼，主要就是初始化我們的Vp；
對了這個(gè)指示器我是臨時(shí)寫的，也算一個(gè)自定義控件吧，主要就是跟隨Vp一起移動(dòng)，只是把三角形改成了下劃線。
我們的Vp中每個(gè)頁面為一個(gè)Fragment，F(xiàn)ragment的代碼我們就不貼了，布局就是ScrollView為根布局，內(nèi)部隨意填充，具體可參考源碼。
介紹完了用法有木有一點(diǎn)小激動(dòng)，基本按照常規(guī)去寫布局就ok，效果自動(dòng)實(shí)現(xiàn)。
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> //省略了無數(shù)控件 </LinearLayout> </ScrollView>
沒撒說的 ，let's go 。
三、StickyNavLayout源碼剖析
1、構(gòu)造
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，不用說大家都能想到這是和移動(dòng)相關(guān)的，OverScroller是個(gè)輔助類，用于自定移動(dòng)時(shí)幫我們處理掉數(shù)學(xué)的計(jì)算部分。mVelocityTracker相關(guān)幾個(gè)變量，當(dāng)然是計(jì)算什么時(shí)候需要自動(dòng)移動(dòng)；mTouchSlop幫我區(qū)別用戶是點(diǎn)擊還是拖拽。Android中封裝了很多常量在ViewConfiguration中，大家有興趣可以了解他，之所以使用這些常量不僅僅是說，省的我們自己去定義，而是為了和系統(tǒng)的行為保持一致。
看完了構(gòu)造以后，由于我們使用的是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();
}
主要是去設(shè)置ViewPager的高度，給它一個(gè)固定值，ViewPager自己在測量自己的時(shí)候，你要是不給它固定值，可能測量結(jié)果與你的預(yù)期會(huì)差距很大。比如你給它設(shè)置個(gè)WRAP_CONTENT，你希望他去計(jì)算孩子的高度去設(shè)置自己的，那么你就想多了。
大家可以看下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兩種模式，都是直接讀取父類的傳入的測量值，也就是說，他不會(huì)去測量自己孩子的高度。然后如果模式是：UNSPECIFIED，那么高度直接為0呢。這里大家如果做過這個(gè)例子，應(yīng)該能遇到這種情況，ScrollView中放ViewPager時(shí)，測量模式就是UNSPECIFIED，那么Vp直接不顯示，原因就在這里。
扯遠(yuǎn)了，回來，我們繼續(xù)。
我們設(shè)置為Vp的值以后，理論上來說，我們的顯示已經(jīng)正常了，控件都按照我們的預(yù)期顯示了，但是，但是什么呢？我們現(xiàn)在在自定義的LinearLayout，那么移動(dòng)是不是應(yīng)該我們自己去寫。
移動(dòng)的代碼很簡單，想必大家都知道，直接拿到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àn)橹恍枰袛鄖方向的，所以down的時(shí)候記錄下y的值，然后move的時(shí)候拿到dy，直接去進(jìn)去scrollBy就好，當(dāng)然我們在整個(gè)過程中.addMovement(event);所以，up的時(shí)候，我們得到v方向的velocityY，調(diào)用fling進(jìn)行移動(dòng)。
還好fling的核心代碼OverScroller給我們實(shí)現(xiàn)了，so nice。
大家應(yīng)該清楚，我們使用Scroller這樣的輔助類時(shí)，它們幫我們完成的，知識數(shù)學(xué)方面的計(jì)算，至于自動(dòng)我們還是需要自己去干的。
那怎么干，在哪干？這個(gè)無非就是重寫computeScroll方法，在里面判斷scroller是否結(jié)束，如果沒有，則scrollTo一下，最后記得invalidate，相關(guān)代碼：
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，別得意，為什么這么說呢？因?yàn)槟阃瓿傻?，知識當(dāng)然View對于上下拖動(dòng)的處理。大家別忘了，我們當(dāng)前的StickyNavLayout內(nèi)部可是有一個(gè)ScrollView的，那么根據(jù)事件的轉(zhuǎn)發(fā)機(jī)制，這個(gè)內(nèi)部的ScrollView肯定會(huì)處理上下拖動(dòng)這種情況的，也就是我們的事件會(huì)被它攔截。
4、onInterceptTouchEvent
好了，接下來我們要處理攔截，對于攔截，我們要清楚的知道什么時(shí)候應(yīng)該攔截，什么時(shí)候不需要，當(dāng)前我們的例子：
1、如果我們的頂部view只要沒有完全隱藏，那么直接攔截上下的拖動(dòng)；
2、還有個(gè)需要攔截的地方，就是當(dāng)頂部的view徹底隱藏了，我們現(xiàn)在內(nèi)部的sc應(yīng)該可以上下滑動(dòng)了，但是如果sc滑動(dòng)到頂部再往下的時(shí)候，此時(shí)又該攔截了，我們需要把頂部view可以下滑出來。
分析完成以后，看代碼，這叫一個(gè)酸爽：
@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了。
源碼下載：
github下載地址：https://github.com/hongyangAndroid/Android-StickyNavLayout
本地下載地址：http://xiazai.jb51.net/201705/yuanma/Android-StickyNavLayout(jb51.net).rar
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
Android OnFocuChangeListener焦點(diǎn)事件詳解
這篇文章主要為大家詳細(xì)介紹了Android OnFocuChangeListener焦點(diǎn)事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
android monkey自動(dòng)化測試改為java調(diào)用monkeyrunner Api
一般情況下我們使用android中的monkeyrunner進(jìn)行自動(dòng)化測試時(shí)，使用的是python語言來寫測試腳本。不過，最近發(fā)現(xiàn)可以用java調(diào)用monkeyrunner Api，于是，就簡單研究了一下。這里做一些總結(jié)。希望有對在研究的午飯可以有所用處2012-11-11
Android實(shí)現(xiàn)阿里云oss上傳流程解析
這篇文章主要介紹了Android實(shí)現(xiàn)阿里云oss上傳流程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要為大家詳細(xì)介紹了Android相機(jī)管理工具類，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Android studio 使用Debugger問題（代碼中含有ndk）
這篇文章主要介紹了Android studio 使用Debugger問題（代碼中含有ndk）,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-11-11
Android EditText實(shí)現(xiàn)關(guān)鍵詞批量搜索示例
本篇文章主要介紹了Android EditText實(shí)現(xiàn)關(guān)鍵詞批量搜索示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
Android實(shí)現(xiàn)文字翻轉(zhuǎn)動(dòng)畫的效果
本文實(shí)現(xiàn)了Android程序文字翻轉(zhuǎn)動(dòng)畫的實(shí)現(xiàn)，具有一定的參考價(jià)值，有需要的朋友可以了解一下。2016-10-10
Android實(shí)現(xiàn)快遞物流跟蹤布局效果
本篇文章主要介紹了Android實(shí)現(xiàn)快遞跟蹤布局效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Android劉海屏、水滴屏全面屏適配小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
ListView實(shí)現(xiàn)頂部和底部內(nèi)容指示器的方法
這篇文章主要介紹了ListView實(shí)現(xiàn)頂部和底部內(nèi)容指示器的方法，需要的朋友可以參考下2015-09-09