2012-03-30 23 views
11

in Android il Toggle buttons sono assomigliare qui sotto -pulsante Toggle in Iphone Style

Android

Possiamo modificare questo come Iphone stile come qui sotto -

Iphone

E, possiamo includere la funzionalità iphone del pulsante di attivazione come trascinamento per attivare anche la funzionalità.

Come completare questa azione? Grazie in anticipo.

+0

vedi la mia risposta: http://www.mokasocial.com/2011/07/ sexily-styled-toggle-buttons-for-android/ –

+0

Motivo per downvote? – Praveenkumar

+0

Questo non sono io, non vorrei un downvote per una domanda del genere ma immagino sia perché non hai scritto quello che hai provato finora, aspettando solo una risposta completa, forse anche perché è stato detto nelle linee guida di Android: Non farlo imitare elementi dell'interfaccia utente da altre piattaforme http://developer.android.com/design/patterns/pure-android.html –

risposta

17

Maggiori informazioni su questo link: 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"/> 

e drawable sarà qualcosa di simile:

<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> 
+0

+1 Approccio gradevole. – Praveenkumar

+0

Ho già ottenuto questo link, quando pubblichi la mia domanda qui. Comunque, grazie per il tuo link – Praveenkumar

+0

Forse potresti considerare di accettare questa risposta se soddisfa le tue esigenze ... –

0

prendere tutte le immagini di spento e sul tasto e fare un layout nel layout relativo come questo

  <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> 

ma poi nel codice quando viene premuto sulla ke la risorsa di sfondo è disattivata

6

Utilizzo del seguente codice dall'esempio Android-Switch-Demo. Posso ottenere l'output desiderato.

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); 
} 

Schermata della Domanda -

image

+0

così accade per alcuni dispositivi che lo swtch non mostra il colore (il suo grigio per sia acceso che spento), e su alcuni dispositivi le sue dimensioni sono davvero grandi. Qualche soluzione? –

+0

@TheUnknown No non ho lavorato con quello. Lavoro con lo sviluppo di iOS. – Praveenkumar

+0

oh ok .. grazie u :) –

6

Se si vuole fare con forme (senza l'utilizzo di immagini) provare questo. Attualmente im utilizzando in una casella di controllo personalizzato enter image description here enter 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" /> 

checkbox_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> 

toggle_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> 

toggle_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> 

toggle_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> 

toggle_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> 
+0

per favore spiega come personalizzi ** com.myapp.views.MyCheckBox **? –

+0

questa è un'ottima risposta, ma il passaggio non funziona in questo modo – xanexpt

+0

Ottima risposta .. Grazie .. –