草庐IT

Android Spinner 显示动画 Material 设计

coder 2023-06-07 原文

我只需要一些非常简单的东西。 在网上找不到任何可以帮助我实现 following behaviour 的指南/资源:

所以有3件事:

  1. 似乎与 View 绑定(bind)的涟漪
  2. 放大弹窗动画(找不到自定义方法)
  3. 文本从 Spinner 字段转移到实际弹出窗口

感谢任何帮助。

编辑

涟漪实际上是可以在文档中找到的直截了当的东西。弹出下拉菜单的放大动画是我最感兴趣的。如果我只能获得对该弹出窗口的引用,我可以为它制作任何我想要的动画......任何人的想法?

最佳答案

在过去 >48 小时内,我一直在努力解决这个问题(我有一些额外的时间不要怪我),我可以肯定地告诉你这些:

  1. 使用 AppCompat 主题和普通 Spinner 为您提供免费的涟漪(耶!)。如果你有一个自定义的 Spinner 确保扩展 AppCompatSpinner ,你会得到一些好的主题。引用 AppCompatSpinner javadoc:

A Spinner which supports compatible features on older version of the platform, including:

  • Allows dynamic tint of it background via the background tint methods in ViewCompat.
  • Allows setting of the background tint using backgroundTint and backgroundTintMode.
  • Allows setting of the popups theme using popupTheme.

This will automatically be used when you use Spinner in your layouts. You should only need to manually use this class when writing custom views.

  1. 没有没有方法来检索通过扩展ANY类显示的PopupWindow。有很多嵌套类有助于该功能(剧透:它们大多是私有(private)的)。

  2. 可以在您的主题中自定义 PopupWindow...静态 的进入和退出过渡(哇哦!)。我目前正在使用 AppCompat v23 并进行了一些调查,发现:

    • 自定义ListPopupWindowLOLLIPOP及以上的样式

      <style name="Widget.Material.ListPopupWindow">
          <item name="dropDownSelector">?attr/listChoiceBackgroundIndicator</item>
          <item name="popupBackground">@drawable/popup_background_material</item>
          <item name="popupElevation">@dimen/floating_window_z</item>
          <item name="popupAnimationStyle">@empty</item>
          <item name="popupEnterTransition">@transition/popup_window_enter</item>
          <item name="popupExitTransition">@transition/popup_window_exit</item>
          <item name="dropDownVerticalOffset">0dip</item>
          <item name="dropDownHorizontalOffset">0dip</item>
          <item name="dropDownWidth">wrap_content</item>
      </style>
      
    • 在 LOLLIPOP 之前对其进行自定义的样式:

      <style name="Base.Widget.AppCompat.ListPopupWindow" parent="">
          <item name="android:dropDownSelector">?attr/listChoiceBackgroundIndicator</item>
          <item name="android:popupBackground">@drawable/abc_popup_background_mtrl_mult</item>
          <item name="android:dropDownVerticalOffset">0dip</item>
          <item name="android:dropDownHorizontalOffset">0dip</item>
          <item name="android:dropDownWidth">wrap_content</item>
      </style>
      
    • 这就是您在主题中设置的内容:

      // From the constructor listPopupWindowStyle is the 
      // theme attribute you're looking for.
      public ListPopupWindow(Context context, AttributeSet attrs) {
          this(context, attrs, R.attr.listPopupWindowStyle);
      }
      

也就是说,我仍在获取您的详细信息,但我正在通过 克隆 2 个类来解决它:AppCompatSpinnerListPopupWindow 并将公共(public) getPopup() getter 添加到克隆的 ListPopupWindow 代码中,以便在我的克隆 AppCompatSpinner 中访问它。这带来了几个机会。一个例子是我的 centerPopup() 方法,它应该根据 spinnerItem(在微调器 View 本身中显示的选定项目)和 spinnerDropdownItem(单个 View )的中心移动布局弹出窗口的位置在下拉列表中显示为列表项)。然后在调用 super.show()

之后立即在 DropdownPopup.show() 中调用 centerPopup() 方法
private void centerPopup(boolean updateListSelection) {
    boolean aboveAnchor = getPopup().isAboveAnchor();

    int[] spinnerLocation = new int[2];
    int[] popupLocation = new int[2];

    ListView listView = getListView();

    /*
        Popup is anchored at spinner TOP LEFT when it is set to overlap else at BOTTOM LEFT

        Also seems the windowlayoutparams generated for popup is wrapcontent for width and height
        As a result popup locationOnScreen returns [0, 0] which is relative to the window.
        We can take it as relative to spinner location and add spinnerLocation X value to give
        left edge of popup
     */

    MaterialSpinner.this.getLocationInWindow(spinnerLocation);
    int spMidX = spinnerLocation[0] + (MaterialSpinner.this.getWidth() / 2);
    int spMidY = spinnerLocation[1] + (MaterialSpinner.this.getHeight() / 2);

    Rect spinnerBgdPadding = new Rect();
    MaterialSpinner.this.getBackground().getPadding(spinnerBgdPadding);

    // ----- BUG - returns erroneous height
    // Ideally should measure one of the drop down list children and give a height
    // exactly as it wouldwhen laid out eventually.
    // Works only for lists with homogenously tall content
    View child = listView.getAdapter().getView(0, null, listView);

    child.setLayoutParams(new LayoutParams(WRAP_CONTENT, WRAP_CONTENT));

    child.measure(
            MeasureSpec.makeMeasureSpec(listView.getWidth() - listView.getPaddingLeft() - listView.getPaddingRight(), MeasureSpec.AT_MOST),
            MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
    );
    int listItemHeight = child.getMeasuredHeight();
    // ----- /BUG

    getPopup().getContentView().getLocationInWindow(popupLocation);
    int popMidX = spinnerLocation[0] + (getPopup().getWidth()) / 2;
    int popMidY = spinnerLocation[1] + (listItemHeight / 2);

    int hoff = getHorizontalOffset();
    int voff = getVerticalOffset();

    int xoff = spMidX - popMidX - hoff - spinnerBgdPadding.left;
    int yoff = spMidY - popMidY - voff;

    getPopup().update(spinnerLocation[0] + xoff, spinnerLocation[1] + yoff, -1, -1, true);

    if (updateListSelection)
        listView.setSelectionFromTop(MaterialSpinner.this.getSelectedItemPosition(), 0)
    ;

    // getPopup().update(MaterialSpinner.this, xoff, yoff, -1, -1);
    // int numVisItems = listView.getLastVisiblePosition() - getFirstVisiblePosition();

}

如果返回了正确的 listItemHeight,弹出窗口不仅应该出现在微调器上,而且文本中心也应该对齐。 (由于背景和填充相关问题,可能会偏离一些像素,但可以解决)。

一旦居中,下一步就是将 dropDownList selectedPosition View 滚动到 popupWindow 的中心并更新 yoff Y-相应地偏移。

popupEnterTransition 属性仅限于 LOLLIPOP 但如果这不是问题,您可以在此处插入放大转换,这应该可以获得您想要的效果。不过我还没有尝试过,但我也认为更好的动画应该是微调器中心的显示效果(看起来像你的规范视频中的那个)。

但所有这些都很好...理论上 x_x 哈哈

关于Android Spinner 显示动画 Material 设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30053820/

有关Android Spinner 显示动画 Material 设计的更多相关文章

  1. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  4. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4,一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时,用户会更新。但是当我添加例如字段:name时,它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗?我也搜索过这个地方,找到了许多不同的解决方案,但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数,您可以在ApplicationController中使用beforefilter,因为Rails4将参数

  5. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  6. ruby-on-rails - link_to 不显示任何 rails - 2

    我试图在索引页中创建一个超链接,但它没有显示,也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线,我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article

  7. ruby-on-rails - 如何在 Rails View 上显示错误消息? - 2

    我是rails的新手,想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围,如果不在范围内则返回错误信息。我可以检查上面代码的范围,但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单,一种显示ActiveRecord模型实例属性的表单。c

  8. ruby-on-rails - 复数 for fields_for has_many 关联未显示在 View 中 - 2

    目前,Itembelongs_toCompany和has_manyItemVariants。我正在尝试使用嵌套的fields_for通过Item表单添加ItemVariant字段,但是使用:item_variants不显示该表单。只有当我使用单数时才会显示。我检查了我的关联,它们似乎是正确的,这可能与嵌套在公司下的项目有关,还是我遗漏了其他东西?提前致谢。注意:下面的代码片段中省略了不相关的代码。编辑:不知道这是否相关,但我正在使用CanCan进行身份验证。routes.rbresources:companiesdoresources:itemsenditem.rbclassItemi

  9. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  10. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

随机推荐