安宁网站建设,网站维护会导致打不开网页吗?,wordpress文章同步国外博客,多用户商城app开发UI出了一个新需求#xff0c;仿京东头部滚动#xff0c;头像需要动态变化#xff0c;先来看下京东的是什么效果 我们知道什么效果以后#xff0c;接下来就想想怎么实现吧#xff0c;Android常规吸顶折叠布局是由CoordinatorLayoutAppBarLayoutCollapsingToolbarLayout组成…UI出了一个新需求仿京东头部滚动头像需要动态变化先来看下京东的是什么效果 我们知道什么效果以后接下来就想想怎么实现吧Android常规吸顶折叠布局是由CoordinatorLayoutAppBarLayoutCollapsingToolbarLayout组成的那么头部固定的布局从外面写一个固定的就行了通过透明度来控制渐隐渐现随之滑动放大缩小并且移动的头像需要单独一个图片控件来控制并且在滑动过程中需要实时的控制头像所处的位置思路理清楚以后实现起来就比较简单了
1、先把UI结构画出来
?xml version1.0 encodingutf-8?
FrameLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent!-- 主布局 --com.scwang.smart.refresh.layout.SmartRefreshLayoutandroid:idid/refreshLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentLinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticalandroidx.coordinatorlayout.widget.CoordinatorLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:backgroundandroid:color/transparentcom.google.android.material.appbar.AppBarLayoutandroid:idid/appbarandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:backgroundandroid:color/transparentapp:elevation0dpcom.google.android.material.appbar.CollapsingToolbarLayoutandroid:idid/collapsing_toolbar_layoutandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:minHeight80dpapp:layout_scrollFlagsscroll|exitUntilCollapsedapp:toolbarIdid/toolbarLinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:orientationverticalandroidx.constraintlayout.widget.ConstraintLayoutandroid:idid/layoutUserInfoandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:paddingTop40dpandroid:paddingBottom16dpapp:layout_constraintTop_toTopOfparentcom.makeramen.roundedimageview.RoundedImageViewandroid:idid/imgUserHeadandroid:layout_width60dpandroid:layout_height60dpandroid:layout_marginStart16dpandroid:layout_marginTop32dpandroid:srcmipmap/icon_login_default_headerapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparentapp:riv_ovaltrue /TextViewandroid:idid/tvHiandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginStart10dpandroid:textHi,我是京东PLUS会员android:textColor#333333android:textSize24spandroid:textStyleboldapp:layout_constraintBottom_toTopOfid/tvUserPhoneapp:layout_constraintStart_toEndOfid/imgUserHeadapp:layout_constraintTop_toTopOfid/imgUserHeadtools:ignoreHardcodedText /TextViewandroid:idid/tvUserPhoneandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginStart10dpandroid:textJD.001android:textColor#666666android:textSize14spapp:layout_constraintBottom_toBottomOfid/imgUserHeadapp:layout_constraintStart_toEndOfid/imgUserHeadapp:layout_constraintTop_toBottomOfid/tvHitools:ignoreHardcodedText,SmallSp //androidx.constraintlayout.widget.ConstraintLayoutcom.makeramen.roundedimageview.RoundedImageViewandroid:idid/bannerandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginStart20dpandroid:layout_marginEnd20dpandroid:scaleTypefitXYandroid:srcmipmap/icon_bannerapp:layout_constraintTop_toTopOfparentapp:riv_corner_radius10dpapp:riv_ovalfalse //LinearLayout/com.google.android.material.appbar.CollapsingToolbarLayoutLinearLayoutandroid:layout_widthmatch_parentandroid:layout_height50dpandroid:layout_marginStart20dpandroid:layout_marginTop10dpandroid:layout_marginEnd20dpandroid:layout_marginBottom10dpandroid:backgrounddrawable/bg_bottom_viewandroid:elevation10dpandroid:gravitycenter_verticalandroid:orientationhorizontalandroid:paddingTop8dpandroid:paddingBottom8dpTextViewandroid:idid/tv1android:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_weight1android:gravitycenterandroid:text标题1android:textColor#FFFFFFandroid:textSize16sptools:ignoreHardcodedText /TextViewandroid:idid/tv2android:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_weight1android:gravitycenterandroid:text标题2android:textColor#FFFFFFandroid:textSize16sptools:ignoreHardcodedText /TextViewandroid:idid/tv3android:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_weight1android:gravitycenterandroid:text标题3android:textColor#FFFFFFandroid:textSize16sptools:ignoreHardcodedText /TextViewandroid:idid/tv4android:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_weight1android:gravitycenterandroid:text标题4android:textColor#FFFFFFandroid:textSize16sptools:ignoreHardcodedText //LinearLayout/com.google.android.material.appbar.AppBarLayoutandroidx.core.widget.NestedScrollViewandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentapp:layout_behaviorstring/appbar_scrolling_view_behaviorLinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginStart20dpandroid:layout_marginEnd20dpandroid:orientationverticalTextViewandroid:layout_widthmatch_parentandroid:layout_height40dpandroid:gravitycenter_verticalandroid:text我是PLUS会员android:textColor#FF0000android:textSize16spandroid:textStyleboldtools:ignoreHardcodedText,RtlSymmetry //LinearLayout/androidx.core.widget.NestedScrollView/androidx.coordinatorlayout.widget.CoordinatorLayout/LinearLayout/com.scwang.smart.refresh.layout.SmartRefreshLayout!-- 滑动到顶部以后出现的吸顶头布局 --androidx.constraintlayout.widget.ConstraintLayoutandroid:idid/layoutUserInfoTopandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:alpha0android:background#FF0000android:paddingTop42dpandroid:paddingBottom12dptools:alpha1com.makeramen.roundedimageview.RoundedImageViewandroid:idid/imgUserHeadTopandroid:layout_width30dpandroid:layout_height30dpandroid:layout_marginStart16dpandroid:srcmipmap/icon_login_default_headerapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparentapp:riv_ovaltrue /TextViewandroid:idid/tvHiTopandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginStart10dpandroid:textHi,我是京东PLUS会员android:textColor#FFFFFFandroid:textSize14spandroid:textStyleboldapp:layout_constraintBottom_toTopOfid/tvUserPhoneTopapp:layout_constraintStart_toEndOfid/imgUserHeadTopapp:layout_constraintTop_toTopOfid/imgUserHeadToptools:ignoreHardcodedText /TextViewandroid:idid/tvUserPhoneTopandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginStart10dpandroid:textJD.001android:textColor#FFFFFFandroid:textSize10spapp:layout_constraintBottom_toBottomOfid/imgUserHeadTopapp:layout_constraintStart_toEndOfid/imgUserHeadTopapp:layout_constraintTop_toBottomOfid/tvHiToptools:ignoreHardcodedText,SmallSp //androidx.constraintlayout.widget.ConstraintLayout!-- 滑动过程中的头像 --com.makeramen.roundedimageview.RoundedImageViewandroid:idid/imgSlideandroid:layout_width60dpandroid:layout_height60dpandroid:visibilityinvisibleapp:riv_ovaltrue //FrameLayout2、主要代码处理 private final HomeAppBarStateChangeListener mAppBarStateChangeListener new HomeAppBarStateChangeListener() {Overridepublic void onStateChanged(AppBarLayout appBarLayout, State state, int slidingDistance) {switch (state) {case EXPANDED: //展开setTitleBackground(1);mainBinding.imgUserHeadTop.setVisibility(View.INVISIBLE);mainBinding.imgSlide.setVisibility(View.INVISIBLE);mainBinding.imgUserHead.setVisibility(View.VISIBLE);mainBinding.layoutUserInfoTop.setAlpha(0f);break;case IDLE: //滚动mainBinding.imgUserHead.setVisibility(View.INVISIBLE);break;case COLLAPSED: //置顶setTitleBackground(0);mainBinding.imgUserHeadTop.setVisibility(View.VISIBLE);mainBinding.imgUserHead.setVisibility(View.INVISIBLE);mainBinding.imgSlide.setVisibility(View.INVISIBLE);mainBinding.layoutUserInfoTop.setAlpha(1f);break;}mainBinding.refreshLayout.requestLayout();}Overridepublic void onStateSliding(AppBarLayout appBarLayout, State state, int slideHeight) {int slidingHeight Math.abs(slideHeight);if (slidingHeight top30 slidingHeight 0) {if (mainBinding.imgSlide.getVisibility() ! View.VISIBLE) {mainBinding.imgSlide.setVisibility(View.VISIBLE);}if (mainBinding.imgUserHeadTop.getVisibility() ! View.INVISIBLE) {mainBinding.imgUserHeadTop.setVisibility(View.INVISIBLE);}mainBinding.imgSlide.setY(maxTop - slidingHeight);if (slidingHeight top30) {FrameLayout.LayoutParams layoutParams (FrameLayout.LayoutParams) mainBinding.imgSlide.getLayoutParams();layoutParams.width top60 - slidingHeight;layoutParams.height top60 - slidingHeight;mainBinding.imgSlide.requestLayout();}Glide.with(MainActivity.this).load(R.mipmap.icon_login_default_header).into(mainBinding.imgSlide);} else {if (mainBinding.imgUserHeadTop.getVisibility() ! View.VISIBLE) {mainBinding.imgUserHeadTop.setVisibility(View.VISIBLE);}if (mainBinding.imgSlide.getVisibility() ! View.INVISIBLE) {mainBinding.imgSlide.setVisibility(View.INVISIBLE);}}if (slidingHeight 100) {float alpha slidingHeight * 1.0f / 100f;if (alpha 0.3) {setTitleBackground(1);} else {setTitleBackground(0);}mainBinding.layoutUserInfoTop.setAlpha(alpha);} else {setTitleBackground(0);mainBinding.layoutUserInfoTop.setAlpha(1f);}}};最后来看下Android上实现的效果吧 Java代码只是一部门源代码请看传送门
