Android仿京东详情页2--------实现沉浸式状态栏和标题栏，顶部tab切换，滑动到底部自动切换至详情页面

         本文是接着上次仿京东详情页的第2个版本，把之前的底部tab切换放到顶部标题栏，并根据banner滑动的距离隐藏显示tab，滑动到底部自动切换到商品详情页面.

1.Mainactivity代码:

 

package com.example.jdshopdetailtwo;

import android.widget.ImageView;
import android.widget.TextView;

import androidx.appcompat.widget.Toolbar;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import com.example.jdshopdetailtwo.adapter.ViewPagerAdapter;
import com.example.jdshopdetailtwo.base.BaseActivity;
import com.example.jdshopdetailtwo.fragment.FMBadyDetail;
import com.example.jdshopdetailtwo.fragment.FMCommodity;
import com.example.jdshopdetailtwo.fragment.FMCommonList;
import com.google.android.material.tabs.TabLayout;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;

/**
 * @author: njb
 * @date: 2020/5/20 0020 23:11
 * @desc:主界面
 */
public class MainActivity extends BaseActivity {
    @BindView(R.id.viewPager)
    ViewPager viewPager;
    @BindView(R.id.tv_home_statusbar)
    TextView tvHomeStatusbar;
    @BindView(R.id.iv_back)
    ImageView ivBack;
    @BindView(R.id.toolbar_title)
    TextView toolbarTitle;
    @BindView(R.id.shop_tabLayout)
    TabLayout shopTabLayout;
    @BindView(R.id.iv_share)
    ImageView ivShare;
    @BindView(R.id.iv_title_right)
    ImageView ivTitleRight;
    @BindView(R.id.ll_head)
    ConstraintLayout llHead;
    @BindView(R.id.toolbar_title1)
    TextView toolbarTitle1;
    @BindView(R.id.toolbar1)
    Toolbar toolbar1;
    @BindView(R.id.ll_shop_title)
    ConstraintLayout llShopTitle;
    @BindView(R.id.content_cl)
    ConstraintLayout contentCl;
    private FMCommodity fmCommodity = new FMCommodity();
    private FMCommonList fmCommonList = new FMCommonList();
    private FMBadyDetail fmBadyDetail = new FMBadyDetail();
    private List list;
    private ViewPagerAdapter vpAdapter;

    @Override
    protected int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initView() {
        initTabLayout();
    }

    private void initTabLayout() {
        list = new ArrayList<>();
        list.add(fmCommodity);//商品
        list.add(fmCommonList);//评价
        list.add(fmBadyDetail);//详情
        vpAdapter = new ViewPagerAdapter(getSupportFragmentManager(), list);
        viewPager.setAdapter(vpAdapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener
                (shopTabLayout));
        shopTabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener
                (viewPager));
        fmCommodity.setHead(llHead, shopTabLayout, viewPager);
    }

    @Override
    protected void addListener() {

    }
}

2.主界面布局文件activity_main.xml代码：

3.商品Fragment代码：

/**
 * @author: njb
 * @date: 2020/5/20 0020 23:11
 * @desc:商品
 */
public class FMCommodity extends BaseFragment {
    @BindView(R.id.shop_banner)
    Banner shopBanner;
    @BindView(R.id.iv_buy_one)
    ImageView ivBuyOne;
    @BindView(R.id.tv_take_name)
    TextView tvTakeName;
    @BindView(R.id.tv_end_time)
    TextView tvEndTime;
    @BindView(R.id.tv_year)
    TextView tvYear;
    @BindView(R.id.tv_mouth_line)
    View tvMouthLine;
    @BindView(R.id.tv_mouth)
    TextView tvMouth;
    @BindView(R.id.tv_day_line)
    View tvDayLine;
    @BindView(R.id.tv_day)
    TextView tvDay;
    @BindView(R.id.rl_take)
    RelativeLayout rlTake;
    @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_title_tv)
    TextView shopTitleTv;
    @BindView(R.id.sales_volume_tv)
    TextView salesVolumeTv;
    @BindView(R.id.underline_view)
    View underlineView;
    @BindView(R.id.coupon_tv)
    TextView couponTv;
    @BindView(R.id.tv_coupon)
    TextView tvCoupon;
    @BindView(R.id.coupon_content_tv)
    TextView couponContentTv;
    @BindView(R.id.coupon_next_iv)
    ImageView couponNextIv;
    @BindView(R.id.coupon_rl)
    ConstraintLayout 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)
    ConstraintLayout promotionsRl;
    @BindView(R.id.preferential_tv)
    TextView preferentialTv;
    @BindView(R.id.integral_content_tv)
    TextView integralContentTv;
    @BindView(R.id.integral_tv)
    TextView integralTv;
    @BindView(R.id.preferential_next_iv)
    ImageView preferentialNextIv;
    @BindView(R.id.integral_rl)
    ConstraintLayout integralRl;
    @BindView(R.id.coll_toolbar_layout)
    CollapsingToolbarLayout collToolbarLayout;
    @BindView(R.id.al_shop_detail)
    AppBarLayout alShopDetail;
    @BindView(R.id.tv_params)
    TextView tvParams;
    @BindView(R.id.tv_effect)
    TextView tvEffect;
    @BindView(R.id.iv_next)
    ImageView ivNext;
    @BindView(R.id.cl_params)
    ConstraintLayout clParams;
    @BindView(R.id.tv_evaluation)
    TextView tvEvaluation;
    @BindView(R.id.tv_more_evaluation)
    TextView tvMoreEvaluation;
    @BindView(R.id.cl_more_evaluation)
    ConstraintLayout clMoreEvaluation;
    @BindView(R.id.civ_user)
    CircleImageView civUser;
    @BindView(R.id.tv_user_name)
    TextView tvUserName;
    @BindView(R.id.tv_time)
    TextView tvTime;
    @BindView(R.id.tv_evaluation_content)
    TextView tvEvaluationContent;
    @BindView(R.id.rb_related_products)
    RadioButton rbRelatedProducts;
    @BindView(R.id.rb_watch)
    RadioButton rbWatch;
    @BindView(R.id.rv_product)
    RecyclerView rvProduct;
    @BindView(R.id.tv_pull)
    TextView tvPull;
    @BindView(R.id.nsv_good)
    NestedScrollView nsvGood;
    @BindView(R.id.cl_good)
    CoordinatorLayout clGood;
    @BindView(R.id.cart_iv)
    ImageView cartIv;
    @BindView(R.id.tv_cart_count)
    TextView tvCartCount;
    @BindView(R.id.service_iv)
    ImageView serviceIv;
    @BindView(R.id.collection_iv)
    ImageView collectionIv;
    @BindView(R.id.ll_add)
    LinearLayout llAdd;
    @BindView(R.id.add_cart_btn)
    Button addCartBtn;
    @BindView(R.id.buy_now_btn)
    Button buyNowBtn;
    @BindView(R.id.ll_cart)
    LinearLayout llCart;
    @BindView(R.id.content_cl)
    ConstraintLayout contentCl;
    private RelatedProductAdapter shopAdapter;
    private ConstraintLayout llHead;
    private TabLayout shopTabLayout;
    private ViewPager viewPager;
    private int mAlpha;
    private String brand_id;

    @Override
    protected void loadData() {

    }

    @Override
    protected int getLayoutId() {
        return R.layout.fm_commondity;
    }

    @Override
    protected void initView() {
        //滑动
        initScrollView();
        initAdapter();
        initBanner();
    }

    public void initScrollView() {
        alShopDetail.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            public boolean isBottom;

            @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));
                        shopTabLayout.setVisibility(View.VISIBLE);
                    } else {
                        llHead.setBackgroundColor(Color.argb(mAlpha, 255, 255, 255));
                        shopTabLayout.setVisibility(View.GONE);
                    }
                }
            }
        });
    }
    private void initAdapter() {
        shopAdapter = new RelatedProductAdapter(null);
        rvProduct.setLayoutManager(new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false));
        shopAdapter.bindToRecyclerView(rvProduct);
        shopAdapter.setEmptyView(R.layout.empty_goods_list);
        rvProduct.setAdapter(shopAdapter);
    }

    private void initBanner() {
        List 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();
    }


    public void setHead(ConstraintLayout llHead, TabLayout shopTabLayout, ViewPager viewPager) {
        this.llHead = llHead;
        this.shopTabLayout = shopTabLayout;
        this.viewPager = viewPager;
    }

    @Override
    protected void addListener() {

    }

    @OnClick({R.id.coupon_rl, R.id.promotions_rl, R.id.cl_params, R.id.collection_iv, R.id.tv_pull, R.id.cart_iv, R.id.service_iv, R.id.add_cart_btn, R.id.buy_now_btn, R.id.rb_related_products, R.id.rb_watch, R.id.cl_more_evaluation,})
    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.cl_params://产品参数

                break;
            case R.id.add_cart_btn://加入购物车
                break;
            case R.id.buy_now_btn://立即购买
                break;
            case R.id.cl_more_evaluation://更多评价
                viewPager.setCurrentItem(1);
                break;
            case R.id.tv_pull://上拉查看商品详情
                viewPager.setCurrentItem(2);
                break;
            case R.id.rb_related_products:
                rbWatch.setChecked(false);
                brand_id = "14";
                rbRelatedProducts.setChecked(true);
                break;
            case R.id.rb_watch:
                rbRelatedProducts.setChecked(false);
                brand_id = "15";
                rbWatch.setChecked(true);
                break;
            case R.id.cart_iv:
                break;
            case R.id.service_iv://客服
                break;
            case R.id.collection_iv://收藏商品
                break;
        }
    }
}

4.商品的布局文件fm_commondity.xml代码：

5.评价Fragment代码：

/**
 * @author: njb
 * @date: 2020/3/24 0024 10:48
 * @desc: 评论
 */
public class FMCommonList extends BaseFragment {
    private CommentListAdapter commentListAdapter;
    @BindView(R.id.rv_common_list)
    RecyclerView recyclerView;
    private List mList;

    @Override
    protected void loadData() {

    }

    @Override
    protected int getLayoutId() {
        return R.layout.fm_common_list;
    }

    @Override
    protected void initView() {
        mList = new ArrayList<>();
        List list = new ArrayList<>();
        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");

        for(int i=0;i<10;i++){
            CommentListBean commentListBean = new CommentListBean();
            commentListBean.setAddress("北京市昌平区立水桥");
            commentListBean.setContent("鞋子形状做的比较讨我喜欢，做工不错,鞋子形状做的比较讨我喜欢，做工不错,鞋子形状做的比较讨我喜欢鞋子形状做的比较讨我喜欢鞋子形状做的比较讨我喜欢");
            mList.add(commentListBean);
        }
        commentListAdapter = new CommentListAdapter(mList);
        recyclerView.setLayoutManager(new LinearLayoutManager(context));
        recyclerView.addItemDecoration(new DividerDecoration(context.getResources().getColor(R.color.ce7e7e7), 1));
        recyclerView.setAdapter(commentListAdapter);
    }

    @Override
    protected void addListener() {

    }
}

6.评价布局文件fm_common_list代码:

7.详情Fragment代码：

package com.example.jdshopdetailtwo.fragment;

import android.util.Log;

import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;


import com.example.jdshopdetailtwo.R;
import com.example.jdshopdetailtwo.adapter.BodyDetailAdapter;
import com.example.jdshopdetailtwo.base.BaseFragment;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;

/**
 * @author: njb
 * @date: 2020/3/24 0024 10:47
 * @desc: 详情
 */
public class FMBodyDetail extends BaseFragment {
    private static final String imgUrl = "" +
            "" +
            "" +
            "" +
            "";

    private String content;

    private BodyDetailAdapter adapter;
    @BindView(R.id.rv_detail)
    RecyclerView rvDetail;


    @Override
    protected void loadData() {

        adapter = new BodyDetailAdapter(null);
        rvDetail.setLayoutManager(new LinearLayoutManager(context));
        rvDetail.setAdapter(adapter);

        setHtml(imgUrl);
    }

    private void setHtml(final String detailUrl) {

        new Thread(new Runnable() {
            @Override
            public void run() {
                content = detailUrl.replaceAll("src=\"", "src=\"https://img30.360buyimg.com");
                String[] ht = content.split("\"");
                List list = new ArrayList<>();
                for (String rx : ht) {
                    if (rx.contains("https")) {
                        list.add(rx);
                        Log.d("---url---",rx);
                    }
                }
                adapter.setNewData(list);
            }
        }).start();

    }

    @Override
    protected int getLayoutId() {
        return R.layout.fm_body_detail;
    }

    @Override
    protected void initView() {

    }

    @Override
    protected void addListener() {

    }
}

8.详情布局文件fm_body_detail.xml代码：

9.项目的完整截图如下：

10.问题总结：

a.根据banner高度显示和隐藏tab

b.根据banner滑动状态和高度显示标题栏颜色渐变

c.滑动到底部自动切换到详情页面

最后项目完整代码地址如下：https://gitee.com/jackning_admin/JDShopDetailTwo，当然还有一些小细节，如有兴趣的小伙伴可以自己修改试试，欢迎小伙伴们前来吐糟和指导，我必吸取好的意见，及时改正.