Android仿淘寶商品詳情頁
更新時(shí)間：2018年10月26日 09:53:35 作者：AnalyzeSystem
這篇文章主要為大家詳細(xì)介紹了Android仿淘寶商品詳情頁，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
看到有人在問如何實(shí)現(xiàn)淘寶商品詳情頁效果，獻(xiàn)上效果圖
大致梳理一下思路，這里不提供源碼
狀態(tài)欄透明使用開源庫StatusBarCompat，為了兼容手機(jī)4.4
dependencies {
compile ('com.github.niorgai:StatusBarCompat:2.1.4', {
exclude group: 'com.android.support'
})
}
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
標(biāo)題欄圖標(biāo)透明度變化參考Api setAlpha()已過時(shí)
icon.setImageAlpha(0);
Banner控件為ViewPager,淘寶顯示為正方形，這里需要修改ViewPager measure函數(shù)
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,根據(jù)ScrollView滑動(dòng)距離判斷是屬于哪一個(gè)Tab選項(xià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();
}
重新onScrollChanged函數(shù)，實(shí)現(xiàn)ViewPager滑動(dòng)速度比其他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);
}
}
根據(jù)限定距離（Banner）計(jì)算百分比偏移量，實(shí)現(xiàn)顏色漸變、透明度漸變（淘寶商品詳情頁有二次顏色漸變）
@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選項(xiàng)屬性不能太頻繁，會(huì)有顏色值閃爍情況出現(xiàn)，這里需要策略
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;
}
}
判斷當(dāng)前屬于哪個(gè)選項(xiàng)，根據(jù)滑動(dòng)距離與傳入綁定的View高度集合來計(jì)算
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;
}
切換選項(xiàng)卡以及回到頂部按鈕的具體實(shí)現(xiàn)參考scrollTo函數(shù)
private void scrollToPosition(int position){
scrollTo(0,arrayDistance.get(position));
}
以上代碼實(shí)現(xiàn)了上圖效果，當(dāng)然也可以使用RecyclerView AbsListView做容器。
希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android利用BitMap獲得圖片像素?cái)?shù)據(jù)的方法
這篇文章主要介紹了Android利用BitMap獲得圖片像素?cái)?shù)據(jù)的方法,結(jié)合實(shí)例對(duì)比分析了Android獲取圖片像素?cái)?shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2016-02-02
Android Init進(jìn)程對(duì)信號(hào)的處理流程詳細(xì)介紹
這篇文章主要介紹了Android Init進(jìn)程對(duì)信號(hào)的處理流程詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-02-02
有朋友問Android怎么修改Hosts？對(duì)于這個(gè)問題，由于手頭并沒有Android設(shè)備，所以只能從網(wǎng)上搜羅了方法并總結(jié)出來，下面這篇文章主要介紹了修改Android中hosts文件的步驟,需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
Android開發(fā)實(shí)現(xiàn)圓形圖片功能示例
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)圓形圖片功能,涉及Android實(shí)現(xiàn)圓形圖片的界面布局與CirImageView組件相關(guān)使用操作技巧,需要的朋友可以參考下2019-04-04
利用Kotlin的方式如何處理網(wǎng)絡(luò)異常詳解
這篇文章主要 給大家介紹了關(guān)于利用Kotlin的方式如何處理網(wǎng)絡(luò)異常的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
Android仿拉手網(wǎng)團(tuán)購App我的收藏界面實(shí)例代碼
這篇文章主要介紹了Android仿拉手團(tuán)購網(wǎng)App我的收藏界面實(shí)例代碼,需要的朋友可以參考下2017-05-05
Android中手機(jī)錄屏并轉(zhuǎn)換GIF的兩種方式
本文主要介紹了android中手機(jī)錄屏并轉(zhuǎn)換GIF的兩種方式，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家講解了Andriod事件分發(fā)事件由來的初步認(rèn)識(shí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Android Canvas方法總結(jié)最全面詳解API(小結(jié))
本篇文章主要介紹了Android Canvas方法總結(jié)最全面詳解API(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家詳細(xì)介紹了Android RecycleView上拉加載和下拉刷新的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02