anyuan2002.com - vwin网

查找: 您的方位主页 > 手机频道 > 阅览资讯:FloatingActionButton 彻底解析[Design Support Library(2)]

FloatingActionButton 彻底解析[Design Support Library(2)]

2019-03-26 13:26:41 来历:www.anyuan2002.com 【

FloatingActionButton 彻底解析[Design Support Library(2)]

FloatingActionButton 彻底解析[Design Support Library(2)]

转载请标明出处:
[http://blog.csdn.net/lmj623565791/article/details/46678867](http://blog.csdn.net/lmj623565791/article/details/46678867;
本文出自:【张鸿洋的博客】

哈,跟随着上篇Android 自己完成 NavigationView [Design Support Library(1)]之后,下面介绍个Design Support Library中极端简略的控件:FloatingActionButton

一、简略运用

布局:


    <android.support.design.widget.FloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="right|bottom"
      android:src="@drawable/ic_discuss"
      />

运用十分简略,直接当成ImageView来用即可。

作用图:

FloatingActionButton 彻底解析[Design Support Library(2)]

能够看到咱们的FloatingActionButton正常显现的状况下有个填充的色彩,有个暗影;点击的时分会有一个rippleColor,而且暗影的规模能够增大,那么问题来了:

  • 这个填充色以及rippleColor怎么自界说呢?

    默许的色彩取的是,theme中的colorAccent,所以你能够在style中界说colorAccent。

    colorAccent 对应EditText修改时、RadioButton选中、CheckBox等选中时的色彩。具体请参阅:Android 5.x Theme 与 ToolBar 实战

    rippleColor默许取的是theme中的colorControlHighlight。

    咱们也能够直接用过特点界说这两个的色彩:

    app:backgroundTint="#ff87ffeb"
    app:rippleColor="#33728dff"
  • 立体感有没有什么特点能够动态指定?

    和立体感相关有两个特点,elevation和pressedTranslationZ,前者用户设置正常显现的暗影巨细;后者是点击时显现的暗影大校咱们能够自己设置测验下。

综上,假如你期望自界说色彩、以及暗影巨细,能够依照如下的办法(当然,色彩你也能够在theme中设置):

<android.support.design.widget.FloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="right|bottom"
      android:src="@drawable/ic_discuss"
      app:backgroundTint="#ff87ffeb"
      app:rippleColor="#33728dff"
      app:elevation="6dp"
      app:pressedTranslationZ="12dp"
      />

至于点击事情,和View的点击事情共同就不说了~~

二、5.x存在的一些问题

在5.x的设备上运转,你会发现一些问题(测验体系5.0):

  • 木有暗影

记住设置app:borderWidth="0dp"

  • 按上述设置后,暗影呈现了,可是竟然有矩形的鸿沟(未设置margin时,能够看出)

需求设置一个margin的值。在5.0之前,会默许就有一个外边距(不过并非是margin,仅仅作用相同)。

so,杰出的实践是:

  • 增加特点app:borderWidth="0dp"
  • 关于5.x设置一个合理的margin

如下:

 <android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    app:borderWidth="0dp"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_headset" />

values

 <dimen name="fab_margin">0dp</dimen>

values-v21

 <dimen name="fab_margin">16dp</dimen>

三、简略完成FloatActionButton

参阅参阅资料4

能够经过drawable来完成一个简略的暗影作用:

drawable/fab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <layer-list>
      <!-- Shadow -->
      <item android:top="1dp" android:right="1dp">
        <layer-list>
          <item>
            <shape android:shape="oval">
              <solid android:color="#08000000"/>
              <padding
                android:bottom="3px"
                android:left="3px"
                android:right="3px"
                android:top="3px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#09000000"/>
              <padding
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                android:top="2px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#10000000"/>
              <padding
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                android:top="2px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#11000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#12000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#13000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#14000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#15000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#16000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
        </layer-list>
      </item>

      <!-- Blue button pressed -->
      <item>
        <shape android:shape="oval">
          <solid android:color="#90CAF9"/>
        </shape>
      </item>
    </layer-list>
  </item>

  <item android:state_enabled="true">

    <layer-list>
      <!-- Shadow -->
      <item android:top="2dp" android:right="1dp">
        <layer-list>
          <item>
            <shape android:shape="oval">
              <solid android:color="#08000000"/>
              <padding
                android:bottom="4px"
                android:left="4px"
                android:right="4px"
                android:top="4px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#09000000"/>
              <padding
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                android:top="2px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#10000000"/>
              <padding
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                android:top="2px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#11000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#12000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#13000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#14000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#15000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
          <item>
            <shape android:shape="oval">
              <solid android:color="#16000000"/>
              <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"
                android:top="1px"
                />
            </shape>
          </item>
        </layer-list>
      </item>

      <!-- Blue button -->

      <item>
        <shape android:shape="oval">
          <solid android:color="#03A9F4"/>
        </shape>
      </item>
    </layer-list>

  </item>

</selector>

一个适当长的drawable,不过并不杂乱,也比较好回忆。首先为一个View增加暗影,运用的是color从#08000000#1500000,取的padding值为4、2、2、1…1;这样就能够为一个View的四边都增加上暗影作用。

当然了,为了暗影愈加传神,把上述的Layer-list又包括到了一个item中,并为该item设置了top和right,为了让左,下的暗影作用比上、右重,当然你能够设置其他两头,改动作用。

最终增加一个item设置为按钮的填充色(留意该item的层级)。

该drawable为一个selector,所以press和默许状况写了两次根本共同的代码,除了填充色不同。

运用:

 <ImageButton
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:layout_gravity="bottom|right"
    android:layout_margin="20dp"
    android:background="@drawable/fab"
    android:src="@drawable/ic_done"
    />

作用图:

FloatingActionButton 彻底解析[Design Support Library(2)]

ok,到此FloatActionButton就介绍结束啦~~有爱好的话,也能够从github挑选个库看看他人的完成。

ok~

新浪微博
微信大众号:hongyangAndroid
(欢迎重视,第一时刻推送博文信息)
FloatingActionButton 彻底解析[Design Support Library(2)]

参阅资料

  • http://antonioleiva.com/floating-action-button/
  • https://code.google.com/p/android/issues/detail?id=175067
  • https://github.com/chrisbanes/cheesesquare
  • http://www.myandroidsolutions.com/2015/01/01/android-floating-action-button-fab-tutorial/

本文地址:http://www.anyuan2002.com/a/luyou/99585.html
Tags: 彻底 解析 FloatingActionButton
修改:vwin网
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部