大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
Android怎么实现淘宝商品详情页效果?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联建站专注于成都做网站、网站制作、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户,用严谨的态度对待客户,用专业的服务创造价值,成为客户值得信赖的朋友,为客户解除后顾之忧。布局文件
这块主要是设置刚进入页面时的透明头部 主要组成部分有返回键 和头部的方形小图片 还有分享按钮 以及你想附加的标题功能 默认进入是透明的只显示返回按钮
这部分主要是我们的标签选项卡 我这边采用的是RadioGroup+radioButton实现的 类似于淘宝的商品、评价、详情等标签
这样我们的页面布局头部就完成了 下面我们来看下具体组成内容
这部分就是我们的具体页面内容 可以看到我们的详情页面数据使用自定义的一个Scrollview来包裹的 其中分为4块 我们布局里面写的很清楚 分别对应着详情页中的四个模块 当然 我这里面只是用图片来代替内容了 具体内容可自己填充
下面来看下我们具体实现代码
StatusBarCompat.translucentStatusBar(this);
我这边是采用的第三方的沉浸式透明状态栏 你们可以自行替换
dependencies { compile ('com.github.niorgai:StatusBarCompat:2.1.4', { exclude group: 'com.android.support' }) }
这个是我沉浸式状态栏的依赖 感兴趣的可以了解一下
Rect rectangle= new Rect(); getWindow().getDecorView().getWindowVisibleDisplayFrame(rectangle); ideaScrollView.setViewPager(viewPager,getMeasureHeight(headerParent)-rectangle.top); icon.setImageAlpha(0); radioGroup.setAlpha(0); radioGroup.check(radioGroup.getChildAt(0).getId());
上面是获取状态栏的高度并且使用自定义scrollview绑定banner图片 并获取图片高度
以及初始化我们头部部分控件的透明度 和默认选择第一个标签
View one = findViewById(R.id.one); View two = findViewById(R.id.two); View four = findViewById(R.id.four); View three = findViewById(R.id.three); ArrayListararyDistance = new ArrayList<>(); araryDistance.add(0); araryDistance.add(getMeasureHeight(one)-getMeasureHeight(headerParent)); araryDistance.add(getMeasureHeight(one)+getMeasureHeight(two)-getMeasureHeight(headerParent)); araryDistance.add(getMeasureHeight(one)+getMeasureHeight(two)+getMeasureHeight(three)-getMeasureHeight(headerParent)); ideaScrollView.setArrayDistance(araryDistance);
这块是我们获取到我们的四个模块的高度 并把高度存到集合中 传入到我们自定义的scrollview中
private void scrollToPosition(int position){ scrollTo(0,arrayDistance.get(position)); }
scrollview通过传过来的高度进行定位滑动 意思就是点击我们的标题选项滑动到相应的位置
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(); }
这个是获取控件高度的方法
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) { } });
这个监听方法是监测我们滑动的距离 来改变我们标题的颜色 从透明慢慢滑动进行颜色渐变 以及设置我们头部控件的颜色 和展示我们的标题选项卡
public int getAlphaColor(float f){ return Color.argb((int) (f*255),0x09,0xc1,0xf4); } public int getLayerAlphaColor(float f){ return Color.argb((int) (f*255),0x09,0xc1,0xf4); } public int getRadioCheckedAlphaColor(float f){ return Color.argb((int) (f*255),0x44,0x44,0x44); } public int getRadioAlphaColor(float f){ return Color.argb((int) (f*255),0xFF,0xFF,0xFF); }
可以根据这块来改变我们头部以及标题的颜色 根据传入的值来进行颜色渐变
ideaScrollView.setOnSelectedIndicateChangedListener(new IdeaScrollView.OnSelectedIndicateChangedListener() { @Override public void onSelectedChanged(int position) { isNeedScrollTo = false; radioGroup.check(radioGroup.getChildAt(position).getId()); isNeedScrollTo = true; } }); radioGroup.setOnCheckedChangeListener(radioGroupListener); private RadioGroup.OnCheckedChangeListener radioGroupListener =new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) { for(int i=0;i根据这两个监听方法来改变我们标题的选中tab 滑动到不同的位置选中对应的Tab并改变颜色 具体实现方法看自定义Scrollview
根据限定距离(Banner)计算百分比偏移量,实现颜色渐变、透明度渐变(淘宝商品详情页有二次颜色渐变)
@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); } 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; } private int getCurrentPosition(int t, ArrayListarrayDistance) { int index = 0; for (int i=0;i =arrayDistance.get(i)&&t 下面是自定义Scrollview的全部代码
package com.text.lg.ideascrollview; import android.content.Context; import android.graphics.Point; import android.util.AttributeSet; import android.view.WindowManager; import android.widget.ScrollView; import java.util.ArrayList; public class IdeaScrollView extends ScrollView { private final Point point; private IdeaViewPager viewPager; private int position = 0; ArrayListarrayDistance = new ArrayList<>(); private int headerHeight; public IdeaScrollView(Context context) { this(context,null,0); } public IdeaScrollView(Context context, AttributeSet attrs) { this(context, attrs,0); } public IdeaScrollView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); point = new Point(); windowManager.getDefaultDisplay().getSize(point); } @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); } 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; } private int getCurrentPosition(int t, ArrayList arrayDistance) { int index = 0; for (int i=0;i =arrayDistance.get(i)&&t getArrayDistance() { return arrayDistance; } public void setArrayDistance(ArrayList arrayDistance) { this.arrayDistance = arrayDistance; } public OnSelectedIndicateChangedListener getOnSelectedIndicateChangedListener() { return onSelectedIndicateChangedListener; } public void setOnSelectedIndicateChangedListener(OnSelectedIndicateChangedListener onSelectedIndicateChangedListener) { this.onSelectedIndicateChangedListener = onSelectedIndicateChangedListener; } } 看完上述内容,你们掌握Android怎么实现淘宝商品详情页效果的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
标题名称:Android怎么实现淘宝商品详情页效果-创新互联
当前路径:http://dzwzjz.com/article/djhsdo.html