Imitation Taobao product details page top banner and immersive effect

 

Here, use a third-party immersive library https://github.com/gyf-dev/ImmersionBar  to study by yourself

1. Immersive effect

Mainly to see the transparency change of the toolBar during the sliding process

The layout is as follows:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="@dimen/size_titlebar"
            app:expandedTitleMarginStart="20dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">               
     
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="@dimen/size_titlebar"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin">

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

 

Set the status bar to be transparent:

getmImmersionBar() 
        .titleBar(binding.toolBar, false)//Solve the status bar and layout overlap 
        problem.transparentBar() 
        .init();

The point is to monitor the sliding of the appbar:

binding.appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 
    @Override 
    public void onOffsetChanged(AppBarLayout appBarLayout, int i) { 
        int scroll = Math.abs(i); 
        int max = binding.banner.getHeight() - binding.toolBar .getHeight();//Set the maximum height of the slide, and the toolBar will be opaque 
        if (scroll < max) { 
            float alpha = (float) scroll / max; 
            if (alpha > 0.5f) { 
                ImmersionBar.with(CourdeDetailSlideActivity.this ) 
                        .statusBarDarkFont(true)//The status bar font is black.addViewSupportTransformColor 
                        (binding.toolBar, R.color.white)//Set the support view color change.barAlpha 
                        (alpha)
                        .init(); 
                binding.icBack.setImageResource(R.mipmap.icon_back_black);//Change the back button to black [my background color is white, if it is not white, the color can not be changed] 
                binding.barTitle.setTextColor(getResources() .getColor(R.color.text_3));//Change title font to black 
            } else { 
                ImmersionBar.with(CourdeDetailSlideActivity.this) 
                        .statusBarDarkFont(false)//Status bar font is white.addViewSupportTransformColor 
                        (binding.toolBar, R.color .white) 
                        .barAlpha(alpha) 
                        .init(); 
                binding.icBack.setImageResource(R.mipmap.nav_back_white); 
                binding.barTitle.setTextColor(getResources().getColor(R.color.white)); 
            } 
        } else { 
            GSYVideoManager.onPause();//Slide beyond the banner display area, video playback pauses
            ImmersionBar.with(CourdeDetailSlideActivity.this)
                    .statusBarDarkFont(true)
                    .addViewSupportTransformColor(binding.toolBar, R.color.white)
                    .barAlpha(1.0f)
                    .init();
            binding.icBack.setImageResource(R.mipmap.icon_back_black);
            binding.barTitle.setTextColor(getResources().getColor(R.color.text_3));
        }
    }
});

Two, banner effect

Here I use RecyclerView to achieve multiple layout effects

MultiTypeSupport multiTypeSupport = new MultiTypeSupport() { 
    @Override 
    public int getLayoutId(Object item, int position) { 
        if (mTopLists.get(position).getShowType() == 1) {//Judging whether it is a video or a picture according to the display type return R .layout.course_detail_top_video; 
        } else { return R.layout.course_detail_top_image; 
        } 
    } 
}; 
if (mTopAdapter == null) { 
    mTopAdapter = new CommonRecyclerAdapter<CourseTopVideoImage>(this, mTopLists, multiTypeSupport) { 
        @Override 
        public hconvert(void , CourseTopVideoImage item, int position) { 
            if (item.getShowType() == 1) {// Video
            
            
                StandardGSYVideoPlayer gsyVideoPlayer = holder.getView(R.id.video_item_player);
                //增加封面
                ImageView imageView = new ImageView(App.getContext());
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                ImageUtils.newInstance().load(item.getImagePath(), imageView);
                if (imageView.getParent() != null) {
                    ViewGroup viewGroup = (ViewGroup) imageView.getParent();
                    viewGroup.removeView(imageView);
                }
                GSYVideoOptionBuilder gsyVideoOptionBuilder = new GSYVideoOptionBuilder();
                gsyVideoOptionBuilder
                        .setIsTouchWiget(false)
                        .setThumbImageView(imageView)
                        .setUrl(item.getPath())
                        .setVideoTitle("")
                        .setCacheWithPlay(false)
                        .setRotateViewAuto(true)
                        .setLockLand(true)
                        .setPlayTag("")
                        .setNeedShowWifiTip(false)
                        .setShowFullAnimation(true)
                        .setNeedLockFull(true)
                        .setPlayPosition(position)
                        .setVideoAllCallBack(new GSYSampleCallBack() {
                            @Override
                            public void onPrepared(String url, Object... objects) {
                                super.onPrepared(url, objects);
                                if (!gsyVideoPlayer.isIfCurrentIsFullscreen()) {
                                    //静音
                                    // GSYVideoManager.instance().setNeedMute(true);
                                }
                            }

                            @Override
                            public void onQuitFullscreen(String url, Object... objects) {
                                super.onQuitFullscreen(url, objects);
                                //全屏不静音
                                // GSYVideoManager.instance().setNeedMute(true);
                            }

                            @Override
                            public void onEnterFullscreen(String url, Object... objects) { 
                                super.onEnterFullscreen(url, objects); 
                                // GSYVideoManager.instance().setNeedMute(false); 
                            } 
                        }).build(gsyVideoPlayer); 
                //Add title 
                gsyVideoPlayer .getTitleTextView().setVisibility(View.GONE); 
                //Set the return key 
                gsyVideoPlayer.getBackButton().setVisibility(View.GONE); 
                //Set the full screen button function 
                gsyVideoPlayer.getFullscreenButton().setVisibility(View.GONE); 
            } else {//ImageImageView 
                imageView = holder.getView(R.id.imageView); 
                ImageUtils.newInstance().load(item.getImagePath(), imageView); 
            } 
        } 
    }; 
} 
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this); 
linearLayoutManager.setOrientation( LinearLayoutManager.HORIZONTAL);//Set the sliding direction to horizontal sliding 
PagerSnapHelper snapHelper = new PagerSnapHelper();//Set only one page at a time, not fast sliding 
binding.banner.setOnFlingListener(null); 
snapHelper.attachToRecyclerView(binding.banner ); 
binding.banner.setLayoutManager(linearLayoutManager); 
binding.banner.setAdapter(mTopAdapter);
 
binding.banner.addOnScrollListener(new RecyclerView.OnScrollListener() {
    int firstVisibleItem, lastVisibleItem; 

    @Override 
    public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) { 
        super.onScrollStateChanged(recyclerView, newState); 
    } 

    @Override 
    public void onScrolled(@NonNull RecyclerView recyclerView, int newState) 
        { onScrolled(recyclerView, dx, dy); 
        firstVisibleItem = linearLayoutManager.findFirstVisibleItemPosition(); 
        lastVisibleItem = linearLayoutManager.findLastVisibleItemPosition(); 
        //greater than 0 means there is playback 
            int position = GSYPlayVideoManager.getPosition() ; 
            //corresponding playlist TAG
        if (GSYVideoManager.instance().getPlayPosition() >= 0) {
            //The current playback position
            if (position < firstVisibleItem || position > lastVisibleItem) { 
                GSYVideoManager.onPause();//Switch to stop playback 
            } 
        } 
    } 
});