仿断点沙滩APP用户详情下拉功能

其实应该不是很困难 大家都知道是AppBarLayout + CollapsingToolbarLayout +Toolbar 进行UI控制的 主要想写篇文章记录下效果 且排下坑 不是最优解 是土办法来着 有大佬有新写法可以指导下 有问题可以sob联系 dd

关于图片（头像）一直无法跟随文字一起显示在toolbar 这点进行了多次尝试

1.将imgview放置在toolbar中发现无法控制它的位置(无法居中处理） 因为toolbar内没有提供位置的一些方法 所以无疾而终

<CoordinatorLayout>
	<AppBarLayout>
		<CollapsingToolbarLayout>
			<RelativeLayout 想要的东西/>
			<Toolbar>
				<ImageView/>
			</Toolbar>
		</CollapsingToolbarLayout>
	</AppBarLayout>
</CoordinatorLayout>

2.放在了toolbar同级 也是感觉没啥用 没办法跟随文本一起隐藏（这里是坑）

<CoordinatorLayout>
	<AppBarLayout>
		<CollapsingToolbarLayout>
			<RelativeLayout 想要的东西/>
			<Toolbar/>
			<ImageView/>  // 可以显示 不能和toolbar一起显示文本（因为设置了个属性 遮住了）
		</CollapsingToolbarLayout>
	</AppBarLayout>
</CoordinatorLayout>

1. 放在appbar 内与CollapsingToolbarLayout 同级 会出现拉扯 不符合该方案 （放弃）

<CoordinatorLayout>
	<AppBarLayout>
		<ImageView/> // 顶住上面 无背景了 不适合
		<CollapsingToolbarLayout>
			<RelativeLayout 想要的东西/>
			<Toolbar/>		
		</CollapsingToolbarLayout>
	</AppBarLayout>
</CoordinatorLayout>

在咨询断点大佬后 他说他是采用2) 可是我自己的没办法跟随隐藏或显示 我就不断去查看所写的属性 心想来个大破大立 将我原先写的CollapsingToolbarLayout 内的属性先隐藏掉 在动态填入背景就好了 巧了 删除了 2）方案就能和断点大佬的效果一样 imgview能跟随文本在toolbar 中了 大家可以猜猜是啥属性

卖关子（其实就一个属性是限制了 因为它操作后又被赋值了个背景 所以imgview跟随不了toolbar

 app:contentScrim="@drawable/userinfo_bg"

神坑 其实只要解决这个问题 其他问题就不是很大了 ）

因为toolbar自身会移动 只要解决imgview移动就好了 （百分比计算然后移动就好了 并不困难(os 感谢断点大佬点拨哈哈哈哈） 因为没做view大小变化 这个留给下个有缘人探索下

先贴贴xml代码 （自行删减）

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_height="match_parent"
    >

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/ctl_test"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleGravity="center"
            app:collapsedTitleGravity="left"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <!--
                app:contentScrim="@drawable/userinfo_bg"-->
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/rl_top">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_220"
                    android:id="@+id/iv_user_bg"
                    android:background="@drawable/userinfo_bg"
                    android:scaleType="centerCrop"
                    />
                <include
                    layout="@layout/layout_title"
                    android:id="@+id/ll_user_title"
                    android:visibility="invisible"
                    />
                <de.hdodenhof.circleimageview.CircleImageView
                    android:padding="@dimen/dp_5"
                    android:layout_width="@dimen/dp_80"
                    android:layout_height="@dimen/dp_80"
                    android:layout_below="@+id/iv_user_bg"
                    android:layout_marginTop="-40dp"
                    android:visibility="gone"
                    android:layout_marginLeft="@dimen/dp_20"
                    />
                <include
                    android:id="@+id/ic_user_fansorfollow"
                    layout="@layout/layout_info_fof"
                    android:layout_below="@+id/tv_user_position"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    app:layout_collapseMode="parallax"

                    />
            </RelativeLayout>
            <de.hdodenhof.circleimageview.CircleImageView
                android:layout_width="@dimen/dp_50"
                android:layout_height="@dimen/dp_50"
                android:background="@drawable/emoji_2"
                android:layout_gravity="center"
                android:layout_marginTop="-50dp"
                app:layout_collapseMode="pin"
                android:layout_marginBottom="@dimen/dp_5"
                android:id="@+id/iv_user_avatar" />
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_80"
                app:layout_collapseMode="pin"
                app:titleTextColor="@color/white"
                android:id="@+id/toolbar"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>


    </com.google.android.material.appbar.AppBarLayout>
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_user"
        android:layout_width="match_parent"
        android:layout_below="@+id/ic_user_fansorfollow"
        android:layout_marginTop="@dimen/dp_5"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"> // 这一句是很重要的 提供关联上面的指示器（应该是这么叫吧）
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_user"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/index_blue"
            app:tabIndicatorFullWidth="false"
            app:tabIndicatorHeight="1dp"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/bottom_navigation_item_bg_color"
            app:tabTextColor="@color/index_black"/>
    </androidx.viewpager.widget.ViewPager>


    <androidx.recyclerview.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/rc_uinfo"
    android:visibility="gone"
	<!-- 可以拿这个先测试  -->
    />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

java代码只能给一部分相关的内容了 因为这不是demo 没办法copy运行 想实践的可以运行看看

    private FragmentUserinfoNewBinding binding = null;
    private UserInfoPresenter mPresenter;
    private String[] titles = new String[]{"动态","文章"/*,"问答"*/,"关注","粉丝"};
    private List<String> mStrings = new ArrayList<>();
    private List<Fragment> fragments=new ArrayList<>();
    private String userId ;
    private VpAdapter vpAdapter;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        binding = FragmentUserinfoNewBinding.inflate( inflater , container ,false);
        initData();
        initView();
        return binding.getRoot();
    }
    private int appbarHeight = 0;  // 整块高度
    private int toolbarHeight = 0;  // 缩略后高度
    private int ivAvatarHeight = 0 ; //  头像宽 高
    private float ivAvatarX ;	// 所在X轴

    private void initView() {
        vpAdapter = new VpAdapter(getChildFragmentManager(), fragments, getContext(), mStrings);
        appbarHeight = UiUtils.dp2px(getActivity(), 220f);
        toolbarHeight = UiUtils.dp2px(getActivity(), 80f);
        ViewGroup.LayoutParams layoutParams1 =binding.ivUserAvatar.getLayoutParams();
        ivAvatarHeight= layoutParams1.width;
        binding.toolbar.setTitleMarginStart(ivAvatarHeight +5);
        ivAvatarX =  UiUtils.getWidth(getContext())/2 - ivAvatarHeight/2 -5 ; //所在的X轴
	// 绘制背景
        Glide.with(getActivity())
                .load(R.drawable.userinfo_bg)
                .transform(new BlurTransformation(5,1))// 高斯模糊 第三方库
                .into(binding.ivUserBg);

        binding.vpUser.setAdapter(vpAdapter);
        binding.tabUser.setupWithViewPager(binding.vpUser);
        // title 文章
        binding.icUserFansorfollow.tvArtNum.setOnClickListener(v ->
                binding.vpUser.setCurrentItem(1));
        // title 关注
        binding.icUserFansorfollow.tvFollow.setOnClickListener(v ->
                binding.vpUser.setCurrentItem(2));
        // title 粉丝
        binding.icUserFansorfollow.tvFans.setOnClickListener(v ->
                binding.vpUser.setCurrentItem(3));
        binding.llUserTitle.ivTtFinish.setOnClickListener(v -> getActivity().finish());
        // 设置展开前后的UI
        binding.ctlTest.setExpandedTitleColor(ContextCompat.getColor(getContext() , R.color.white));
        binding.ctlTest.setCollapsedTitleTextColor(ContextCompat.getColor(getContext() , R.color.white));
        int statusBarHeight = UIStatusBarUtils.getStatusBarHeight(getActivity()); // 获取状态栏高度
        RelativeLayout rl_title = binding.llUserTitle.getRoot();
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams)
                rl_title.getLayoutParams();
        layoutParams.topMargin = statusBarHeight; // 设置状态栏高度
    }

    private void initData() {

        mPresenter =new UserInfoPresenter(this);
        userId  = getActivity().getIntent().getStringExtra(Constance.S_DATA);
        String uuserId = getArguments().getString(Constance.S_DATA);
   /*TODO test
        if(!uuserId.equals(SpUtils.getInstance().getString(Constance.SP_UID,""))){
            binding.btnIsfans.setVisibility(View.GONE);
        }*/
        mPresenter.getOtherUserAchievement(uuserId);
        mPresenter.getUserInfo(uuserId);
        // 添加fragment
        fragments.add(new MoyuFragment(uuserId,true));
        fragments.add(new ArticleFragment(uuserId ,true));
//        fragments.add(new QandAFragment());
        fragments.add(new FansUserFragment(userId,2));   // 关注
        fragments.add(new FansUserFragment(uuserId ,1)); // 粉丝
        // 添加标题 
        mStrings.clear();
        for (int i = 0; i < titles.length; i++) {
            mStrings.add(titles[i]);
        }

         binding.appBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                float percentage =  Math.abs((float)verticalOffset /(float)(appbarHeight - toolbarHeight));
                binding.ivUserAvatar.setTranslationX(-ivAvatarX *percentage); // 移动位置
                if (percentage >0.5){ // 控制其他空间隐藏
                    binding.icUserFansorfollow.llFansorfollow.setVisibility(View.GONE);
                } else {
                    binding.icUserFansorfollow.llFansorfollow.setVisibility(View.VISIBLE);
                }
            }
        });
    @Override
    public void onGetUserInfo(UserInfo userInfo) {
        if(userInfo.isSuccess()){
            UserInfo.DataBean data = userInfo.getData();
            UiUtils.isVipImageView(getActivity() ,data.isVip() ,
                    binding.ivUserAvatar ,data.getAvatar());
            String cover = data.getCover();// 背景
            if(!TextUtils.isEmpty(cover)){
                Glide.with(getActivity())
                        .load(cover)
                        .transform(new BlurTransformation(5,1))
                        .into(binding.ivUserBg);
            }
		// 填入在toolbar 是因为可以动态设置外边距
            binding.toolbar.setTitle(data.getNickname());
          
            binding.tvUserPosition.setText(position.toString());
        }
    }




   

各位大佬 嘴上留情 有其他思路也可以评论一起学（指导）习（我）