web-dev-qa-db-ja.com

Android：大きなアイコンで大きなフローティングアクションボタンを作成する

通常の56 dpよりも大きなフローティングアクションボタン（FAB）を作成し、内部に大きなアイコンを作成します。 （私の目的のために、アイコンは一目瞭然ではないので、短いテキストを含むPNGファイルを作成し、このPNGをアイコンとして使用します。）

FABのサイズを増やすとうまくいきます：
mini-FloatingActionButtonを使用しないため、mini-button-sizeを再定義しました。
in layout-xml私は以下を指定します：

<Android.support.design.widget.FloatingActionButton
    ...
    app:fabSize="mini"
    ....

そしてdimensions.xmlでミニファブのサイズを再定義します：

<dimen name="fab_size_mini">80dp</dimen>

ただし、FABで大きなアイコンを取得することができませんでした。マテリアルアイコンライブラリの異なるdpのアイコンを試しました-成功しませんでした。また、FABレイアウトにパディングを設定しても機能しませんでした。

助言がありますか？ありがとう！

androidfloating-action-button
18
gerhard

dimensions.xmlでfabイメージサイズの最大サイズを再定義してみることができます。

<resources xmlns:tools="http://schemas.Android.com/tools">
    <dimen name="design_fab_size_mini" tools:override="true">80dp</dimen>
    <dimen name="design_fab_content_size" tools:override="true">48dp</dimen>
</resources>

デザインライブラリの元のリソースをオーバーライドすることを確認する必要があります。うまくいかない場合は、design_fab_image_sizeの代わりにdesign_fab_content_sizeを試してください。

これは実際の解決策ではなくハッキングであるため、注意して使用してください。将来のDesign Libraryリリースでリソースの名前が変更された場合、ソリューションが機能しない可能性があります。私の意見では、デザインライブラリで定義されているサイズに固執することです。これは、アプリ全体の見栄えをよくするマテリアルデザインに基づく推奨デザインガイドラインであるためです。

31
Grace Coder

私はこれに出くわし、試行錯誤を通して答えを見つけました。 layout:widthとlayout:heightの両方をmatch_parentに設定し、FrameLayoutでフローティングアクションボタンをラップすると、フローティングアクションボタンのサイズを大きくできるようです（そうする必要はありません） 、しかし、あなたはボタンのサイズを設定したいだけなので、理にかなっています）。

次に、FrameLayoutの幅と高さを任意に設定します。

Grace Coderの答えを支持しました。これは確かに問題に対処しているからです。

<FrameLayout
    Android:layout_width="100dp"
    Android:layout_height="100dp"
    Android:layout_below="@+id/chronometer"
    Android:layout_centerHorizontal="true">

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@+id/chronometer"
        Android:layout_centerHorizontal="true"
        Android:layout_gravity="bottom"
        Android:clickable="true"
        Android:src="@Android:drawable/ic_btn_speak_now"
        Android:id="@+id/record_fab" />
</FrameLayout>

私が撮ったこのスクリーンショットで違いを見ることができます：

enter image description here

上部のFABは私のコード/回避策を使用し、下部のFABは標準（ほとんど変更不可）の寸法を使用します。

19
Dog Lover

Design Support Library 27.1.0以降、カスタムFABサイズを設定する公式の方法があります： _app:fabCustomSize_ XML属性 および対応する setCustomSize method 。アイコンのサイズを大きくするには、_Android:scaleType="center"_以上のドロアブルを使用できます。 UPDATE：_Android:scaleType_は broken になりました。代わりにfab.setScaleType(ImageView.ScaleType.CENTER)を使用してください。

他の提案されたソリューションにはいくつかの欠点があります。

  • デフォルトのFABディメンションの再定義 は単一のボタンに適用できず、本質的にハックです（変更される可能性のある非公開APIを使用します）。
  • FrameLayoutでFABをラップする （または単にFABの_layout_width_および_layout_height_を希望のサイズに設定するだけで、同じ効果が得られます）は、Lollipop以前のデバイスではひどく見えます。 UPDATE：ポストロリポップでも使用可能になりました（下のスクリーンショットを参照）。
  • scaleXおよびscaleYの設定 マージンの調整が必要で（視覚的なFABサイズがレイアウトサイズと一致しないため）、スケーラブルでない部分をスケーリングします：ボタンの境界線と（事前にロリポップ）シャドー幅。

サンプルレイアウト API 19（左）およびAPI 21（右）でレンダリングされた場合：

10
gmk57

上記のコメントで@Tim Castelijnsがよく指摘した@GraceCoderの回答を明確にするだけです

Res-> values-> dimensions.xmlファイルに移動する必要があります

enter image description here

追加して変更します

<dimen name="design_fab_size" tools:override="true">100dp</dimen>
    <dimen name="design_fab_content_size" tools:override="true">98dp</dimen>

注意：

design_fab_size

じゃない

design_fab_size_mini

3
HenriqueMS
<dimen name="design_fab_size_mini" tools:override="true">120dp</dimen>
<dimen name="design_fab_size_normal" tools:override="true">150dp</dimen>
1
Boris Levochsky

Android Pプレビューでは、FABが親のサイズに一致するようになりました。アイコンのサイズが縮小され、アイコンが小さくなりすぎて中心から外れてしまったため、機能しなくなりました。

私が見つけた最も簡単な方法は、FABをFrameLayoutに配置し、影が切れないようにFABに公正なマージンを設定し（10dpを使用）、両方のサイズをwrap_contentに設定してから、 scaleXとscaleYをFrameLayoutに追加します。

<FrameLayout
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:scaleX="1.6"
    Android:scaleY="1.6">

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="10dp"
        Android:clickable="true"
        Android:focusable="true"
        Android:src="@drawable/ic_send_white_24dp" />
</FrameLayout>

これは期待どおりに機能し、特定の量で簡単にスケーリングでき、他のフローティングアクションボタンには影響しません。

0
Ullallulloo

追加するだけで、ファブサイズを簡単にカスタマイズできます

        app:fabCustomSize="32dp"

お気に入り

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab_main_unlock"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom|center_horizontal"
        Android:layout_margin="@dimen/margin_normal"
        Android:src="@drawable/ic_unlock"
        Android:visibility="gone"
        app:backgroundTint="@color/colorPrimary"
        app:fabCustomSize="@dimen/margin_very_massive"
        tools:visibility="visible" />
0
M Moersalin