В андроиде Toggle buttons выглядят ниже -
Можем ли мы изменить это как стиль Iphone, как показано ниже -
И, можем ли мы включить функцию iphone кнопки переключения, например, перетащить и переключить функцию.
Как завершить это действие? Спасибо в Advance.
Дополнительная информация по этой ссылке: 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"/>
а drawable будет выглядеть примерно так:
<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>
Если вы хотите сделать с фигурами (без использования изображений), попробуйте это. В настоящее время я использую его в пользовательском флажке
<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>
Использование приведенного ниже кода из 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);
}
Снимок экрана приложения -
введите описание изображения здесь
Я использую 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>
возьмите все изображения кнопки "Вкл." и "Вниз" и сделайте макет в соответствующем макете,
<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>
а затем в коде, когда включено, сделайте фоновый ресурс как off
У Android есть собственный вид с именем Switch, вы можете использовать его как
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content" />