web-dev-qa-db-ja.com

スイッチウィジェットのサイズを変更する方法

アイスクリームサンドイッチでは、On-Off Sliderを表示する Switch ウィジェットが導入されました。

このようにスイッチを追加しました：

<Switch 
    Android:layout_width="fill_parent"
    Android:layout_height="48dp"
    Android:textStyle="bold"
    Android:thumb="@drawable/switch_thumb_selector"
    Android:track="@drawable/switch_bg_selector" />

トラックとサムのドローアブルは、すべての可能なサイズに拡大縮小する9つのパッチイメージです。 Switchが指定された境界内で最大サイズにスケーリングされることを期待していましたが、ドロアブルが指定されたスペース内のちょうど中央にあるようです。

スイッチのサイズを大きくして表示を大きくすることは可能ですか？

androidandroid-switch
51
Janusz

私は最終的にこれを理解したと思う：

  1. スイッチのキャプションサイズは<switch Android:textSize=""... />によって制御されます
  2. スイッチのつまみのテキストサイズは、<switch Android:switchTextAppearance="".../>によって制御されます。独自のスタイルを作りましょう。このスタイルは、親指の全体の幅を制御するため重要です（これについては後で説明します）。
  3. 全体のスイッチの高さは、<switch Android:track="@drawable/shape_mythumb".../>によって制御されます。 9個のパッチを使用しましたが、これが問題の原因であると思われます。 <shape Android:shape="rectangle"...></shape>を使用し、成功しました。
  4. サムドロウアブル<switch Android:thumb="".../>の高さは、トラックの高さに合わせて調整されます。親指のドローアブルの高さは、親指の形状にとってのみ重要です。スイッチの高さには影響しません。

だからここに私が見つけたものがあります：

  1. スイッチサムとスイッチトラックの両方に<shape>...</shape>ドロアブルを使用します。
  2. 両方のドロアブルの幅は無関係です。私は「0dp」に設定します
  3. トラックの高さがスイッチの全体の高さを決定します。
  4. Android:textOffまたはAndroid:textOnの最も長い文字列が、つまみの幅を決定します。これにより、スイッチ全体の幅が決まります。スイッチの幅は常に親指の幅の2倍です。
  5. サムテキストの幅がトラックの高さよりも小さい場合、サムの形状は縮小されます。これにより、親指の形が歪む可能性があります。この場合、スペースを追加して、「オフ」または「オン」テキストの幅を、トラックの高さと少なくとも同じ幅になるまで増やします。

これは、少なくとも必要なサイズと形状へのスイッチの設計を開始するのに十分な情報です。あなたが他に何かを見つけたら教えてください。

89
Quantium

スケールプロパティを使用してサイズを変更するとうまくいきました。

これらの行をxmlファイルの<switch/>タグに追加します。

Android:scaleX="2"
Android:scaleY="2"

必要に応じてスケール値を変更できます。ここで、値2はサイズを2倍にし、同様に値0.5はサイズを半分にします。

例：

       <Switch
            Android:id="@+id/switchOnOff"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:scaleX="2"
            Android:scaleY="2"/>
75
Gaurav

上記の答えは正しいです。シェイプドロウアブルを使用してスイッチの幅を変更する方法の小さな例を次に示します。

1）親指に色を使用（color_thumb.xml）

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <size Android:height="40dp"  />
    <gradient Android:height="40dp" Android:startColor="#FF569BDA" Android:endColor="#FF569BDA"/>
</shape>

2）トラックの灰色（gray_track.xml）

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <size Android:height="40dp"  />
    <gradient Android:height="40dp" Android:startColor="#dadadada" Android:endColor="#dadadada"/>
</shape>

3）thumbのセレクター（thumb.xml）

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_enabled="false" Android:drawable="@drawable/gray_track" />
    <item Android:state_pressed="true"  Android:drawable="@drawable/color_thumb" />
    <item Android:state_checked="true"  Android:drawable="@drawable/color_thumb" />
    <item                               Android:drawable="@drawable/gray_track" />
</selector>

4）トラックのセレクター（track.xml）

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_focused="true"  Android:drawable="@drawable/color_thumb" />
     <item                               Android:drawable="@drawable/gray_track" />
</selector>

そして最後にスイッチで

つかいます

Android:switchMinWidth="56dp"
Android:thumb="@drawable/thumb"
Android:track="@drawable/track"
44
Asthme

本日、同様の問題に対処しましたが、Jelly BeanからsetSwitchMinWidth(width);を使用して完全なスイッチの最小幅を設定できることがわかりました。ただし、テキストが大きすぎる場合は、ウィジェットの左側が切り取られるだけだと考えました。ここでは、親指のデフォルトのテキストパディングを変更すると便利です。setThumbTextPadding(num);で変更できます。

唯一の問題-これは実際にブロッカーです-これまでにつまずいたのは、もちろん親コンテナのサイズに応じてスイッチを拡張する必要があるということです。そのために、スイッチをカスタム線形レイアウトでラップし（API <= 15のフォールバックも提供します）、これを試しました：

_@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    if (Android.os.Build.VERSION.SDK_INT >= 16) {
        adaptSwitchWidth(w);
    }
}

@TargetApi(16)
private void adaptSwitchWidth(int containerWidth) {
    Switch sw = (Switch) compoundButton;
    sw.setSwitchMinWidth(containerWidth);
}
_

残念なことに、どんな愚かな理由であれ、スイッチウィジェットはそれに反応しません。私もOnLayoutChangeListenerで成功させずにそれをやろうとしました。理想的には、スイッチの現在のサイズもその状態で認識されている必要があり、このように空きスペースをパディングに「分配」したかったのです。

_int textPadding = Math.max(0, (sw.getWidth() - containerWidth) / 4);
sw.setThumbTextPadding(textPadding);
_

ただし、sw.getWidth()はonSizeChanged()で0を返します。これは、おそらく適切にレイアウトされていないためでしょう。ええ、私たちはほとんどそこにいます...あなたが何かに出くわしたら、私に知らせてください:)

8
Thomas Keller

トラックの高さは、親指/スイッチの全体の高さを視覚的に決定する必要はありません。トラックの描画可能なシェイプに透明なストロークを追加して、トラックの周りにパディングを作成しました。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
       Android:shape="rectangle">
    <solid Android:color="@color/track_color"/>
    <size Android:height="@dimen/track_height"  />
    <size Android:width="@dimen/track_width"  />

    <!-- results in the track looking smaller than the thumb -->
    <stroke
        Android:width="6dp"
        Android:color="#00ffffff"/>
</shape>
7
stevenp