溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
Android怎么實(shí)現(xiàn)淘寶商品詳情頁(yè)效果？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wè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è)置剛進(jìn)入頁(yè)面時(shí)的透明頭部 主要組成部分有返回鍵 和頭部的方形小圖片 還有分享按鈕 以及你想附加的標(biāo)題功能 默認(rèn)進(jìn)入是透明的只顯示返回按鈕
<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="評(píng)價(jià)"/> <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)簽選項(xiàng)卡 我這邊采用的是RadioGroup+radioButton實(shí)現(xiàn)的 類似于淘寶的商品、評(píng)價(jià)、詳情等標(biāo)簽
這樣我們的頁(yè)面布局頭部就完成了 下面我們來(lái)看下具體組成內(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>
這部分就是我們的具體頁(yè)面內(nèi)容 可以看到我們的詳情頁(yè)面數(shù)據(jù)使用自定義的一個(gè)Scrollview來(lái)包裹的 其中分為4塊 我們布局里面寫的很清楚 分別對(duì)應(yīng)著詳情頁(yè)中的四個(gè)模塊 當(dāng)然 我這里面只是用圖片來(lái)代替內(nèi)容了 具體內(nèi)容可自己填充
下面來(lái)看下我們具體實(shí)現(xiàn)代碼
StatusBarCompat.translucentStatusBar(this);
我這邊是采用的第三方的沉浸式透明狀態(tài)欄 你們可以自行替換
dependencies {
compile ('com.github.niorgai:StatusBarCompat:2.1.4', {
exclude group: 'com.android.support'
})
}這個(gè)是我沉浸式狀態(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圖片 并獲取圖片高度
以及初始化我們頭部部分控件的透明度 和默認(rèn)選擇第一個(gè)標(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);
這塊是我們獲取到我們的四個(gè)模塊的高度 并把高度存到集合中 傳入到我們自定義的scrollview中
private void scrollToPosition(int position){
scrollTo(0,arrayDistance.get(position));
}scrollview通過(guò)傳過(guò)來(lái)的高度進(jìn)行定位滑動(dòng) 意思就是點(diǎn)擊我們的標(biāo)題選項(xiàng)滑動(dòng)到相應(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();
}這個(gè)是獲取控件高度的方法
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) {
}
});這個(gè)監(jiān)聽(tīng)方法是監(jiān)測(cè)我們滑動(dòng)的距離 來(lái)改變我們標(biāo)題的顏色 從透明慢慢滑動(dòng)進(jìn)行顏色漸變 以及設(shè)置我們頭部控件的顏色 和展示我們的標(biāo)題選項(xiàng)卡
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ù)這塊來(lái)改變我們頭部以及標(biāo)題的顏色 根據(jù)傳入的值來(lái)進(jìn)行顏色漸變
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ù)這兩個(gè)監(jiān)聽(tīng)方法來(lái)改變我們標(biāo)題的選中tab 滑動(dòng)到不同的位置選中對(duì)應(yīng)的Tab并改變顏色 具體實(shí)現(xiàn)方法看自定義Scrollview
根據(jù)限定距離（Banner）計(jì)算百分比偏移量，實(shí)現(xiàn)顏色漸變、透明度漸變（淘寶商品詳情頁(yè)有二次顏色漸變）
@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;
}
}看完上述內(nèi)容，你們掌握Android怎么實(shí)現(xiàn)淘寶商品詳情頁(yè)效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼