本文实例为大家分享了Android仿淘宝商品详情页的具体代码，供大家参考，具体内容如下
Demo地址：先上效果图
效果就是上面图片的效果 接下来看看如何实现
首先我们来看下布局文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<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> |
这块主要是设置刚进入页面时的透明头部 主要组成部分有返回键 和头部的方形小图片 还有分享按钮 以及你想附加的标题功能 默认进入是透明的只显示返回按钮
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<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实现的 类似于淘宝的商品、评价、详情等标签
这样我们的页面布局头部就完成了 下面我们来看下具体组成内容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<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块 我们布局里面写的很清楚 分别对应着详情页中的四个模块 当然 我这里面只是用图片来代替内容了 具体内容可自己填充
下面来看下我们具体实现代码
|
1
|
StatusBarCompat.translucentStatusBar(this); |
我这边是采用的第三方的沉浸式透明状态栏 你们可以自行替换
|
1
2
3
4
5
|
dependencies { compile ('com.github.niorgai:StatusBarCompat:2.1.4', { exclude group: 'com.android.support' }) } |
这个是我沉浸式状态栏的依赖 感兴趣的可以了解一下
|
1
2
3
4
5
6
|
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图片 并获取图片高度
以及初始化我们头部部分控件的透明度 和默认选择第一个标签
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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中
|
1
2
3
|
private void scrollToPosition(int position){ scrollTo(0,arrayDistance.get(position)); } |
scrollview通过传过来的高度进行定位滑动 意思就是点击我们的标题选项滑动到相应的位置
|
1
2
3
4
5
6
7
8
|
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(); } |
这个是获取控件高度的方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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) { } }); |
这个监听方法是监测我们滑动的距离 来改变我们标题的颜色 从透明慢慢滑动进行颜色渐变 以及设置我们头部控件的颜色 和展示我们的标题选项卡
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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); } |
可以根据这块来改变我们头部以及标题的颜色 根据传入的值来进行颜色渐变
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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）计算百分比偏移量，实现颜色渐变、透明度渐变（淘宝商品详情页有二次颜色渐变）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
@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的全部代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
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仿淘宝商品详情页
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_36020854/article/details/82702167?utm_source=blogxgwz8
