【移動應(yīng)用開發(fā)技術(shù)】Android怎么實現(xiàn)淘寶商品詳情頁效果

【移動應(yīng)用開發(fā)技術(shù)】Android怎么實現(xiàn)淘寶商品詳情頁效果

Android怎么實現(xiàn)淘寶商品詳情頁效果？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。布局文件

<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>這塊主要是設(shè)置剛進入頁面時的透明頭部

主要組成部分有返回鍵

和頭部的方形小圖片還有分享按鈕以及你想附加的標(biāo)題功能默認進入是透明的只顯示返回按鈕

<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>這部分主要是我們的標(biāo)簽選項卡我這邊采用的是RadioGroup+radioButton實現(xiàn)的類似于淘寶的商品、評價、詳情等標(biāo)簽

這樣我們的頁面布局頭部就完成了

下面我們來看下具體組成內(nèi)容<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>這部分就是我們的具體頁面內(nèi)容

可以看到我們的詳情頁面數(shù)據(jù)使用自定義的一個Scrollview來包裹的其中分為4塊我們布局里面寫的很清楚分別對應(yīng)著詳情頁中的四個模塊

當(dāng)然

我這里面只是用圖片來代替內(nèi)容了

具體內(nèi)容可自己填充下面來看下我們具體實現(xiàn)代碼StatusBarCompat.translucentStatusBar(this);我這邊是采用的第三方的沉浸式透明狀態(tài)欄

你們可以自行替換dependencies

{

compile

('com.github.niorgai:StatusBarCompat:2.1.4',

{

exclude

group:

'com.android.support'

})

}這個是我沉浸式狀態(tài)欄的依賴

感興趣的可以了解一下

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());上面是獲取狀態(tài)欄的高度并且使用自定義scrollview綁定banner圖片并獲取圖片高度以及初始化我們頭部部分控件的透明度和默認選擇第一個標(biāo)簽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通過傳過來的高度進行定位滑動意思就是點擊我們的標(biāo)題選項滑動到相應(yīng)的位置

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)

{

}

});這個監(jiān)聽方法是監(jiān)測我們滑動的距離來改變我們標(biāo)題的顏色從透明慢慢滑動進行顏色漸變以及設(shè)置我們頭部控件的顏色和展示我們的標(biāo)題選項卡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);

}可以根據(jù)這塊來改變我們頭部以及標(biāo)題的顏色根據(jù)傳入的值來進行顏色漸變

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);

}

}

}

};根據(jù)這兩個監(jiān)聽方法來改變我們標(biāo)題的選中tab滑動到不同的位置選中對應(yīng)的Tab并改變顏色具體實現(xiàn)方法看自定義Scrollview根據(jù)限定距離（Banner）計算百分比偏移量，實現(xiàn)顏色漸變、透明度漸變（淘寶商品詳情頁有二次顏色漸變）@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

=

headerHe