0
1

More than 3 years have passed since last update.

アイコンのサイズを調整するカスタムButtonを作ってみた

Posted at

アイコンのサイズを調整するカスタムButtonを作ってみた

AndroidでVectorDrawableをアイコンとしてボタンに表示させて使っていたが解像度別にアイコン(画像)を用意するだけだと、端末によっては
大きすぎたり小さすぎたりして今一だったのでボタンサイズに合わせてアイコンサイズを調整するカスタムボタンを作ってみました。

カスタムViewにした理由

画像のリサイズにViewのサイズを使いたかったがfragmentやactivityでやろうとするとViewTreeObserver使わないといけなくてめんどくさかったし、別に作った当時はView内部で完結しててよかったので。

実装

android.widget.Buttonを継承したCustomButtonクラスを作成しコンストラクタとonLayoutを実装する

    // 1.0(フルサイズ) 〜 0.0
    var mRatio = 0.55

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
    var drawable: VectorDrawable? = null
    val list = compoundDrawables.toList()

    // アイコンは一つしか設定されていない想定
    list?.forEach {
        if(it != null){
            drawable = it as? VectorDrawable
        }
    }

    // アイコンのサイズ設定
    val scalingSize = (this.height * mRatio)
    drawable?.apply {
        (this as VectorDrawable).setBounds(0,0,(scalingSize).toInt(),(scalingSize).toInt())
        // アイコンの表示位置調整(今回はボタン上部にアイコンを表示)
        setCompoundDrawables(null,this,null,null)

    }
    background = ContextCompat.getDrawable(context, R.drawable.button_round_corners_10dp)
    setTextColor(mColor?: Color.WHITE)
}

使い方

layout(xml)なりFramgentなりActivity任意の場所でアイコンを設定しておけばOK
(*言わずもがなアイコンが事前に設定されていないと表示する画像がないのでどうしようもない)
アイコンのサイズ(割合)を変更したい時は mRatioの値を0から1の値を変えればOK

注意点

・アイコンを表示する箇所を変更したい時はsetCompoundDrawables()でdrawableの表示位置を変える必要がある
・今回のCutomButtonではonLayout無いでサイズを指定するので問題ないが、
通常のボタンでアイコンを設定する際にsetCompoundDrawables()を使う時は
使う前にsetBounds()でサイズ設定しないと描画サイズが縦横ともに0になるのか表示されなくなるので注意が必要になる


参考

Qita: onMeasureとonLayoutについて理解する
stackoverflow : Calling setCompoundDrawables() doesn’t display the Compound Drawable

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1