web-dev-qa-db-ja.com

Androidテキストはスイッチの両側に表示されます

API 8のサポートにカスタムスイッチを使用しています [〜＃〜] this [〜＃〜] カスタムスイッチのライブラリを使用しています。でも、図のようなものを作りたいです。スタイルの色を変えてみましたが、思い通りに色が出ません。

enter image description here

助けてください、よろしくお願いします。

androidswitch-statementcustom-component
14
Mayur Raval

これを実装して楽しい一日を過ごした後の、完全で実用的なソリューションを次に示します。

Custom switch example

以下を使用して、スイッチのトラックのドローアブルを設定します。トラックは、親指が左右にスライドするコンテナです。

mMessengerSwitch.setTrackDrawable(new SwitchTrackTextDrawable(this,
        "LEFT", "RIGHT"));

SwitchTrackTextDrawableの実装は次のとおりです。これは、テキストをバックグラウンドで正確に正しい位置に書き込みます（まあ、私はNexus5のAPI23でのみテストしました）。

/**
 * Drawable that generates the two pieces of text in the track of the switch, one of each
 * side of the positions of the thumb.
 */
public class SwitchTrackTextDrawable extends Drawable {

    private final Context mContext;

    private final String mLeftText;

    private final String mRightText;

    private final Paint mTextPaint;

    public SwitchTrackTextDrawable(@NonNull Context context,
            @StringRes int leftTextId,
            @StringRes int rightTextId) {
        mContext = context;

        // Left text
        mLeftText = context.getString(leftTextId);
        mTextPaint = createTextPaint();

        // Right text
        mRightText = context.getString(rightTextId);
    }

    private Paint createTextPaint() {
        Paint textPaint = new Paint();
        //noinspection deprecation
        textPaint.setColor(mContext.getResources().getColor(Android.R.color.white));
        textPaint.setAntiAlias(true);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setTextAlign(Paint.Align.CENTER);
        // Set textSize, typeface, etc, as you wish
        return textPaint;
    }

    @Override
    public void draw(Canvas canvas) {
        final Rect textBounds = new Rect();
        mTextPaint.getTextBounds(mRightText, 0, mRightText.length(), textBounds);

        // The baseline for the text: centered, including the height of the text itself
        final int heightBaseline = canvas.getClipBounds().height() / 2 + textBounds.height() / 2;

        // This is one quarter of the full width, to measure the centers of the texts
        final int widthQuarter = canvas.getClipBounds().width() / 4;
        canvas.drawText(mLeftText, 0, mLeftText.length(),
                widthQuarter, heightBaseline,
                mTextPaint);
        canvas.drawText(mRightText, 0, mRightText.length(),
                widthQuarter * 3, heightBaseline,
                mTextPaint);
    }

    @Override
    public void setAlpha(int alpha) {
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}
10
espinchi

使ってみてください

Android:textOn="On"
Android:textOff="Off"

の代わりに

Android:text="On"

スイッチで。

それが助けになるなら、 this を通過することもできます。

3
MysticMagicϡ

これに対する正しい解決策を見つけるのに苦労した後、私はこれを見つけました 小さな図書館 。使いやすく、ニーズを完全に満たしていました。 2つ以上の値を表示するために使用することもできます。

[〜＃〜] update [〜＃〜] ：その間、このライブラリは維持されなくなったので、 推奨されるもの を試してみてください。 。

これは、私がそれを包むFrameLayoutの周りに置いた白い境界線のようないくつかのより多くのスタイリングで最終的にそれをどのように見せたかですボーダーを使用しない）：

enter image description here

これのxmlは次のとおりです。

<FrameLayout
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:padding="1dp"
            Android:background="@drawable/white_border">

            <belka.us.androidtoggleswitch.widgets.ToggleSwitch
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                custom:activeBgColor="@color/white"
                custom:activeTextColor="@color/black"
                custom:inactiveBgColor="@color/black"
                custom:inactiveTextColor="@color/white"
                custom:textToggleLeft="left"
                custom:textToggleRight="right"/>
        </FrameLayout>

そして@drawable/white_borderは次のようになります：

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle" >
<solid Android:color="@Android:color/transparent" />
<stroke Android:width="2dip"
    Android:color="@color/white" />
<corners
    Android:radius="3dp"/>
2
Vucko

このレイアウトで線形レイアウト（スイッチのトラックとして使用されます）を含むカスタムレイアウトを作成しました。トラックの「オン」/「オフ」テキストをシミュレートするために2つのテキストを配置し、その上に通常のスイッチですが、トラックはなく、透明なトラックのある親指だけです。

とにかくこれはコードです：

colors.xml

<color name="switch_selected_text_color">#FFFFFF</color>
<color name="switch_regular_text_color">#A8A8A8</color>

settings_switch_color_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="@color/switch_selected_text_color" Android:state_checked="true" />
    <item Android:color="@color/switch_regular_text_color" />
</selector>

styles.xml

<style name="SwitchTextAppearance" parent="@Android:style/TextAppearance.Holo.Small">
    <item name="Android:textColor">@color/settings_switch_color_selector</item>
</style>

new_switch.xml-カスタムビューで使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content">

    <LinearLayout
        Android:id="@+id/track_layout"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/settings_track"
        Android:weightSum="1">

        <TextView
            Android:id="@+id/left_text"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:textColor="@color/switch_regular_text_color"
            Android:layout_weight="0.5"
            Android:gravity="center"
            Android:text="OFF" />

        <TextView
            Android:id="@+id/right_text"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:textColor="@color/switch_regular_text_color"
            Android:layout_weight="0.5"
            Android:gravity="center"
            Android:text="ON" />
    </LinearLayout>

    <Switch
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:thumb="@drawable/thumb_selector"
        Android:switchTextAppearance="@style/SwitchTextAppearance"
        Android:textOn="ON"
        Android:textOff="OFF"
        Android:checked="true"
        Android:showText="true"
        Android:track="@Android:color/transparent"/>
</RelativeLayout>

これはカスタムビューです-カスタムビューのレイアウトを膨らませるためだけです

public class DoubleSidedSwitch extends RelativeLayout {

    private TextView _leftTextView;
    private TextView _rightTextView;
    private Switch   _switch;

    public DoubleSidedSwitch(Context context) {
        super(context);
        init(context);
    }

    public DoubleSidedSwitch(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        View view = LayoutInflater.from(context).inflate(R.layout.new_switch, this, true);
        initViews(view);
        initListeners();
    }

    private void initListeners() {

    }

    private void initViews(View view) {

    }
}
2
Anton Makov

2つの標準ボタンとLinearLayoutで作成されたものがあります。インポートするxmlファイルはたくさんありますが、すべてのバージョンで完全に機能し、非常に使いやすいです。次のGithubページを確認してください

2つのボタンを備えたカスタムスイッチ

使用法

  1. Res/drawableの下にあるXMLファイルをプロジェクトのres/drawableフォルダーにコピーします。
  2. LinearLayoutをlayout.xmlからレイアウトファイルにコピーします。
  3. Values /colors.xmlおよびvalues/dimensから独自のファイルに値をコピーします。
  4. 次のコードでスイッチを初期化します
SekizbitSwitch mySwitch = new SekizbitSwitch(findViewById(R.id.sekizbit_switch));
            mySwitch.setOnChangeListener(new SekizbitSwitch.OnSelectedChangeListener() {
                @Override
                public void OnSelectedChange(SekizbitSwitch sender) {
                    if(sender.getCheckedIndex() ==0 )
                    {
                                        System.out.println("Left Button Selected");
                    }
                    else if(sender.getCheckedIndex() ==1 )
                    {
                        System.out.println("Right Button Selected");
                    }
                }
            });
1
Eren Demir