Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > Android自定义控件实现360软件详情页

Android通过自定义控件实现360软件详情页效果

作者:鸿洋_

这篇文章主要给大家介绍了Android通过自定义控件实现360软件详情页效果的相关资料,实现后的效果非常不错,文中也给出了详细的示例代码和介绍,需要的朋友可以参考借鉴,下面来一起看看吧。

一、概述

最近有不少朋友私聊问应用宝、360软件助手之类的软件详情页怎么做,刚好,最近有时间就模仿360软件助手详情页给大家做个Demo,供大家参考。嗯,关于实现呢,我写了两种方式:

      1、ScrollView内嵌软件介绍+ViewPager+ViewPager中是ScrollView,这种方式呢,纯原生,没有涉及到自定义控件,但是这样嵌套呢,涉及到测量以及事件的冲突处理,大家可以自己尝试去做一下,想像起来蛮容易的,做起来其实还是挺费劲的,代码我会给出,核心代码不多,大家自行参考。本文将重点分析第二种方式。

      2、将做外层的ScrollView改为了自定义的一个控件,继承自LinearLayout,叫做StickyNavLayout,这里感谢小七的命名,同时本方式感谢二群暖暖提供的源码。

最后看下效果图,第一张是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> 

定义了几个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]; 
 
 @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一起移动,只是把三角形改成了下划线。

我们的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 。

三、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); 
  } 
 
  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了。

源码下载:

github下载地址:https://github.com/hongyangAndroid/Android-StickyNavLayout

本地下载地址:http://xiazai.jb51.net/201705/yuanma/Android-StickyNavLayout(jb51.net).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

您可能感兴趣的文章:
阅读全文