当前位置：移动技术网 > IT编程>移动开发>Android > Android仿淘宝商品详情页效果

Android仿淘宝商品详情页效果

2019年08月01日 | 移动技术网IT编程 | 我要评论

嘉峪关物流,romeo must die,山进

本文实例为大家分享了android仿淘宝商品详情页的具体代码，供大家参考，具体内容如下

demo地址：先上效果图

效果就是上面图片的效果接下来看看如何实现

首先我们来看下布局文件

 <linearlayout
      android:id="@+id/header"
      android:layout_width="match_parent"
      android:layout_height="72dp"
      android:paddingtop="24dp"
      android:background="#00ffffff"
      android:orientation="horizontal">
 
      <imageview
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:src="@drawable/back"
        />
      <view
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
     <imageview
       android:id="@+id/icon"
       android:layout_width="30dp"
       android:layout_height="30dp"
       android:src="@drawable/aa"
       android:layout_gravity="center"/>
      <view
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
      <imageview
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        />
 </linearlayout>

这块主要是设置刚进入页面时的透明头部主要组成部分有返回键和头部的方形小图片还有分享按钮以及你想附加的标题功能默认进入是透明的只显示返回按钮

 <framelayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
      <radiogroup
        android:id="@+id/radiogroup"
        android:background="#00ffffff"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="48dp">
 
        <radiobutton
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:button="@null"
          android:textcolor="#00000000"
          android:gravity="center"
          android:text="宝贝"/>
 
        <radiobutton
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:button="@null"
          android:textcolor="#00000000"
          android:gravity="center"
          android:text="评价"/>
 
        <radiobutton
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:button="@null"
          android:textcolor="#00000000"
          android:gravity="center"
          android:text="详情"/>
 
        <radiobutton
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:button="@null"
          android:textcolor="#00000000"
          android:text="推荐"/>
 
      </radiogroup>
 
      <view
        android:id="@+id/layer"
        android:layout_width="match_parent"
        android:background="#00ffffff"
        android:layout_height="48dp"/>
</framelayout>

这部分主要是我们的标签选项卡我这边采用的是radiogroup+radiobutton实现的类似于淘宝的商品、评价、详情等标签

这样我们的页面布局头部就完成了下面我们来看下具体组成内容

<com.text.lg.ideascrollview.ideascrollview
    android:id="@+id/ideascrollview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <linearlayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">
      <linearlayout
        android:id="@+id/one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <com.text.lg.ideascrollview.ideaviewpager
          android:id="@+id/viewpager"
          android:layout_width="match_parent"
          android:background="@drawable/aa"
          android:layout_height="wrap_content"/>
        <imageview
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:src="@drawable/one"/>
      </linearlayout>
 
      <linearlayout
        android:id="@+id/two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <imageview
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:src="@drawable/two"/>
 
        <imageview
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:src="@drawable/three"/>
      </linearlayout>
 
      <imageview
        android:id="@+id/three"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/four"/>
      <linearlayout
        android:id="@+id/four"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <imageview
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:src="@drawable/five"/>
 
        <imageview
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:src="@drawable/six"/>
        <imageview
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:src="@drawable/six"/>
        <imageview
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:src="@drawable/six"/>
      </linearlayout>
 
    </linearlayout>
</com.text.lg.ideascrollview.ideascrollview>

这部分就是我们的具体页面内容可以看到我们的详情页面数据使用自定义的一个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);
arraylist<integer> ararydistance = 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<radiogroup.getchildcount();i++){
        radiobutton radiobutton = (radiobutton) radiogroup.getchildat(i);
        radiobutton.settextcolor(radiobutton.ischecked()?getradiocheckedalphacolor(currentpercentage):getradioalphacolor(currentpercentage));
        if(radiobutton.ischecked()&&isneedscrollto){
          ideascrollview.setposition(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, 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;
  }

下面是自定义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;
 
 arraylist<integer> arraydistance = 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<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;
 }
 
 private void scrolltoposition() {
  scrolltoposition(position);
 }
 
 private void scrolltoposition(int position){
  scrollto(0,arraydistance.get(position));
 }
 
 public void setviewpager(ideaviewpager viewpager,int headerheight){
  this.viewpager = viewpager;
  this.headerheight = headerheight;
 }
 
 public interface onscrollchangedcolorlistener{
 
  void onchanged(float percentage);
 
  void onchangedfirstcolor(float percentage);
 
  void onchangedsecondcolor(float percentage);
 
 }
 
 public interface onselectedindicatechangedlistener{
 
  void onselectedchanged(int position);
 }
 
 private onselectedindicatechangedlistener onselectedindicatechangedlistener;
 
 private onscrollchangedcolorlistener onscrollchangedcolorlistener;
 
 public onscrollchangedcolorlistener getonscrollchangedcolorlistener() {
  return onscrollchangedcolorlistener;
 }
 
 public void setonscrollchangedcolorlistener(onscrollchangedcolorlistener onscrollchangedcolorlistener) {
  this.onscrollchangedcolorlistener = onscrollchangedcolorlistener;
 }
 
 public ideaviewpager getviewpager() {
  return viewpager;
 }
 
 public int getposition() {
  return position;
 }
 
 public void setposition(int position) {
  this.position = position;
  scrolltoposition();
 }
 
 public arraylist<integer> getarraydistance() {
  return arraydistance;
 }
 
 public void setarraydistance(arraylist<integer> arraydistance) {
  this.arraydistance = arraydistance;
 }
 
 public onselectedindicatechangedlistener getonselectedindicatechangedlistener() {
  return onselectedindicatechangedlistener;
 }
 
 public void setonselectedindicatechangedlistener(onselectedindicatechangedlistener onselectedindicatechangedlistener) {
  this.onselectedindicatechangedlistener = onselectedindicatechangedlistener;
 }
}

以上代码就实现了文中效果图样式。

本文借鉴了大佬博客内容 android仿淘宝商品详情页

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Android 应用Crash 后自动重启的方法小结

前提首先，我们肯定要在application里面注册一个crashhandler，监听应用crashpublic class testapplication e... [阅读全文]
Android FTP服务器上传文件攻略(代码详解)

1.前言在开发中，会遇到向ftp服务器上传文件的需求,首先要导入commons-net-3.3.jar 然后利用api进行相关操作，具体功能如下：ftp相关代码... [阅读全文]
Android studio 解决logcat无过滤工具栏的操作

在logcat标题栏右键先windows mode，这时多数能恢复过滤工具栏，要恢复之前的停靠样式再同样点右键去掉windows mode的勾即可补充知识：an... [阅读全文]
Android Studio 恢复小窗口停靠模式(Docked Mode)

安卓studio在使用小窗口时，如果我们点击取消了窗口的docked mode模式，窗口就会变成，你一旦触发窗口以外的区域，窗口就会龟缩回去。此时，如果你想要恢... [阅读全文]
Android项目中实体类entity的作用详解

估计很多入门安卓的朋友对entity很困惑，为什么要写实体类？有什么用？写来干什么？对于实体类的理解我入门的时候也是困惑了好久，后面用多了才慢慢理解，这篇博客就... [阅读全文]
Android studio保存logcat日志到本地的操作

windows环境下1、输出logcat日志到本地文件adb logcat -> f:/logcat.txt2、输出带时间的logcat日志到本地文件：a... [阅读全文]
Android Studio快捷键生成TAG、Log.x日志输出介绍

生成taglogt+tab键：private static final string tag = "extract";生成log.d()logd+tab键：lo... [阅读全文]
Android studio 禁用AndroidX方式

gradle.properties文件中添加android.useandroidx=false #禁用androidxandroid.enablejetifie... [阅读全文]
Flutter 透明状态栏及字体颜色的设置方法

注：底色透明是否生效与android版本有关，版本过低设置无效1.在main.dart内设置void main(){ runapp(new myapp()); ... [阅读全文]
Flutter中mixin的使用详解

mixin是什么mixin应该怎么理解呢，对java系出身的我来说，这是一个新概念，各类资料的介绍也没找到一个清晰的定义。从个人理解来看，可以把它想象为kotl... [阅读全文]

网友评论


验证码：

Android仿淘宝商品详情页效果

2019年08月01日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论