web-dev-qa-db-ja.com

iPhoneスタイルのトグルボタン

In Android Toggle buttonsは以下のようになります-

Android

これを以下のようにIphoneスタイルとして変更できますか？

Iphone

また、ドラッグしてトグルする機能など、トグルボタンのiPhone機能を含めることはできますか？.

このアクションを完了する方法は？前もって感謝します。

androidtogglebutton
17
Praveenkumar

このリンクの詳細： http://www.mokasocial.com/2011/07/sexily-styled-toggle-buttons-for-Android/

<ToggleButton 
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/toggle_me"/>

ドローアブルは次のようになります。

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_checked="true"
        Android:drawable="@drawable/toggle_me_on" /> <!-- checked -->
    <item Android:drawable="@drawable/toggle_me_off" /> <!-- default/unchecked -->
</selector>
22
Waza_Be

図形（画像を使用せずに）を使用する場合は、これを試してください。現在、カスタムチェックボックスで使用しています enter image description hereenter image description here

<com.myapp.views.MyCheckBox xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:id="@Android:id/checkbox"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginRight="5dp"
        Android:button="@null"
        Android:checked="false"
        Android:clickable="false"
        Android:drawableRight="@drawable/checkbox_selector"
        Android:focusable="false"
        Android:textColor="@color/orange" />

チェックボックス_selector.xml

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

    <item Android:state_checked="false"
        Android:drawable="@drawable/toggle_button_off" /> <!-- pressed -->
    <item Android:state_checked="true"
        Android:drawable="@drawable/toggle_button_on" /> <!-- focused -->
    <!-- default -->
    <item
        Android:drawable="@drawable/toggle_button_off" />
</selector>

token_button_off.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/toggle_background_off"></item>
    <item


        Android:drawable="@drawable/white_toggle_icon"
        Android:left="2dp"
        Android:right="27.5dp"
        Android:bottom="1.5dp"
        Android:top="1.5dp"></item>
</layer-list>

token_button_on.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/toggle_background_on"></item>

    <item


        Android:drawable="@drawable/white_toggle_icon"
        Android:right="2dp"
        Android:left="27.5dp"
        Android:bottom="1.5dp"
        Android:top="1.5dp"></item>
</layer-list>

token_background_off.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">


    <size Android:height="32dp" Android:width="60dp"/>
    <solid Android:width="1dp" Android:color="#919090"/>

    <corners Android:radius="18dp" />

</shape>

トグル_background_on.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">


    <size Android:height="32dp" Android:width="60dp"/>
    <solid Android:width="1dp" Android:color="@color/orange"/>

    <corners Android:radius="18dp" />
</shape>

white_toggle_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval">
 <solid Android:color="#ffffff"/>
   <stroke Android:width="2dp" Android:color="#fff" />
   <size Android:width="25dp" Android:height="25dp"/>
</shape>
13
playmaker420

SwitchCompatを使用します：

<!-- SwitchCompat -->
    <androidx.appcompat.widget.SwitchCompat
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:checked="true"
                Android:thumb="@drawable/thumb_selector"
                app:track="@drawable/track_selector"/>


 <!-- thumb_selector.xml -->
      <?xml version="1.0" encoding="utf-8"?>
            <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
                <item Android:state_checked="false">
                    <shape Android:shape="oval">
                        <solid Android:color="@Android:color/white" />
                        <size Android:width="20dp" Android:height="20dp" />
                        <stroke Android:width="2dp" Android:color="#0000ffff" />
                    </shape> <!-- shape circle -->
                </item>
            </selector>

 <!-- track_selector.x -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item Android:state_checked="true">
        <shape Android:shape="rectangle">
            <size Android:width="36dp" Android:height="20dp"/>
            <solid Android:width="1dp" Android:color="@Android:color/holo_orange_dark"/>
            <corners Android:radius="50dp"/>
        </shape>
    </item>

    <item Android:state_checked="false">
        <shape Android:shape="rectangle">
            <size Android:width="36dp" Android:height="20dp"/>
            <solid Android:width="1dp" Android:color="@Android:color/darker_gray"/>
            <corners Android:radius="50dp"/>
        </shape>  
    </item>

</selector>

toggle button screenshot

7
Thắng

Android-Switch-Demo の例から以下のコードを使用します。希望の出力が得られます。

public MySwitch(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
    Resources res = getResources();
    mTextPaint.density = res.getDisplayMetrics().density;
    mTextPaint.setShadowLayer(0.5f, 1.0f, 1.0f, Color.BLACK);

    TypedArray a = context.obtainStyledAttributes(attrs,
            R.styleable.MySwitch, defStyle, 0);

    mThumbDrawable = a.getDrawable(R.styleable.MySwitch_thumb);
    mTrackDrawable = a.getDrawable(R.styleable.MySwitch_track);
    mTextOn = a.getText(R.styleable.MySwitch_textOn);
    mTextOff = a.getText(R.styleable.MySwitch_textOff);
    mTextOutsideTrack = a.getBoolean(R.styleable.MySwitch_textOutsideTrack, false);
    mTextOnThumb = a.getBoolean(R.styleable.MySwitch_textOnThumb, false);
    mThumbTextPadding = a.getDimensionPixelSize( R.styleable.MySwitch_thumbTextPadding, 0);
    mTrackTextPadding = a.getDimensionPixelSize( R.styleable.MySwitch_trackTextPadding, 0);
    mSwitchMinWidth = a.getDimensionPixelSize( R.styleable.MySwitch_switchMinWidth, 0);
    mSwitchMinHeight = a.getDimensionPixelSize( R.styleable.MySwitch_switchMinHeight, 0);
    mSwitchPadding =  a.getDimensionPixelSize( R.styleable.MySwitch_switchPadding, 0);

    mTrackDrawable.getPadding(mTrackPaddingRect) ;
    //Log.d(TAG, "mTrackPaddingRect=" + mTrackPaddingRect);
    mThumbDrawable.getPadding(mThumbPaddingRect);
    //Log.d(TAG, "mThumbPaddingRect=" + mTrackPaddingRect);


    int appearance = a.getResourceId(R.styleable.MySwitch_switchTextAppearanceAttrib, 0);
    if (appearance != 0) {
        setSwitchTextAppearance(context, appearance);
    }
    a.recycle();

    ViewConfiguration config = ViewConfiguration.get(context);
    mTouchSlop = config.getScaledTouchSlop();
    mMinFlingVelocity = config.getScaledMinimumFlingVelocity();

    // Refresh display with current params
    refreshDrawableState();
    setChecked(isChecked());
    this.setClickable(true);
    //this.setOnClickListener(clickListener);
}

アプリケーションのスクリーンショット-

image

6
Praveenkumar

オフボタンとオンボタンのすべての画像を取り、このような相対的なレイアウトでレイアウトを作成します

            <RelativeLayout
                Android:id="@+id/setting1"
                Android:layout_width="90dp"
                Android:layout_height="wrap_content"
                Android:layout_alignParentRight="true"
                Android:layout_alignParentTop="true"
                Android:background="@drawable/switchon"
                Android:clickable="true"
                Android:onClick="setting1Click" >

                <ImageView
                    Android:id="@+id/settingicon"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_alignParentRight="true"
                    Android:src="@drawable/switchball" />

                <TextView
                    Android:id="@+id/calsettingtxt"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_centerVertical="true"
                    Android:layout_marginRight="10dp"
                    Android:layout_toLeftOf="@+id/settingicon"
                    Android:text="@string/settingon"
                    Android:textColor="@color/black"
                    Android:textSize="18sp"
                    Android:textStyle="bold" />
            </RelativeLayout>

次に、コードでオンが押されたときにバックグラウンドリソースをオフにします

0
harish

Androidには独自のビューがありますSwitch、次のように使用できます

 <Switch
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />
0
Devinder Singh