Android中实现简单的仿京东详情页面

前言：

之前做过一个商城项目，实现了类似京东的详情页，采用Coordinatorlatout+Appbarlayout+toolbar实现，实现的效果主要是沉浸式状态栏和标题栏，当图片滑动时标题栏和按钮颜色发生相应变化.

1.布局代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_cl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:descendantFocusability="blocksDescendants"
    android:orientation="vertical"
    tools:ignore="MissingConstraints">
​
​
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/cl_good"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
​
​
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/al_shop_detail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:theme="@style/AppTheme.AppBarOverlay">
​
​
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/coll_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:expandedTitleMarginEnd="48dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_collapseMode="pin"
                app:layout_collapseParallaxMultiplier="0.7"
                app:layout_scrollFlags="scroll">
​
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
​
​
                    <com.youth.banner.Banner
                        android:id="@+id/shop_banner"
                        android:layout_width="match_parent"
                        android:layout_height="355dp"
                        app:image_scale_type="fit_center"
                        android:background="@color/colorPrimary"
                        app:indicator_drawable_selected="@drawable/selected_radius"
                        app:indicator_drawable_unselected="@drawable/unselected_radius"
                        app:indicator_height="6dp"
                        app:indicator_width="6dp">
​
                    </com.youth.banner.Banner>
​
                    <RelativeLayout
                        android:id="@+id/rl_take"
                        android:layout_width="match_parent"
                        android:layout_height="45dp"
                        android:visibility="visible">
​
                        <ImageView
                            android:id="@+id/iv_buy_one"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentLeft="true"
                            android:background="@mipmap/buy_one" />
​
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="45dp"
                            android:layout_toRightOf="@+id/iv_buy_one">
​
                            <TextView
                                android:id="@+id/tv_take_name"
                                android:layout_width="0dp"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:background="@color/cff4d44"
                                android:ellipsize="end"
                                android:gravity="left|center"
                                android:maxLines="2"
                                android:paddingLeft="6dp"
                                android:paddingRight="6dp"
                                android:textColor="@color/white"
                                android:textSize="12sp"
                                android:text="购买本产品1件可获赠欧莱雅诱惑花蜜礼盒商品1件" />
​
                            <RelativeLayout
                                android:layout_width="0dp"
                                android:layout_height="match_parent"
                                android:layout_alignParentRight="true"
                                android:layout_weight="1"
                                android:background="@color/cff4d44">
​
                                <TextView
                                    android:id="@+id/tv_end_time"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_alignParentRight="true"
                                    android:layout_marginLeft="57dp"
                                    android:gravity="right"
                                    android:paddingTop="6dp"
                                    android:paddingRight="10dp"
                                    android:text="活动截止时间 "
                                    android:textColor="@color/white"
                                    android:textSize="12sp" />
​
                                <TextView
                                    android:id="@+id/tv_year"
                                    android:layout_width="27dp"
                                    android:layout_height="wrap_content"
                                    android:layout_below="@+id/tv_end_time"
                                    android:layout_alignParentRight="true"
                                    android:layout_marginTop="4dp"
                                    android:layout_marginRight="70dp"
                                    android:background="@drawable/shop_time_bg"
                                    android:gravity="center"
                                    android:textColor="@color/cff4d44"
                                    android:textSize="10sp"
                                    android:text="2020" />
​
                                <View
                                    android:id="@+id/tv_mouth_1"
                                    android:layout_width="6dp"
                                    android:layout_height="1dp"
                                    android:layout_below="@+id/tv_end_time"
                                    android:layout_alignParentRight="true"
                                    android:layout_centerInParent="true"
                                    android:layout_marginTop="10dp"
                                    android:layout_marginRight="60dp"
                                    android:background="@color/white"
                                    android:gravity="center_horizontal"
                                    android:text="-" />
​
                                <TextView
                                    android:id="@+id/tv_mouth"
                                    android:layout_width="16dp"
                                    android:layout_height="wrap_content"
                                    android:layout_below="@+id/tv_end_time"
                                    android:layout_alignParentRight="true"
                                    android:layout_marginTop="4dp"
                                    android:layout_marginRight="40dp"
                                    android:background="@drawable/shop_time_bg"
                                    android:gravity="center"
                                    android:textColor="@color/cff4d44"
                                    android:textSize="10sp"
                                    android:text="08" />
​
                                <View
                                    android:id="@+id/tv_mouth_2"
                                    android:layout_width="6dp"
                                    android:layout_height="1dp"
                                    android:layout_below="@+id/tv_end_time"
                                    android:layout_centerHorizontal="true"
                                    android:layout_marginTop="10dp"
                                    android:layout_marginRight="4dp"
                                    android:layout_toLeftOf="@+id/tv_day"
                                    android:background="@color/white"
                                    android:gravity="center"
                                    android:text="-" />
​
                                <TextView
                                    android:id="@+id/tv_day"
                                    android:layout_width="16dp"
                                    android:layout_height="wrap_content"
                                    android:layout_below="@+id/tv_end_time"
                                    android:layout_alignParentRight="true"
                                    android:layout_marginTop="4dp"
                                    android:layout_marginRight="10dp"
                                    android:background="@drawable/shop_time_bg"
                                    android:gravity="center"
                                    android:textColor="@color/cff4d44"
                                    android:text="22"
                                    android:textSize="10sp"/>
                            </RelativeLayout>
                        </LinearLayout>
                    </RelativeLayout>
​
                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="13dp">
​
                        <TextView
                            android:id="@+id/shop_title_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@color/c666666"
                            android:textSize="14sp"
                            android:text="小清新系列" />
​
                        <TextView
                            android:id="@+id/shop_name_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:textColor="@color/person_info_text_content_color"
                            android:textSize="16sp"
                            app:layout_constraintTop_toBottomOf="@+id/shop_title_tv"
                            android:text="巴黎欧莱雅护理液" />
​
                        <TextView
                            android:id="@+id/shop_price_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="￥100.00"
                            android:textColor="@color/shop_price_color"
                            android:textSize="16sp"
                            app:layout_constraintTop_toBottomOf="@+id/shop_name_tv" />
​
                        <TextView
                            android:id="@+id/shop_vip_price_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="11dp"
                            android:layout_marginTop="8dp"
                            android:text="￥80"
                            android:textColor="@color/shop_price_color"
                            android:textSize="12sp"
                            app:layout_constraintLeft_toRightOf="@+id/shop_price_tv"
                            app:layout_constraintTop_toBottomOf="@+id/shop_name_tv" />
​
                        <TextView
                            android:id="@+id/shop_specif_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="￥特价40"
                            android:textColor="@color/person_info_text_color"
                            android:textSize="12sp"
                            app:layout_constraintTop_toBottomOf="@+id/shop_price_tv" />
​
                        <TextView
                            android:id="@+id/sales_volume_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="月销量笔"
                            android:textColor="@color/person_info_text_color"
                            android:textSize="12sp"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintTop_toBottomOf="@+id/shop_price_tv" />
​
                        <RelativeLayout
                            android:id="@+id/coupon_rl"
                            android:layout_width="match_parent"
                            android:layout_height="44dp"
                            android:layout_marginTop="12dp"
                            android:orientation="horizontal"
                            android:visibility="visible"
                            app:layout_constraintTop_toBottomOf="@+id/shop_specif_tv">
​
                            <TextView
                                android:id="@+id/coupon_tv"
                                android:layout_width="35dp"
                                android:layout_height="15dp"
                                android:layout_alignParentLeft="true"
                                android:layout_centerInParent="true"
                                android:background="@drawable/coupon_bg"
                                android:gravity="center"
                                android:text="领劵"
                                android:textColor="@color/shop_price_color"
                                android:textSize="10sp" />
​
                            <TextView
                                android:id="@+id/coupon_content_tv"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerInParent="true"
                                android:layout_marginLeft="8dp"
                                android:gravity="center"
                                android:text="满99减5优惠券;满299减10 优惠券"
                                android:textColor="@color/find_news_time_color"
                                android:textSize="14sp" />
​
                            <ImageView
                                android:id="@+id/coupon_next_iv"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_alignParentRight="true"
                                android:layout_centerInParent="true"
                                android:src="@mipmap/next_iv" />
                        </RelativeLayout>
​
                        <RelativeLayout
                            android:id="@+id/promotions_rl"
                            android:layout_width="match_parent"
                            android:layout_height="44dp"
                            android:orientation="horizontal"
                            android:visibility="visible"
                            app:layout_constraintTop_toBottomOf="@+id/coupon_rl">
​
                            <TextView
                                android:id="@+id/promotions_tv"
                                android:layout_width="35dp"
                                android:layout_height="15dp"
                                android:layout_alignParentLeft="true"
                                android:layout_centerInParent="true"
                                android:background="@drawable/coupon_bg"
                                android:gravity="center"
                                android:text="促销"
                                android:textColor="@color/shop_price_color"
                                android:textSize="10sp" />
​
                            <TextView
                                android:id="@+id/promotions_content_tv"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerInParent="true"
                                android:layout_marginLeft="8dp"
                                android:gravity="center"
                                android:text="满99减5优惠券;满299减10 优惠券"
                                android:textColor="@color/find_news_time_color"
                                android:textSize="14sp" />
​
                            <ImageView
                                android:id="@+id/promotions_next_iv"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_alignParentRight="true"
                                android:layout_centerInParent="true"
                                android:src="@mipmap/next_iv" />
                        </RelativeLayout>
​
​
                    </androidx.constraintlayout.widget.ConstraintLayout>
​
                </LinearLayout>
​
            </com.google.android.material.appbar.CollapsingToolbarLayout>
​
​
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/shop_tablayout"
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_marginTop="44dp"
                android:background="#ffffff"
                android:layout_gravity="center"
                app:layout_behavior="com.leda.shop.widget.recyclerView.FlingBehavior"
                app:tabIndicatorColor="#E94D41"
                app:tabIndicatorHeight="2.0dp"
                app:tabSelectedTextColor="#E94D41"
                app:tabTextColor="@color/c333333">
​
​
                <com.google.android.material.tabs.TabItem
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/body_detail" />
​
                <com.google.android.material.tabs.TabItem
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/product_case" />
​
​
                <com.google.android.material.tabs.TabItem
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/evaluation" />
            </com.google.android.material.tabs.TabLayout>
​
        </com.google.android.material.appbar.AppBarLayout>
​
​
        <androidx.core.widget.NestedScrollView
            android:id="@+id/nsv_good"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="50dp"
            android:fillViewport="true"
            android:scrollbars="none"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            app:layout_constraintBottom_toBottomOf="parent">
​
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:descendantFocusability="blocksDescendants">
​
​
                <androidx.viewpager.widget.ViewPager
                    android:id="@+id/viewPager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:nestedScrollingEnabled="false">
​
                </androidx.viewpager.widget.ViewPager>
            </LinearLayout>
​
        </androidx.core.widget.NestedScrollView>
​
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
​
    <TextView
        android:id="@+id/tv_home_statusbar"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:visibility="gone"
        app:layout_constraintTop_toTopOf="parent" />
​
    <LinearLayout
        android:id="@+id/ll_head"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@+id/tv_home_statusbar">
​
​
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/title_height"
            android:layout_marginTop="20dp"
            app:navigationIcon="@mipmap/img_back"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
​
            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text=""
                android:textColor="@color/c333333"
                android:textSize="18sp" />
​
            <ImageView
                android:id="@+id/iv_title_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:layout_marginRight="15dp"
                android:onClick="onClick" />
        </androidx.appcompat.widget.Toolbar>
    </LinearLayout>
​
​
    <LinearLayout
        android:id="@+id/ll_cart"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/white"
        android:orientation="horizontal"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent">
​
​
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginBottom="7dp"
            android:orientation="horizontal">
​
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="52dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:padding="2dp">
​
                <TextView
                    android:id="@+id/cart_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:drawableTop="@mipmap/cart"
                    android:drawablePadding="3dp"
                    android:gravity="center"
                    android:text="购物车"
                    android:textColor="@color/find_news_time_color"
                    android:textSize="10sp"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
​
                <TextView
                    android:id="@+id/tv_cart_count"
                    android:layout_width="12dp"
                    android:layout_height="12dp"
                    android:layout_marginBottom="4dp"
                    android:background="@drawable/shape_e33d32_round"
                    android:gravity="center"
                    android:minWidth="15dp"
                    android:text="11"
                    android:textColor="@color/white"
                    android:textSize="8sp"
                    android:visibility="visible"
                    app:layout_constraintRight_toRightOf="@+id/cart_tv"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:ignore="UnknownIdInLayout" />
            </androidx.constraintlayout.widget.ConstraintLayout>
​
            <TextView
                android:id="@+id/service_tv"
                android:layout_width="52dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:drawableTop="@mipmap/custom_service"
                android:drawablePadding="2dp"
                android:gravity="center"
                android:text="客服"
                android:textColor="@color/find_news_time_color"
                android:textSize="10sp" />
​
            <TextView
                android:id="@+id/collection_tv"
                android:layout_width="52dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:drawableTop="@mipmap/product_collection_normal"
                android:drawablePadding="3dp"
                android:gravity="center"
                android:text="收藏"
                android:textColor="@color/find_news_time_color"
                android:textSize="10sp" />
        </LinearLayout>
​
        <Button
            android:id="@+id/add_cart_btn"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/add_cart_color"
            android:gravity="center"
            android:padding="4dp"
            android:text="加入购物车"
            android:textColor="@color/white"
            android:textSize="16sp" />
​
        <Button
            android:id="@+id/buy_now_btn"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/buy_now_color"
            android:gravity="center"
            android:padding="6dp"
            android:text="立即购买"
            android:textColor="@color/white"
            android:textSize="16sp" />
    </LinearLayout>
​
​
</androidx.constraintlayout.widget.ConstraintLayout>

2.MainActivity代码:

package com.example.jdshopdeail;
​
import android.annotation.SuppressLint;
import android.graphics.Color;
import android.os.Build;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
​
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.widget.Toolbar;
import androidx.collection.ArrayMap;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import androidx.core.widget.NestedScrollView;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
​
import com.example.jdshopdeail.adapter.ViewPagerAdapter;
import com.example.jdshopdeail.base.BaseActivity;
import com.example.jdshopdeail.bean.BuyGoodBean;
import com.example.jdshopdeail.bean.CartComputeBean;
import com.example.jdshopdeail.bean.ShopDetailBean;
import com.example.jdshopdeail.fragment.FMBadyDetail;
import com.example.jdshopdeail.fragment.FMCommonList;
import com.example.jdshopdeail.fragment.FMProductCase;
import com.example.jdshopdeail.impl.CartImpl;
import com.example.jdshopdeail.impl.UserImpl;
import com.example.jdshopdeail.util.GlideImageLoader;
import com.example.jdshopdeail.util.ParseUtils;
import com.example.jdshopdeail.util.ScreenUtil;
import com.example.jdshopdeail.util.StatusBarUtils;
import com.google.android.material.appbar.AppBarLayout;
import com.google.android.material.appbar.CollapsingToolbarLayout;
import com.google.android.material.tabs.TabLayout;
import com.jaeger.library.StatusBarUtil;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
​
import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.List;
​
import butterknife.BindView;
import butterknife.OnClick;
​
​
public class MainActivity extends BaseActivity {
    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.shop_banner)
    Banner shopBanner;
    @BindView(R.id.shop_tablayout)
    TabLayout shopTablayout;
    @BindView(R.id.viewPager)
    ViewPager viewPager;
    @BindView(R.id.shop_title_tv)
    TextView shopTitleTv;
    @BindView(R.id.shop_name_tv)
    TextView shopNameTv;
    @BindView(R.id.shop_price_tv)
    TextView shopPriceTv;
    @BindView(R.id.shop_vip_price_tv)
    TextView shopVipPriceTv;
    @BindView(R.id.shop_specif_tv)
    TextView shopSpecifTv;
    @BindView(R.id.sales_volume_tv)
    TextView salesVolumeTv;
    @BindView(R.id.coupon_tv)
    TextView couponTv;
    @BindView(R.id.coupon_content_tv)
    TextView couponContentTv;
    @BindView(R.id.coupon_next_iv)
    ImageView couponNextIv;
    @BindView(R.id.coupon_rl)
    RelativeLayout couponRl;
    @BindView(R.id.promotions_tv)
    TextView promotionsTv;
    @BindView(R.id.promotions_content_tv)
    TextView promotionsContentTv;
    @BindView(R.id.promotions_next_iv)
    ImageView promotionsNextIv;
    @BindView(R.id.promotions_rl)
    RelativeLayout promotionsRl;
    @BindView(R.id.toolbar_title)
    TextView toolbarTitle;
    @BindView(R.id.iv_title_right)
    ImageView ivTitleRight;
    @BindView(R.id.cart_tv)
    TextView cartTv;
    @BindView(R.id.service_tv)
    TextView serviceTv;
    @BindView(R.id.collection_tv)
    TextView collectionTv;
    @BindView(R.id.ll_head)
    LinearLayout llHead;
    @BindView(R.id.add_cart_btn)
    Button addCartBtn;
    @BindView(R.id.buy_now_btn)
    Button buyNowBtn;
    @BindView(R.id.al_shop_detail)
    AppBarLayout alShopDetail;
    @BindView(R.id.coll_toolbar_layout)
    CollapsingToolbarLayout collToolbarLayout;
    @BindView(R.id.content_cl)
    ConstraintLayout contentCl;
    @BindView(R.id.tv_home_statusbar)
    TextView tvHomeStatusbar;
    @BindView(R.id.nsv_good)
    NestedScrollView nsvGood;
    @BindView(R.id.ll_cart)
    LinearLayout llCart;
    CoordinatorLayout clGood;
    @BindView(R.id.tv_cart_count)
    TextView tvCartCount;
    @BindView(R.id.tv_take_name)
    TextView tvTakeName;
    @BindView(R.id.tv_year)
    TextView tvYear;
    @BindView(R.id.tv_mouth)
    TextView tvMouth;
    @BindView(R.id.tv_day)
    TextView tvDay;
    @BindView(R.id.rl_take)
    RelativeLayout rlTake;
    private List<Fragment> list;
    //private LiveAdapter liveAdapter;
    private int mAlpha;
    private String goods_id;
    private ShopDetailBean detailModel;
    private FMCommonList fmCommonList = new FMCommonList();
    private FMProductCase fmProductCase = new FMProductCase();
    private FMBadyDetail fmBadyDetail = new FMBadyDetail();
    private AlertDialog dialog;
    private BuyGoodBean goodModel;
    private int goodCount;
    private String collert_id;
    private String goods_name;
    private String goods_img;
    private String goods_spec;
    private String shop_price;
    private String address;
    private DecimalFormat decimalFormat = new DecimalFormat("0.00");
    private boolean isBottom;
    private boolean isCollect = false;
    private AlertDialog addDialog;
​
    @Override
    protected int getLayoutId() {
        return R.layout.activity_main;
    }
​
    protected void initView() {
        toolbar.setTitle("");
        setStatusBar(tvHomeStatusbar);
        viewPager.setOffscreenPageLimit(3);
        setSupportActionBar(toolbar);
        initToolBar();
        initScrollView();
        initBanner();
        initTabLayout();
    }
​
    private void initBanner() {
        List<String> list = new ArrayList<>();
        list.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic21363tj30ci08ct96.jpg");
        list.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic259ohaj30ci08c74r.jpg");
        list.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2b16zuj30ci08cwf4.jpg");
        list.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2e7vsaj30ci08cglz.jpg");
​
        //设置banner样式
        shopBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
        //设置图片加载器
        shopBanner.setImageLoader(new GlideImageLoader());
        //设置banner动画效果
        shopBanner.setBannerAnimation(Transformer.Default);
        //设置自动轮播，默认为true
        shopBanner.isAutoPlay(true);
        //设置轮播时间
        shopBanner.setDelayTime(3000);
        //设置指示器位置（当banner模式中有指示器时）
        shopBanner.setIndicatorGravity(BannerConfig.CENTER);
        //banner设置方法全部调用完毕时最后调用
        shopBanner.setImages(list);
        shopBanner.start();
    }
​
    private void initScrollView() {
        alShopDetail.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
​
                if (appBarLayout.getTotalScrollRange() == -verticalOffset) {
                    if (isBottom) {
//                        viewPager.setCurrentItem(1);
                    } else {
                        isBottom = true;
                    }
                } else {
                    isBottom = false;
                }
                int minHeight = 50;
                if (shopBanner != null && shopBanner.getMeasuredHeight() != 0) {
                    int maxHeight = shopBanner.getMeasuredHeight() / 2;
                    if (maxHeight == 0) {
                        maxHeight = 255;
                    }
                    if (Math.abs(verticalOffset) <= minHeight) {
                        mAlpha = 0;
                    } else if (Math.abs(verticalOffset) > maxHeight) {
                        mAlpha = 255;
                    } else {
                        mAlpha = (Math.abs(verticalOffset) - minHeight) * 200 / (maxHeight - minHeight);
                    }
                    if (mAlpha <= 0) {
                        llHead.setBackgroundColor(Color.argb(0, 255, 255, 255));
                    } else if (mAlpha >= 255) {
                        llHead.setBackgroundColor(Color.argb(mAlpha, 255, 255, 255));
                    } else {
                        llHead.setBackgroundColor(Color.argb(mAlpha, 255, 255, 255));
                    }
                }
            }
        });
    }
​
    private void initTabLayout() {
        list = new ArrayList<>();
        list.add(fmBadyDetail);//宝贝详情
        list.add(fmProductCase);//产品案例
        list.add(fmCommonList);//商品评价
        ViewPagerAdapter vpAdapter = new ViewPagerAdapter(getSupportFragmentManager(), list);
        viewPager.setAdapter(vpAdapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener
                (shopTablayout));
        shopTablayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener
                (viewPager));
    }
​
​
    @Override
    protected void addListener() {
​
    }
​
    private void initToolBar() {
​
    }
​
    @Override
    protected void setStatusBar() {
        StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, null);
        StatusBarUtils.StatusBarLightMode(this, StatusBarUtils.StatusBarLightMode(this));
    }
​
    /**
     * 加入购物车
     */
    @SuppressLint("SetTextI18n")
    private void showAddCartDialog(final int type) {
        AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.AlertDialogStyle);
        addDialog = builder.show();
        LayoutInflater inflater = LayoutInflater.from(this);
        View view = inflater.inflate(R.layout.dialog_add_cart, null);
        WindowManager.LayoutParams params = addDialog.getWindow().getAttributes();
        params.width = ScreenUtil.getScreenWidth(this);
        //主动弹出输入法键盘
        addDialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM);
        addDialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);
        addDialog.getWindow().setGravity(Gravity.BOTTOM);
        addDialog.getWindow().setAttributes(params);
        addDialog.getWindow().setContentView(view);
        addDialog.setCanceledOnTouchOutside(true);
        addDialog.setCancelable(true);
        final TextView clearTv = view.findViewById(R.id.clear_tv);
        final ImageView addBtn = view.findViewById(R.id.add_count_btn);
        final ImageView minusBtn = view.findViewById(R.id.minus_count_btn);
        final Button finishBtn = view.findViewById(R.id.finish_btn);
        final EditText cartCount = view.findViewById(R.id.edit_count);
        final RelativeLayout rlAdd = view.findViewById(R.id.rl_add);
        cartCount.setSelection(getTV(cartCount).length());
        finishBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });
        final int count = ParseUtils.parseInt(cartCount.getText().toString());
        if (count <= 1) {
            cartCount.setClickable(false);
            minusBtn.setBackgroundResource(R.mipmap.minus_grey);
        } else {
            minusBtn.setBackgroundResource(R.mipmap.minus);
        }
        minusBtn.setOnClickListener(v -> {
            int count1 = ParseUtils.parseInt(cartCount.getText().toString());
            if (count1 > 1) {
                count1--;
                cartCount.setText(count1 + "");
                cartCount.setSelection(cartCount.length());
                if (count1 == 1) {
                    cartCount.setClickable(false);
                    minusBtn.setBackgroundResource(R.mipmap.minus_grey);
                }
            } else {
                cartCount.setClickable(false);
                cartCount.setSelection(cartCount.length());
                minusBtn.setBackgroundResource(R.mipmap.minus_grey);
            }
        });
        addBtn.setOnClickListener(v -> {
            int count12 = ParseUtils.parseInt(cartCount.getText().toString());
            count12++;
            cartCount.setText(count12 + "");
            cartCount.setClickable(true);
            cartCount.setSelection(cartCount.length());
            minusBtn.setBackgroundResource(R.mipmap.minus);
        });
        clearTv.setOnClickListener(v -> {
            cartCount.setText(count + "");
            cartCount.setSelection(cartCount.length());
        });
        cartCount.setFocusableInTouchMode(true);
​
        finishBtn.setOnClickListener(v -> {
            addDialog.dismiss();
        /*    if (detailModel == null || ParseUtils.parseInt(detailModel.getGoods_number()) <= 0) {
                showToast("商品已售罄");
                return;
            }
*/
            int count13 = ParseUtils.parseInt(getTV(cartCount));
            if (count13 <= 0) {
                showToast("请输入正确的数量");
                return;
            }
​
            if (type == 1) {
                CartImpl.addCart(detailModel, ParseUtils.parseInt(getTV(cartCount)));
                upDateCartNumber();
                showToast("加入成功");
            } else {
                if (detailModel != null) {
                    List<CartComputeBean> computeModels = new ArrayList<>();
                    CartComputeBean m = new CartComputeBean();
                    m.setGood_id(detailModel.getGoods_id());
                    goodCount = ParseUtils.parseInt(getTV(cartCount));
                    m.setGood_count(goodCount + "");
                    computeModels.add(m);
                }
            }
        });
        rlAdd.setOnClickListener(v -> addDialog.dismiss());
    }
​
​
    private void upDateCartNumber() {
        if (tvCartCount == null) {
            return;
        }
        int count = CartImpl.getCartSize();
        if (count == 0) {
            tvCartCount.setVisibility(View.GONE);
        } else {
            tvCartCount.setVisibility(View.VISIBLE);
            tvCartCount.setText(count > 99 ? "99+" : count + "");
        }
    }
​
    /**
     * 商品是否已收藏
     *
     * @param goods_id
     */
    private void getIsCollect(String goods_id) {
        ArrayMap<String, String> map = new ArrayMap<>();
        map.put("user_id", UserImpl.getUserId());
        map.put("ele_id", goods_id);
        map.put("collert_id", "0");
        map.put("type", "1");
​
    }
​
    @OnClick({R.id.coupon_rl, R.id.promotions_rl, R.id.cart_tv, R.id.service_tv, R.id.collection_tv, R.id.add_cart_btn, R.id.buy_now_btn})
    public void onViewClicked(View view) {
        switch (view.getId()) {
            case R.id.coupon_rl:
                //showCouponDialog();//领优惠券
                break;
            case R.id.promotions_rl:
                //showPromotionsDialog();//促销活动
                break;
            case R.id.cart_tv:
                break;
            case R.id.add_cart_btn://加入购物车
                showAddCartDialog(1);
                break;
            case R.id.buy_now_btn://立即购买
                showAddCartDialog(2);
                break;
            case R.id.service_tv://客服
                break;
            case R.id.collection_tv://收藏商品
                if (isCollect) {
                    //请求取消收藏接口
                } else {
                  //获取收藏列表接口
                }
                break;
        }
    }
}

3.实现效果如下:

4.遇到的问题:

4.1当商品详情用TextView或WebView时，滑动有冲突，而且界面适配有问题，具体分析可以参考我之前的文章

Android三种方式加载Image标签（商品长图）淡淡的香烟的博客-CSDN博客安卓图片标签

4.2标题栏、状态栏在滑动时跟随图片颜色变化问题，解决方法监听AppBarLayout的滑动事件，根据状态监听banner高度在设置颜色变化

5.总结:这个版本是一个初版，布局混乱,有很多问题，后面有更好方案会修改.如果小伙伴们有更好的方案可以提出来,参考一下.

6.项目源码地址:

JDShopDetail: 仿京东详情页，实现状态栏和标题栏，商品图片沉浸式效果