Android 仿淘宝商品页详情（头部滑动渐变）

上布局

	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    	android:layout_width="match_parent"
    	android:layout_height="match_parent"
    	xmlns:app="http://schemas.android.com/apk/res-auto"
    	android:background="#23F1F1F1">
		<LinearLayout
        	android:id="@+id/buttom_view"
        	android:layout_alignParentBottom="true"
        	android:layout_width="match_parent"
        	android:layout_height="@dimen/dp_40"
       		android:layout_marginTop="@dimen/dp_15"
        	android:background="#fff"
        	android:orientation="horizontal">
        	//这里写底部的加入购物车  立即购买等按钮
        </LinearLayout>

		<RelativeLayout
        	android:layout_above="@+id/buttom_view"
        	android:layout_width="match_parent"
        	android:layout_height="match_parent">
        	<com.example.homemodel.utils.IdeaScrollView
            android:id="@+id/ideaScrollView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <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">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">
<!--在XBanner中设置图片  IdeaViewPager 占位   img_num图片数量滑动数量-->
                        <com.example.homemodel.utils.IdeaViewPager
                            android:id="@+id/viewPager"
                            android:background="@drawable/morentu"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"/>
                        <com.stx.xhb.xbanner.XBanner
                            android:id="@+id/xbanners"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            app:AutoPlayTime="3000"
                            app:isAutoPlay="false"
                            app:pointsVisibility="false"
                            app:pointContainerLeftRightPadding="@dimen/dp_12"
                            ></com.stx.xhb.xbanner.XBanner>
                        <TextView
                            android:id="@+id/img_num"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="13/123"
                            android:textColor="#fff"
                            android:textSize="@dimen/sp_14"
                            android:paddingTop="@dimen/dp_3"
                            android:paddingBottom="@dimen/dp_3"
                            android:paddingRight="@dimen/dp_5"
                            android:paddingLeft="@dimen/dp_10"
                            android:background="@drawable/listkuangs_bg_left"
                            android:layout_alignParentRight="true"
                            android:layout_alignBottom="@+id/xbanners"
                            android:layout_marginBottom="@dimen/dp_40"/>
                    </RelativeLayout>

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#fff"
                        android:paddingBottom="@dimen/dp_6">
                        <!--图片下面的一些商品名字价格简介 发货保障 选择 参数等-->
                    </RelativeLayout>
                   
                </LinearLayout>
                <!--评价，two中写商品评价-->
                <LinearLayout
                    android:id="@+id/two"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                   
                </LinearLayout>
                <!--详情，three中写商品详情-->
                <RelativeLayout
                    android:id="@+id/three"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/dp_15"
                    android:background="#fff"
                    android:padding="@dimen/dp_12">
                    
                </RelativeLayout>
                <!--推荐，four中写商品推荐-->
                <LinearLayout
                    android:id="@+id/four"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                   
                </LinearLayout>

            </LinearLayout>
        </com.example.homemodel.utils.IdeaScrollView>
        </RelativeLayout>
	</RelativeLayout>

MainActivity

 	private IdeaViewPager viewPager;
    private IdeaScrollView ideaScrollView;
    private LinearLayout header;
    private RadioGroup radioGroup;
    private LinearLayout headerParent;
    private ImageView fh;
    private View layer;
    private float currentPercentage = 0;
    private TextView img_num;

    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);
                }
            }
        }
    };
    private boolean isNeedScrollTo = true;
    private TextView mTextviewGoodsTile;
    private XBanner xbanners;
 	@Override
    protected void initView() {

        //详情title
        mTextviewGoodsTile = (TextView) get(R.id.text_view_goods_title);
        //禁止软件横屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
        //解决刚进入部分手机弹出软键盘
        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
        //StatusBarCompat.translucentStatusBar(this);
        header = (LinearLayout)findViewById(R.id.header);
        headerParent = (LinearLayout)findViewById(R.id.headerParent);
    //    icon = (TextView)findViewById(R.id.icon);
        radioGroup = (RadioGroup)findViewById(R.id.radioGroup);
        ideaScrollView = (IdeaScrollView)findViewById(R.id.ideaScrollView);
        viewPager = (IdeaViewPager)findViewById(R.id.viewPager);
        layer = findViewById(R.id.layer);
        xbanners = findViewById(R.id.xbanners);
        img_num = findViewById(R.id.img_num);
        fh = findViewById(R.id.fh);
        fh.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        Rect rectangle= new Rect();
        getWindow().getDecorView().getWindowVisibleDisplayFrame(rectangle);
        ideaScrollView.setViewPager(viewPager,getMeasureHeight(headerParent)-rectangle.top);
     //   icon.setAlpha(0);
        radioGroup.setAlpha(0);
        radioGroup.check(radioGroup.getChildAt(0).getId());
        int width = View.MeasureSpec.makeMeasureSpec(0,
                View.MeasureSpec.UNSPECIFIED);
        int height = View.MeasureSpec.makeMeasureSpec(0,
                View.MeasureSpec.UNSPECIFIED);
        viewPager.measure(width, height);
        int a = viewPager.getMeasuredWidth(); // 获取宽度
        RelativeLayout.LayoutParams linearParams; //取控件textView当前的布局参数
        linearParams = (RelativeLayout.LayoutParams) xbanners.getLayoutParams();

        linearParams.width = a;// 控件的宽强制设成30
        linearParams.height = a;// 控件的高强制设成20

        xbanners.setLayoutParams(linearParams);
        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);

        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.setAlpha((int) ((percentage>0.9f?1.0f:percentage)*255));
                radioGroup.setAlpha((percentage>0.9f?1.0f:percentage)*255);
                header.setAlpha((percentage>0.9f?1.0f:percentage)*255);
                fh.setBackground(getResources().getDrawable(R.drawable.yuan_radious));
                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;
            }
        });

        radioGroup.setOnCheckedChangeListener(radioGroupListener);
    }
	/**
	//给Banner设置数据
	  img_num.setText("1"+"/"+bannerList.size());
            // 为XBanner绑定数据
            xbanners .setData(bannerList,null);//第二个参数为提示文字资源集合
            // XBanner适配数据
            xbanners.setmAdapter(new XBanner.XBannerAdapter() {
                @Override
                public void loadBanner(XBanner banner, Object model, View view, int position) {
                    Glide.with(GoodsCommodityActivity.this).load(
                            bannerList.get(position)).into((ImageView) view);

                }
            });
            xbanners.setPageTransformer(Transformer.Default);//横向移动
            xbanners.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                }

                @Override
                public void onPageSelected(int position) {
                    img_num.setText(position+1+"/"+bannerList.size());
                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });
	 
	  */

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

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

 	public int getAlphaColor(float f){
        return Color.argb((int) (f*255),51,51,51);
    }

    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),255,113,0);
    }

    public int getRadioAlphaColor(float f){     //未选中颜色
        return Color.argb((int) (f*255),0xFF,0xFF,0xFF);
    }

差点忘了自定义ScrollView和ViewPager
时间紧迫就不解释了，自行理解
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;
    }
}

IdeaViewPager

import android.content.Context;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.WindowManager;

import androidx.viewpager.widget.ViewPager;

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