码迷,mamicode.com
首页 > 其他好文 > 详细

如何自定义FloatingActionButton的大小

时间:2015-09-14 12:01:44      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

Google最近为了让开发者更好的更规范的应用Material Design设计思想,特意放出了android support design library,里面含有更多Material Design的标志性组件,其中最常用的就是那个圆形按钮,叫做Floating Action Button,可以简称为FAB。一个使用该控件的例子为:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="25dp"
        android:layout_gravity="start|top"
        app:borderWidth="0dp"
        app:fabSize="normal"
        app:elevation="4dp"
        android:scaleType="center"
        android:src="@drawable/btn_menu" />

注意,在跟布局中需要配置app这个命令空间:

xmlns:app="http://schemas.android.com/apk/res-auto"

这里关注FAB的app:fabSize这个属性,它是用来规定大小,但是发现只有两个值:mini和normal,默认情况下官方推荐的宽高是56dp,但是如果设计师需要你显示一个比较大一些的FAB,比如100dp(这里发现将fabSize设置成normal或者mini都很小),该怎么办?

 

第一反应是修改layout_height和layout_width这两个属性,将他们设置成100dp,最后却发现成了这个怂样:

技术分享

看来改变上述两个属性是不行的,那么我们来看FloatingActionButton的源码,在它的构造函数中,有下列代码:

 ShadowViewDelegate delegate = new ShadowViewDelegate() {
            public float getRadius() {
                return (float)FloatingActionButton.this.getSizeDimension() / 2.0F;
            }

            public void setShadowPadding(int left, int top, int right, int bottom) {
                FloatingActionButton.this.mShadowPadding.set(left, top, right, bottom);
                FloatingActionButton.this.setPadding(left + FloatingActionButton.this.mContentPadding, top + FloatingActionButton.this.mContentPadding, right + FloatingActionButton.this.mContentPadding, bottom + FloatingActionButton.this.mContentPadding);
            }

            public void setBackgroundDrawable(Drawable background) {
                FloatingActionButton.super.setBackgroundDrawable(background);
            }
        };
        if(VERSION.SDK_INT >= 21) {
            this.mImpl = new FloatingActionButtonLollipop(this, delegate);
        } else {
            this.mImpl = new FloatingActionButtonEclairMr1(this, delegate);
        }

 

这里的mImpl是一个FloatingActionButtonImpl的实现类,FloatingActionButton大部分的操作实际上都是在操作这个mImpl,这个mImpl在被new出来的时候会判断当前环境是不是API level大于等于21(实际上在小于21的时候,他用drawable绘制了一层阴影从而有类似于21以上的evevation的效果),随后创建mImpl的时候传入了delegate这个参数,ShadowViewDelegate实际上就是个drawable的包装类。我们看getRadius这个实现方法,显然它是计算半径的,所以要想定制FAB的宽高,得要从这里找文章。

具体看getSizeDimension这个方法:

 final int getSizeDimension() {
        switch(this.mSize) {
        case 0:
        default:
            return this.getResources().getDimensionPixelSize(dimen.fab_size_normal);
        case 1:
            return this.getResources().getDimensionPixelSize(dimen.fab_size_mini);
        }
    }

原来app:fabSize实际上是在调用fab_size_normal和fab_size_mini这两个dimen的值,相应的对应了normal和mini这两种情况,那么我们可以想到在我们的代码中国同样定义这两个dimen值对原来的进行覆盖,于是我们在醒目代码的dimen.xml中定义:

<resources>
    <dimen name="fab_size_normal">100dp</dimen>
</resources>

这个时候再看效果:

技术分享

修改成功

 

如何自定义FloatingActionButton的大小

标签:

原文地址:http://www.cnblogs.com/soaringEveryday/p/4806668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!