Android仿淘宝商品详情页

更新时间：2018年10月26日 09:53:35 作者：AnalyzeSystem

这篇文章主要为大家详细介绍了Android仿淘宝商品详情页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

看到有人在问如何实现淘宝商品详情页效果，献上效果图

大致梳理一下思路，这里不提供源码

状态栏透明使用开源库StatusBarCompat，为了兼容手机4.4

dependencies {
  compile ('com.github.niorgai:StatusBarCompat:2.1.4', {
   exclude group: 'com.android.support'
  })
 }

allprojects {
  repositories {
   ...
   maven { url "https://jitpack.io" }
  }
 }

标题栏图标透明度变化参考Api setAlpha()已过时

icon.setImageAlpha(0);

Banner控件为ViewPager,淘宝显示为正方形，这里需要修改ViewPager measure函数

public class IdeaViewPager extends ViewPager {

 private Point point;

 public IdeaViewPager(Context context) {
  this(context,null);
 }

 public IdeaViewPager(Context context, AttributeSet attrs) {
  super(context, attrs);
  WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
  point = new Point();
  windowManager.getDefaultDisplay().getSize(point);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  setMeasuredDimension(point.x,point.x);
 }
}

测量View高度，获取到高度集合绑定到ScrollView,根据ScrollView滑动距离判断是属于哪一个Tab选项

public int getMeasureHeight(View view){
  int width = View.MeasureSpec.makeMeasureSpec(0,
    View.MeasureSpec.UNSPECIFIED);
  int height = View.MeasureSpec.makeMeasureSpec(0,
    View.MeasureSpec.UNSPECIFIED);
  view.measure(width, height);
  return view.getMeasuredHeight();
 }

重新onScrollChanged函数，实现ViewPager滑动速度比其他View慢

@Override
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  super.onScrollChanged(l, t, oldl, oldt);
  if (viewPager != null && t != oldt) {
   viewPager.setTranslationY(t/2);
  }
 }

根据限定距离（Banner）计算百分比偏移量，实现颜色渐变、透明度渐变（淘宝商品详情页有二次颜色渐变）

 @Override
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  super.onScrollChanged(l, t, oldl, oldt);

  if(viewPager!=null&&t<=point.x-headerHeight&&getOnScrollChangedColorListener()!=null){

   getOnScrollChangedColorListener().onChanged(Math.abs(t)/Float.valueOf(point.x-headerHeight));
   if(t<=(point.x-headerHeight)/2){
    getOnScrollChangedColorListener().onChangedFirstColor(t/(point.x-headerHeight)/2);
   }else{
    getOnScrollChangedColorListener().onChangedSecondColor((t-(point.x-headerHeight)/2)/(point.x-headerHeight)/2);
   }

  }

  int currentPosition = getCurrentPosition(t,arrayDistance);
  if(currentPosition!=position&&getOnSelectedIndicateChangedListener()!=null){
   getOnSelectedIndicateChangedListener().onSelectedChanged(currentPosition);
  }
  this.position = currentPosition;
 }

单一颜色渐变透明度，还原argb通道，修改a值

 ideaScrollView.setOnScrollChangedColorListener(new IdeaScrollView.OnScrollChangedColorListener() {
   @Override
   public void onChanged(float percentage) {

    int color = getAlphaColor(percentage>0.9f?1.0f:percentage);
    header.setBackgroundDrawable(new ColorDrawable(color));
    radioGroup.setBackgroundDrawable(new ColorDrawable(color));
    icon.setImageAlpha((int) ((percentage>0.9f?1.0f:percentage)*255));
    radioGroup.setAlpha((percentage>0.9f?1.0f:percentage)*255);

    setRadioButtonTextColor(percentage);

   }

   @Override
   public void onChangedFirstColor(float percentage) {

   }

   @Override
   public void onChangedSecondColor(float percentage) {

   }
  });

  ideaScrollView.setOnSelectedIndicateChangedListener(new IdeaScrollView.OnSelectedIndicateChangedListener() {
   @Override
   public void onSelectedChanged(int position) {
    isNeedScrollTo = false;
    radioGroup.check(radioGroup.getChildAt(position).getId());
    isNeedScrollTo = true;
   }
  });

 public int getAlphaColor(float f){
  return Color.argb((int) (f*255),0x09,0xc1,0xf4);
 }

Tab选项属性不能太频繁，会有颜色值闪烁情况出现，这里需要策略

 public void setRadioButtonTextColor(float percentage){
  if(Math.abs(percentage-currentPercentage)>=0.1f){
   for(int i=0;i<radioGroup.getChildCount();i++){
    RadioButton radioButton = (RadioButton) radioGroup.getChildAt(i);
    radioButton.setTextColor(radioButton.isChecked()?getRadioCheckedAlphaColor(percentage):getRadioAlphaColor(percentage));
   }
   this.currentPercentage = percentage;
  }
 }

判断当前属于哪个选项，根据滑动距离与传入绑定的View高度集合来计算

private int getCurrentPosition(int t, ArrayList<Integer> arrayDistance) {

 int index = 0;
 for (int i=0;i<arrayDistance.size();i++){
  if(i==arrayDistance.size()-1){
  index = i;
  }else {
  if(t>=arrayDistance.get(i)&&t<arrayDistance.get(i+1)){
   index = i;
   break;
  }
  }
 }
 return index;
 }

切换选项卡以及回到顶部按钮的具体实现参考scrollTo函数

private void scrollToPosition(int position){
 scrollTo(0,arrayDistance.get(position));
 }

以上代码实现了上图效果，当然也可以使用RecyclerView AbsListView做容器。

希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Glide用法与技巧以及优秀库的推荐
今天小编就为大家分享一篇关于Glide用法与技巧以及优秀库的推荐，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-12-12
Android中使用SeekBar拖动条实现改变图片透明度(代码实现)
这篇文章主要介绍了Android中使用SeekBar拖动条实现改变图片透明度,需要的朋友可以参考下
2020-01-01
Android中异步类AsyncTask用法总结
这篇文章主要介绍了Android中异步类AsyncTask用法,分析总结了Async Task类的功能、特点及相关的使用技巧与注意事项,需要的朋友可以参考下
2016-01-01
Jetpack Compose实现对角线滚动效果
这篇文章主要为大家详细介绍了如何利用Jetpack Compose实现一个简单的对角线滚动效果，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2023-02-02
Android编程中聊天页面背景图片、标题栏由于键盘引起问题的解决方法
这篇文章主要介绍了Android编程中聊天页面背景图片、标题栏由于键盘引起问题的解决方法,针对键盘弹出时标题栏及背景图片异常的相关解决方法,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
Android使用 PopupWindow 实现底部弹窗功能
这篇文章主要介绍了Android使用 PopupWindow 实现底部弹窗功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-12-12
Android控件阴影颜色调整示例
这篇文章主要介绍了Android控件阴影颜色调整示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Android电池电量监听的示例代码
本篇文章主要介绍了Android电池电量监听的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Android Activity启动流程刨析
Activity作为Android四大组件之一，他的启动绝对没有那么简单。这里涉及到了系统服务进程,启动过程细节很多，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
2022-08-08
Android横竖屏幕切换生命周期详解
这篇文章主要为大家详细介绍了Android横竖屏幕切换生命周期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07