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

已于 2022-03-30 17:32:28 修改
阅读量2.7k 收藏 6
点赞数
分类专栏： 开发实例 文章标签： android 微信
于 2020-05-22 00:31:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012556114/article/details/106270804
版权

前言：

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

1.Mainactivity代码:

img

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<Fragment> 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代码：

<?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">
​
​
    <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>
​
    <TextView
        android:id="@+id/tv_home_statusbar"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:visibility="gone"
        app:layout_constraintTop_toTopOf="parent" />
​
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/ll_head"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:paddingEnd="15dp"
        android:paddingStart="15dp"
        android:paddingTop="20dp"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@+id/tv_home_statusbar">
​
​
        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@mipmap/back"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
​
        <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" />
​
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/shop_tabLayout"
            style="@style/ShopDetailTab"
            android:visibility="gone"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            tools:ignore="MissingConstraints">
​
​
            <com.google.android.material.tabs.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/commodity" />
​
            <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.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/detail" />
​
​
        </com.google.android.material.tabs.TabLayout>
​
        <ImageView
            android:id="@+id/iv_share"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="17dp"
            android:src="@mipmap/share"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/iv_title_right"
            app:layout_constraintTop_toTopOf="parent" />
​
        <ImageView
            android:id="@+id/iv_title_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/message"
            android:onClick="onClick"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
​
    </androidx.constraintlayout.widget.ConstraintLayout>
​
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/ll_shop_title"
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:background="@android:color/transparent"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@+id/tv_home_statusbar">
​
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar1"
            android:layout_width="match_parent"
            android:layout_height="44dp"
            android:layout_gravity="center"
            app:navigationIcon="@mipmap/back"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
​
            <TextView
                android:id="@+id/toolbar_title1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text=""
                android:textColor="@color/c333333"
                android:textSize="18sp" />
​
        </androidx.appcompat.widget.Toolbar>
​
    </androidx.constraintlayout.widget.ConstraintLayout>
​
​
</androidx.constraintlayout.widget.ConstraintLayout>

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<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();
    }
​
​
    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代码：

<?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">
​
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/cl_good"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="MissingConstraints">
​
        <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"
                        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/cf39524"
                                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/cf39524">
​
                                <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:paddingRight="10dp"
                                    android:paddingTop="6dp"
                                    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_alignParentRight="true"
                                    android:layout_below="@+id/tv_end_time"
                                    android:layout_marginRight="70dp"
                                    android:layout_marginTop="4dp"
                                    android:background="@drawable/shop_time_bg"
                                    android:gravity="center"
                                    android:textColor="@color/red"
                                    android:textSize="10sp"
                                    android:text="2018" />
​
                                <View
                                    android:id="@+id/tv_mouth_line"
                                    android:layout_width="6dp"
                                    android:layout_height="1dp"
                                    android:layout_alignParentRight="true"
                                    android:layout_below="@+id/tv_end_time"
                                    android:layout_centerInParent="true"
                                    android:layout_marginRight="60dp"
                                    android:layout_marginTop="10dp"
                                    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_alignParentRight="true"
                                    android:layout_below="@+id/tv_end_time"
                                    android:layout_marginRight="40dp"
                                    android:layout_marginTop="4dp"
                                    android:background="@drawable/shop_time_bg"
                                    android:gravity="center"
                                    android:textColor="@color/red"
                                    android:textSize="10sp"
                                    android:text="08" />
​
                                <View
                                    android:id="@+id/tv_day_line"
                                    android:layout_width="6dp"
                                    android:layout_height="1dp"
                                    android:layout_below="@+id/tv_end_time"
                                    android:layout_centerHorizontal="true"
                                    android:layout_marginRight="4dp"
                                    android:layout_marginTop="10dp"
                                    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_alignParentRight="true"
                                    android:layout_below="@+id/tv_end_time"
                                    android:layout_marginRight="10dp"
                                    android:layout_marginTop="4dp"
                                    android:background="@drawable/shop_time_bg"
                                    android:gravity="center"
                                    android:textColor="@color/red"
                                    android:textSize="10sp"
                                    android:text="22" />
                            </RelativeLayout>
                        </LinearLayout>
                    </RelativeLayout>
​
                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="15dp">
​
                        <TextView
                            android:id="@+id/shop_name_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@color/c333740"
                            android:textSize="18sp"
                            android:text="护理液" />
​
                        <TextView
                            android:id="@+id/shop_price_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="5dp"
                            android:textColor="@color/c333740"
                            android:textSize="22sp"
                            app:layout_constraintTop_toBottomOf="@+id/shop_name_tv"
                            android:text="￥580.00" />
​
                        <TextView
                            android:id="@+id/shop_vip_price_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="32dp"
                            android:textColor="@color/shop_price_color"
                            android:textSize="15sp"
                            app:layout_constraintLeft_toRightOf="@+id/shop_price_tv"
                            app:layout_constraintTop_toBottomOf="@+id/shop_name_tv"
                            android:text="¥500.00" />
​
                        <TextView
                            android:id="@+id/shop_title_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="5dp"
                            android:textColor="@color/c858898"
                            android:textSize="12sp"
                            app:layout_constraintTop_toBottomOf="@id/shop_price_tv"
                            android:text="绿之韵享居系列" />
​
                        <TextView
                            android:id="@+id/sales_volume_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="5dp"
                            android:textColor="@color/c858898"
                            android:textSize="12sp"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintTop_toBottomOf="@+id/shop_price_tv"
                            android:text="月销量笔" />
                    </androidx.constraintlayout.widget.ConstraintLayout>
​
                    <View
                        android:id="@+id/underline_view"
                        android:layout_width="match_parent"
                        android:layout_height="1px"
                        android:background="@color/ce7e7e7" />
​
                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/coupon_rl"
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:orientation="horizontal"
                        android:paddingEnd="15dp"
                        android:paddingStart="15dp"
                        android:visibility="visible"
                        tools:ignore="RtlSymmetry">
​
                        <TextView
                            android:id="@+id/coupon_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="领劵"
                            android:textColor="@color/c858898"
                            android:textSize="12sp"
                            app:layout_constraintBottom_toTopOf="parent"
                            app:layout_constraintTop_toBottomOf="parent" />
​
                        <TextView
                            android:id="@+id/tv_coupon"
                            android:layout_width="88dp"
                            android:layout_height="18dp"
                            android:layout_marginStart="15dp"
                            android:background="@drawable/coupon_bg_color"
                            android:gravity="center"
                            android:text="领劵享折上再优惠"
                            android:textColor="@color/colorPrimary"
                            android:textSize="10sp"
                            app:layout_constraintBottom_toTopOf="parent"
                            app:layout_constraintLeft_toRightOf="@+id/coupon_tv"
                            app:layout_constraintTop_toBottomOf="parent" />
​
                        <TextView
                            android:id="@+id/coupon_content_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="5dp"
                            android:gravity="center"
                            android:text="领取优惠券"
                            android:textColor="@color/c333740"
                            android:textSize="13sp"
                            app:layout_constraintBottom_toTopOf="parent"
                            app:layout_constraintLeft_toRightOf="@id/tv_coupon"
                            app:layout_constraintTop_toBottomOf="parent" />
​
                        <ImageView
                            android:id="@+id/coupon_next_iv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@mipmap/next_iv"
                            android:scaleType="fitXY"
                            app:layout_constraintBottom_toTopOf="parent"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintTop_toBottomOf="parent" />
                    </androidx.constraintlayout.widget.ConstraintLayout>
​
                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/promotions_rl"
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:orientation="horizontal"
                        android:paddingEnd="15dp"
                        android:paddingStart="15dp"
                        android:visibility="visible">
​
                        <TextView
                            android:id="@+id/promotions_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="促销"
                            android:textColor="@color/c858898"
                            android:textSize="12sp"
                            app:layout_constraintBottom_toTopOf="parent"
                            app:layout_constraintTop_toBottomOf="parent" />
​
                        <TextView
                            android:id="@+id/promotions_content_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="15dp"
                            android:gravity="center"
                            android:text="满5000.00免邮费"
                            android:textColor="@color/c333740"
                            android:textSize="13sp"
                            app:layout_constraintBottom_toTopOf="parent"
                            app:layout_constraintLeft_toRightOf="@id/promotions_tv"
                            app:layout_constraintTop_toBottomOf="parent" />
​
                        <ImageView
                            android:id="@+id/promotions_next_iv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@mipmap/next_iv"
                            app:layout_constraintBottom_toTopOf="parent"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintTop_toBottomOf="parent" />
                    </androidx.constraintlayout.widget.ConstraintLayout>
​
                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/integral_rl"
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:orientation="horizontal"
                        android:paddingEnd="15dp"
                        android:paddingStart="15dp"
                        android:visibility="visible">
​
                        <TextView
                            android:id="@+id/preferential_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="优惠"
                            android:textColor="@color/c858898"
                            android:textSize="12sp"
                            app:layout_constraintBottom_toTopOf="parent"
                            app:layout_constraintTop_toBottomOf="parent" />
​
                        <TextView
                            android:id="@+id/integral_content_tv"
                            android:layout_width="28dp"
                            android:layout_height="18dp"
                            android:layout_marginStart="15dp"
                            android:background="@drawable/coupon_bg_color"
                            android:gravity="center"
                            android:text="积分"
                            android:textColor="@color/colorPrimary"
                            android:textSize="10sp"
                            app:layout_constraintBottom_toTopOf="parent"
                            app:layout_constraintLeft_toRightOf="@id/preferential_tv"
                            app:layout_constraintTop_toBottomOf="parent" />
​
                        <TextView
                            android:id="@+id/integral_tv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="5dp"
                            android:textColor="@color/c333740"
                            android:textSize="12sp"
                            app:layout_constraintBottom_toTopOf="parent"
                            app:layout_constraintLeft_toRightOf="@id/integral_content_tv"
                            app:layout_constraintTop_toBottomOf="parent"
                            android:text="购物可得580积分" />
​
                        <ImageView
                            android:id="@+id/preferential_next_iv"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@mipmap/next_iv"
                            app:layout_constraintBottom_toTopOf="parent"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintTop_toBottomOf="parent" />
                    </androidx.constraintlayout.widget.ConstraintLayout>
​
                    <View
                        android:layout_width="match_parent"
                        android:layout_height="10dp"
                        android:background="@color/ce7e7e7" />
​
​
                </LinearLayout>
​
            </com.google.android.material.appbar.CollapsingToolbarLayout>
​
​
        </com.google.android.material.appbar.AppBarLayout>
​
        <androidx.core.widget.NestedScrollView
            android:id="@+id/nsv_good"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            android:scrollbars="none"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
​
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
​
                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/cl_params"
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:paddingEnd="15dp"
                    android:paddingStart="15dp">
​
                    <TextView
                        android:id="@+id/tv_params"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="参数"
                        android:textColor="@color/c858898"
                        android:textSize="12sp"
                        app:layout_constraintBottom_toTopOf="parent"
                        app:layout_constraintTop_toBottomOf="parent" />
​
                    <TextView
                        android:id="@+id/tv_effect"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="15dp"
                        android:text="产品功效  生产"
                        android:textColor="@color/c333740"
                        android:textSize="13sp"
                        app:layout_constraintBottom_toTopOf="parent"
                        app:layout_constraintLeft_toRightOf="@id/tv_params"
                        app:layout_constraintTop_toBottomOf="parent" />
​
                    <ImageView
                        android:id="@+id/iv_next"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/next_iv"
                        app:layout_constraintBottom_toTopOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toBottomOf="parent" />
                </androidx.constraintlayout.widget.ConstraintLayout>
​
                <View
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:background="@color/ce7e7e7" />
​
                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/cl_more_evaluation"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingEnd="15dp"
                    android:paddingStart="15dp"
                    android:paddingTop="10dp">
​
                    <TextView
                        android:id="@+id/tv_evaluation"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="商品评价"
                        android:textColor="@color/c333740"
                        android:textSize="13sp" />
​
                    <TextView
                        android:id="@+id/tv_more_evaluation"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:drawablePadding="5dp"
                        android:drawableRight="@mipmap/next_iv"
                        android:text="更多评价"
                        android:textColor="@color/c858898"
                        android:textSize="12sp"
                        app:layout_constraintEnd_toEndOf="parent" />
                </androidx.constraintlayout.widget.ConstraintLayout>
​
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:layout_marginTop="10dp"
                    android:background="@color/ce7e7e7" />
​
                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingBottom="10dp"
                    android:paddingEnd="15dp"
                    android:paddingStart="15dp"
                    android:paddingTop="15dp">
​
                    <com.example.jdshopdetailtwo.view.CircleImageView
                        android:id="@+id/civ_user"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        android:scaleType="fitXY"
                        android:background="@mipmap/login_user"
                        tools:ignore="MissingConstraints" />
​
                    <TextView
                        android:id="@+id/tv_user_name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="8dp"
                        android:gravity="center"
                        android:paddingTop="7dp"
                        android:textColor="@color/c333740"
                        android:textSize="13sp"
                        app:layout_constraintLeft_toRightOf="@id/civ_user"
                        android:text="小笼包" />
​
                    <TextView
                        android:id="@+id/tv_time"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:textColor="@color/c979daa"
                        android:textSize="12sp"
                        app:layout_constraintTop_toBottomOf="@id/civ_user"
                        android:text="2018-04-09" />
​
                    <TextView
                        android:id="@+id/tv_evaluation_content"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:ellipsize="end"
                        android:maxLines="2"
                        android:textColor="@color/c333740"
                        android:textSize="13sp"
                        app:layout_constraintTop_toBottomOf="@id/tv_time"
                        android:text="鞋子形状做的比较讨我喜欢，做工不错，鞋子形状做的比较讨我喜欢，做工不错，鞋子形状做的比较讨我喜欢，做工不错" />
                </androidx.constraintlayout.widget.ConstraintLayout>
​
                <View
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:background="@color/ce7e7e7" />
​
                <RadioGroup
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:gravity="center"
                    android:orientation="horizontal">
​
                    <RadioButton
                        android:id="@+id/rb_related_products"
                        android:layout_width="60dp"
                        android:layout_height="wrap_content"
                        android:button="@null"
                        android:checked="true"
                        android:drawableBottom="@drawable/shop_tab_line"
                        android:drawablePadding="7dp"
                        android:gravity="center"
                        android:paddingTop="7dp"
                        android:text="相关产品"
                        android:textColor="@drawable/shop_tab_text_color"
                        android:textSize="15sp" />
​
                    <RadioButton
                        android:id="@+id/rb_watch"
                        android:layout_width="60dp"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="40dp"
                        android:button="@null"
                        android:drawableBottom="@drawable/shop_tab_line"
                        android:drawablePadding="7dp"
                        android:gravity="center"
                        android:paddingTop="7dp"
                        android:text="大家在看"
                        android:textColor="@drawable/shop_tab_text_color"
                        android:textSize="15sp" />
​
                </RadioGroup>
​
                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/rv_product"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
​
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:layout_gravity="bottom">
​
                    <View
                        android:layout_width="match_parent"
                        android:layout_height="10dp"
                        android:background="@color/ce7e7e7" />
​
                    <TextView
                        android:id="@+id/tv_pull"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:drawableBottom="@mipmap/pull_up"
                        android:drawablePadding="10dp"
                        android:gravity="center"
                        android:text="@string/pull_up_for_more_details"
                        android:textColor="#a9acb7"
                        android:textSize="13sp" />
                </LinearLayout>
            </LinearLayout>
        </androidx.core.widget.NestedScrollView>
​
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
​
​
    <LinearLayout
        android:id="@+id/ll_cart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="horizontal"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent">
​
​
        <LinearLayout
            android:id="@+id/ll_add"
            android:layout_width="wrap_content"
            android:layout_height="49dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:orientation="horizontal">
​
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:padding="2dp">
​
                <ImageView
                    android:id="@+id/cart_iv"
                    android:layout_width="52dp"
                    android:layout_height="wrap_content"
                    android:scaleType="fitCenter"
                    android:src="@mipmap/cart_normal"
                    app:layout_constraintBottom_toBottomOf="parent"
                    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="15dp"
                    android:layout_height="13dp"
                    android:background="@drawable/shape_cd7262e_round"
                    android:gravity="center"
                    android:minWidth="15dp"
                    android:textColor="@color/white"
                    android:textSize="10sp"
                    android:visibility="visible"
                    app:layout_constraintRight_toRightOf="@+id/cart_iv"
                    app:layout_constraintTop_toTopOf="@+id/cart_iv"
                    tools:ignore="UnknownIdInLayout"
                    tools:text="11" />
            </androidx.constraintlayout.widget.ConstraintLayout>
​
            <ImageView
                android:id="@+id/service_iv"
                android:layout_width="52dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="center"
                android:src="@mipmap/customer" />
​
            <ImageView
                android:id="@+id/collection_iv"
                android:layout_width="52dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="center"
                android:src="@mipmap/product_collection_normal" />
        </LinearLayout>
​
        <Button
            android:id="@+id/add_cart_btn"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#f9fffa"
            android:gravity="center"
            android:padding="4dp"
            android:text="加入购物车"
            android:textColor="@color/buy_now_color"
            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>

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<CommentListBean> mList;
​
    @Override
    protected void loadData() {
​
    }
​
    @Override
    protected int getLayoutId() {
        return R.layout.fm_common_list;
    }
​
    @Override
    protected void initView() {
        mList = new ArrayList<>();
        List<String> 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代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
​
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_common_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

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 = "<img src=\"/popWaterMark/jfs/t1/76756/21/7090/87973/5d512c63Ef0646fe3/32b230921e6cb495.jpg\" alt=\"\" />" +
            "<img src=\"popWaterMark/jfs/t1/38653/28/7491/85619/5d512c63E1b1cf20b/e61900781e549b52.jpg\" alt=\"\" />" +
            "<img src=\"popWaterMark/jfs/t1/81805/33/8314/223355/5d63a5feEe675211a/343cd36803c784d6.jpg\" alt=\"\" />" +
            "<img src=\"popWaterMark/jfs/t1/65523/18/6037/85318/5d4132a4E9e24ec23/19072d835537b84e.jpg\" alt=\"\" />" +
            "<img src=\"popWaterMark/jfs/t1/73579/9/10573/109217/5d809ecaE8f711868/900dc5e63e764403.jpg\" alt=\"\" />";
​
    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<String> 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代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
​
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_detail"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible" />
​
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />
</androidx.constraintlayout.widget.ConstraintLayout>

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

img

10.问题总结：

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

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

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

11.最后项目完整代码地址如下：

JDShopDetailTwo: 仿京东详情页第2版，

当然还有一些小细节，如有兴趣的小伙伴可以自己修改试试，欢迎小伙伴们前来吐糟和指导，我必吸取好的意见，及时改正.

淡淡的香烟
关注
专栏目录
仿京东商品评价自定义标签
11-24
仿京东商品评价自定义标签
小程序顶部tap顶部导航切换,方法一
weixin_43789753的博客
06-12 622
这是第一种方法,适用于切换的页面展示效果不同时可用 wxml: <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text> </view> <!----> &
探索高效能的Android标题栏框架：TitleBar
最新发布
gitblog_01194的博客
08-10 319
探索高效能的Android标题栏框架：TitleBar TitleBarAndroid 标题栏框架，从此布局属性不用记项目地址:https://gitcode.com/gh_mirrors/ti/TitleBar 在移动应用开发的世界里，细节决定成败。一个优雅且功能丰富的标题栏（TitleBar）不仅能够提升用户体验，还能增强应用的整体美感。今天，我们将深入探讨一个开源项目——TitleBar，...
HTML&CSS仿京东详情页静态页面制作总结
ccj_cmp的博客
08-03 5182
仿京东详情页面制作
Android中实现简单的仿京东详情页面
u012556114的博客
03-25 6173
之前做过一个商场项目，实现了类似京东的详情页，采用Coordinatorlatout+Appbarlayout+toolbar实现，实现的效果主要是沉浸式状态栏和标题栏，当图片滑动时标题栏和按钮颜色发生相应变化. 1.布局代码: <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget....
Android自定义状态栏statusBar替换系统SystemUI
luliyuan的专栏
10-18 7277
文章主要参考http://blog.csdn.net/canney_chen/article/details/46042323#reply 公司的项目目标是自己开发一个状态栏，显示时间日期，蓝牙无线等状态 核心：statusBar是SystemUI的一部分，statusBar跟正常建立的Android app不同，它不能有主Activity，需要在服务中创建窗口画面。SystemUIS
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
10-16
从标题“微信小程序tab切换可滑动切换导航栏跟随滚动实现代码”和描述中可以看出，本篇内容主要涉及到微信小程序Tab切换以及导航栏的滑动功能。而这些功能的实现代码，对于希望优化用户体验，特别是针对商城类小程序...
仿QQ侧滑、viewpage切换、menu、toolbar沉浸式状态栏，好用的小框架
12-22
"仿QQ侧滑、viewpage切换、menu、toolbar沉浸式状态栏，好用的小框架"这个标题所提及的几个概念，都是Android UI设计中常见的高级特性。让我们逐一探讨这些知识点。 首先，"QQ侧滑"是指模仿QQ应用中的侧滑抽屉菜单...
JavaScript实现tab栏切换效果
10-15
JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计，用于在不同的内容区域之间进行切换，通常用在页面顶部或侧边的导航菜单。在这个例子中，我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...
自己整理的所有的底部导航栏Tab切换方法
07-03
在这个主题中，“自己整理的所有的底部导航栏Tab切换方法”显然关注的是如何实现这一功能。下面我们将深入探讨相关的知识点。 首先，Android的底部导航栏通常由`BottomNavigationView`组件实现，它是Android ...
微信小程序（原生）使用Swiper实现（商品详情）视频和图片轮播（仿京东/淘宝商品详情头部视频+图片轮播）
wocwin的博客
09-13 1909
微信小程序（原生）使用Swiper实现（商品详情）视频和图片轮播（仿京东/淘宝商品详情头部视频+图片轮播）
qtabwidget怎么隐藏tab页_3分钟，写出“即刻App”最复杂的双列表页
weixin_39669982的博客
11-26 325
码个蛋(codeegg)第 703 次推文作者:walkeer原文: https://juejin.im/post/5d4262ee6fb9a06afc2520a61. SlideLayout 双列表页面实现即刻 5.3 版本的时候，随着圈子详情页的内容越来越丰富，之前的页面结构已经不能满足我们的需求，需要一个新的布局方案承载各种圈子元素并满足我们的自定义交互。改版前改版前的结构比较简单，头部显示...
android 沉浸式布局， 仿QQ微信，title和状态栏同一颜色
android 开发
12-01 2695
android 沉浸式布局， 仿QQ微信，title和状态栏同一颜色我们看到QQ和微信对于状态栏和title是一个颜色，这样的界面感觉更加大气，也是界面设计采用比较多的方式，其实我们客户端实现也特别简单在主类中添加如下代码//透明状态栏 getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
Android 系统状态栏界面自定义开发系列
2301_79331387的博客
08-20 92
通过创建自定义的状态栏布局，并将其添加到状态栏视图组件中，我们可以实现自定义的状态栏界面。自定义状态栏布局的布局文件可以根据需求进行设计，可以包含文本、图标、按钮等组件，用于展示特定的信息或提供交互操作。首先，我们需要创建一个新的 Android 项目，并在布局文件中添加一个用于显示状态栏的视图组件。接下来，我们需要在 Activity 中获取到状态栏的视图组件，并为其设置相应的布局和样式。完成上述步骤后，运行应用程序，您将看到自定义的状态栏布局显示在系统状态栏的位置上。在上述布局文件中，我们使用了一个。
Android 系统状态栏界面定制化开发指南
ByteKnight的博客
08-12 502
在该布局文件中，可以添加任意的视图组件，例如文本、图标、按钮等，来自定义状态栏的显示内容和样式。通过修改 SystemUI 源代码和自定义布局文件，我们可以按照自己的需求来定制状态栏的显示样式和内容。在这个示例中，我们创建了一个水平方向的线性布局，其中包含一个文本视图和一个图像视图。要使系统使用我们创建的自定义状态栏布局文件，需要对 SystemUI 的源代码进行修改。在这个修改过的代码中，我们将原来使用默认状态栏布局文件的逻辑改为使用我们创建的自定义状态栏布局文件。一、创建自定义的状态栏布局文件。
Android从零撸美团(三) - Android多标签tab滑动切换 - 自定义View快速实现高度定制封装...
weixin_34293911的博客
11-03 852
这是【从零撸美团】系列文章第三篇 【从零撸美团】是一个高仿美团的开源项目，旨在巩固 Android 相关知识的同时，帮助到有需要的小伙伴。 GitHub 源码地址：github.com/cachecats/L… Android从零撸美团(一) - 统一管理 Gradle 依赖 提取到单独文件中 Android从零撸美团(二) - 仿美团下拉刷新自定义动画 Android从零撸美团(四) - 美团首...
Android 最简单的安卓沉浸式状态栏实现 Java
weixin_45751409的博客
11-09 828
沉浸式状态栏介绍 沉浸式状态栏式Android 4.4 引入的一个机制，可以将手机顶端的状态栏颜色融入当前app的界面中，而不至于和app的界面以及配色有着明显的割裂。 在如今手机全面屏化的促进下，并且由于安卓手机的碎片化各家的状态栏背景颜色可能还不一定一致。在不进行沉浸式状态栏适配的app在大屏占比的手机上就会显得异常突兀，下面我就介绍一种最快速方便的将当前app和顶部状态栏实现沉浸式体验的方法。 沉浸式状态栏实现 首先需要明确使用下面的方法需要安卓4.4 KITKAT以上的系统，具体实现仅仅需要两步
Android开发-Android应用中仿网易云音乐抽屉式菜单栏的实现
_彼岸雨敲窗_的博客
07-30 3491
前 言 要想在Android应用中实现和网易云音乐的抽屉式（侧滑）菜单栏一样效果的话需要用到Android中的“NavigationView”控件，该控件是在design包下，所以它是 Android 5.0 开始引入的 Material Design 设计特性。 Material Design 是由 Google 的设计工程师们基于传统优秀的设计原则，结合丰富的创意和科学技术所发明的一套全新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值