recyclerview 中的 Webview 没有就地展开。 （底部没有缩小）

Posted 2023-04-19

【中文标题】recyclerview 中的 Webview 没有就地展开。 （底部没有缩小）

【英文标题】：Webview in recyclerview does not expand in place. (Not scaling down at the bottom)

【发布时间】：2018-10-21 03:47:22

【问题描述】：

我正在研究类似于“谷歌收件箱”的东西，它需要我在一个 recyclerView 中有多个 webview，我可以通过点击标题来展开和折叠内容，这将在标题下添加/删除 webview。

这是迄今为止项目的要点

Fragment
 -> RecyclerView (match_parent on height and width)
   -> Adapter + ViewModel/Model
     -> XML + Databinding.

XML 结构

LinearLayout (vertical)
 -> Header (match_parent on width, wrap_content on height)
 -> WebView (match_parent on width, wrap_content on height) 
(Webview does not scroll and it scales with the contents.
 the recyler view handles scrolling)

默认情况下，所有的 webview 都不再可见，当用户第一次单击标题时，会调用 webview.loadDataWithBaseUrl() 并使用它应该加载的内容并打开可见性。 webview 缩放其高度以完全显示内容。当用户再次单击标题时，它会将可见性变为消失，并且整行折叠到仅标题。再次单击之前展开的标题，我不必再次加载数据，只需打开可见性即可。

大多数情况下一切都很好，但对于这个非常烦人的问题。 https://nofile.io/f/UBCh5PO7Wv9/screencapture-1525973579493.mp4 这是 Google 收件箱中的录音，我的应用也有完全相同的问题。

当我点击标题展开并在 web 视图中加载内容时，一些 web 视图在下方展开，我的意思是标题保持不变，看起来内容正在加载到单击的标题下方。

但是对于某些内容，webviews 会向上扩展，这意味着它会将被单击以扩展内容的标题向上推。这意味着我正在查看内容的末尾而不是顶部。就像在收件箱的这种情况下，我正在查看电子邮件的末尾而不是电子邮件的顶部。

我在分享的视频中复制了电子邮件的来源，并使用它们加载到我的网络视图中，这是我的发现。

它与加载的内容无关，因为即使我把事情弄得一团糟，它也会发生 它与 webview 的计数或给定 webview 的索引无关 如果我从上到下展开内容，它不会发生。从索引 0..n 开始的意思 -> 但是，当我把所有东西都折叠起来并且我从下到上展开内容时，它总是会发生......从 n 到 0。

基本上，如果 A 和 B 是 webview 的顶部和底部边缘，理想情况下 A 应该保持稳定，B 应该增加向下推动其下方的 recyclerView 内容。但是，当我从下往上展开内容时，底线 B 保持稳定，webview 向上增加并将标题和给定行上方的项目连同它一起推动，这导致查看末尾的烦人行为谷歌收件箱中的内容也比顶部的内容。

这是正在发生的事情的 gif 图像 - 当我点击紫色标题时，webview(pink) 会加载电子邮件。当我点击最后一个时，webview 在下面展开。但是当我点击第二个最后一个时，它会在上面展开，这也会将标题向上推。

有什么想法吗？帮忙？

谢谢

【问题讨论】：

我建议将您的视频上传到 youtube 或最好在此处发布 gif。

我确实在谷歌的收件箱中添加了一个链接到同样的问题。我现在也添加了问题的 gif @azizbekian

【参考方案1】：

在使 web 视图可见后调用 scrollToPosition 或 scrollToPositionWithOffset 以强制回收器视图滚动到子视图的开头，在这种情况下是您的标题。

【讨论】：

感谢@TpoM6oH。我不想调用任何滚动 API。这将导致 UI 跳转。就像在演示 gif 中一样，如果我添加一个滚动 api，它也会将标题移动到设备的顶部。这意味着用户单击的标题已向上移动。我希望它处于相同的位置，例如扩展 gif 中的最后一封电子邮件，其中 web 视图在标题下方扩展，与第二个最后一个不同。

【参考方案2】：

这就是 android 系统如何处理您的视图。为了获得更好的用户体验，您应该将您选择的（扩展的）视图放在 recyclerView 的列表顶部。为了实现这一点，您应该在适配器内部处理项目 onClick 侦听器，然后返回项目的位置并使用

scrollToPositionWithOffset(pos, 0);

像这样：

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(linearLayoutManager);
recyclerView.addItemDecoration(new NullDeividerItemDecoration());
MyAdapter myAdapter = new MyAdapter<>(context, list, new
           OnAdapterItemClickListener<WebsiteDto>() 
                    @Override
                    public void onAdapterItemClick(WebsiteDto websiteDto , int pos) 
                        //Scroll item pos to 0 pixels from the top
                        linearLayoutManager.scrollToPositionWithOffset(pos, 0);
                    


                    @Override
                    public void onAdapterItemLongClick(WebsiteDto websiteDto) 

                    
                );

recyclerView.setAdapter(myAdapter);

希望有帮助。

【讨论】：

感谢@Kenji。我们正在尝试一些动画。所以我不希望视图移动。当从折叠状态展开时，视图会被交换。但是由于有一些像 Avatar 这样的视图很常见，所以我尝试了一些共享元素转换，比如效果。但如果我将视图移到电子邮件顶部，它们将不起作用。所以我只是想防止视图像这样移动。

@onusopus 好的，看看这个。可能有帮助：github.com/wasabeef/recyclerview-animators 检查这个库是如何处理动画的。