溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
看到有人在問如何實現淘寶商品詳情頁效果，獻上效果圖
大致梳理一下思路，這里不提供源碼
狀態欄透明使用開源庫StatusBarCompat，為了兼容手機4.4
dependencies {
compile ('com.github.niorgai:StatusBarCompat:2.1.4', {
exclude group: 'com.android.support'
})
}
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
標題欄圖標透明度變化參考Api setAlpha()已過時
icon.setImageAlpha(0);
Banner控件為ViewPager,淘寶顯示為正方形，這里需要修改ViewPager measure函數
public class IdeaViewPager extends ViewPager {
private Point point;
public IdeaViewPager(Context context) {
this(context,null);
}
public IdeaViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
point = new Point();
windowManager.getDefaultDisplay().getSize(point);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(point.x,point.x);
}
}
測量View高度，獲取到高度集合綁定到ScrollView,根據ScrollView滑動距離判斷是屬于哪一個Tab選項
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();
}
重新onScrollChanged函數，實現ViewPager滑動速度比其他View慢
@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);
}
}
根據限定距離（Banner）計算百分比偏移量，實現顏色漸變、透明度漸變（淘寶商品詳情頁有二次顏色漸變）
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
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;
}
單一顏色漸變透明度，還原argb通道，修改a值
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) {
}
});
ideaScrollView.setOnSelectedIndicateChangedListener(new IdeaScrollView.OnSelectedIndicateChangedListener() {
@Override
public void onSelectedChanged(int position) {
isNeedScrollTo = false;
radioGroup.check(radioGroup.getChildAt(position).getId());
isNeedScrollTo = true;
}
});
public int getAlphaColor(float f){
return Color.argb((int) (f*255),0x09,0xc1,0xf4);
}
Tab選項屬性不能太頻繁，會有顏色值閃爍情況出現，這里需要策略
public void setRadioButtonTextColor(float percentage){
if(Math.abs(percentage-currentPercentage)>=0.1f){
for(int i=0;i<radioGroup.getChildCount();i++){
RadioButton radioButton = (RadioButton) radioGroup.getChildAt(i);
radioButton.setTextColor(radioButton.isChecked()?getRadioCheckedAlphaColor(percentage):getRadioAlphaColor(percentage));
}
this.currentPercentage = percentage;
}
}
判斷當前屬于哪個選項，根據滑動距離與傳入綁定的View高度集合來計算
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;
}
切換選項卡以及回到頂部按鈕的具體實現參考scrollTo函數
private void scrollToPosition(int position){
scrollTo(0,arrayDistance.get(position));
}
以上代碼實現了上圖效果，當然也可以使用RecyclerView AbsListView做容器。
希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
