1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 仿淘宝商品详情页顶部banner和沉浸式效果

仿淘宝商品详情页顶部banner和沉浸式效果

时间:2019-09-12 03:09:20

相关推荐

仿淘宝商品详情页顶部banner和沉浸式效果

这边使用第三方沉浸式库/gyf-dev/ImmersionBar使用自己去研究

一、沉浸式效果

主要是看滑动过程中toolBar的透明度变化

布局如下:

<android.support.design.widget.CoordinatorLayoutandroid:id="@+id/coordinator"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/AppTheme.AppBarOverlay"><android.support.design.widget.CollapsingToolbarLayoutandroid: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.Toolbarandroid: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>

设置状态栏为透明:

getmImmersionBar().titleBar(binding.toolBar, false)//解决状态栏和布局重叠问题.transparentBar().init();

重点是监听appbar的滑动:

binding.appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {@Overridepublic void onOffsetChanged(AppBarLayout appBarLayout, int i) {int scroll = Math.abs(i);int max = binding.banner.getHeight() - binding.toolBar.getHeight();//设置滑动最大高度,超出后toolBar都设置不透明if (scroll < max) {float alpha = (float) scroll / max;if (alpha > 0.5f) {ImmersionBar.with(CourdeDetailSlideActivity.this).statusBarDarkFont(true)//状态栏字体黑色.addViewSupportTransformColor(binding.toolBar, R.color.white)//设置支持view变色.barAlpha(alpha).init();binding.icBack.setImageResource(R.mipmap.icon_back_black);//返回按钮改成黑色【我这边背景色是白色,如果不是白色可不改变颜色】binding.barTitle.setTextColor(getResources().getColor(R.color.text_3));//标题字体改成黑色} else {ImmersionBar.with(CourdeDetailSlideActivity.this).statusBarDarkFont(false)//状态栏字体白色.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();//滑动超出banner显示区域,视频播放暂停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));}}});

二、banner效果

这边我使用RecyclerView来实现多布局效果

MultiTypeSupport multiTypeSupport = new MultiTypeSupport() {@Overridepublic int getLayoutId(Object item, int position) {if (mTopLists.get(position).getShowType() == 1) {//根据显示类型判断是视频还是图片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) {@Overridepublic void convert(ViewHolder holder, CourseTopVideoImage item, int position) {if (item.getShowType() == 1) {//视频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() {@Overridepublic void onPrepared(String url, Object... objects) {super.onPrepared(url, objects);if (!gsyVideoPlayer.isIfCurrentIsFullscreen()) {//静音// GSYVideoManager.instance().setNeedMute(true);}}@Overridepublic void onQuitFullscreen(String url, Object... objects) {super.onQuitFullscreen(url, objects);//全屏不静音// GSYVideoManager.instance().setNeedMute(true);}@Overridepublic void onEnterFullscreen(String url, Object... objects) {super.onEnterFullscreen(url, objects);// GSYVideoManager.instance().setNeedMute(false);}}).build(gsyVideoPlayer);//增加titlegsyVideoPlayer.getTitleTextView().setVisibility(View.GONE);//设置返回键gsyVideoPlayer.getBackButton().setVisibility(View.GONE);//设置全屏按键功能gsyVideoPlayer.getFullscreenButton().setVisibility(View.GONE);} else {//图片ImageView imageView = holder.getView(R.id.imageView);ImageUtils.newInstance().load(item.getImagePath(), imageView);}}};}LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//设置滑动方向为横向滑动PagerSnapHelper snapHelper = new PagerSnapHelper();//设置一次只能滑动一页,不能快速滑动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;@Overridepublic void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {super.onScrollStateChanged(recyclerView, newState);}@Overridepublic void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {super.onScrolled(recyclerView, dx, dy);firstVisibleItem = linearLayoutManager.findFirstVisibleItemPosition();lastVisibleItem = linearLayoutManager.findLastVisibleItemPosition();//大于0说明有播放if (GSYVideoManager.instance().getPlayPosition() >= 0) {//当前播放的位置int position = GSYVideoManager.instance().getPlayPosition();//对应的播放列表TAGif (position < firstVisibleItem || position > lastVisibleItem) {GSYVideoManager.onPause();//切换停止播放}}}});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。