開關按鈕Switch

2021-07-25 15:37:05 字數 3375 閱讀 5478

思路:

自定義view,重寫和封裝好方法,外部直接呼叫

三個構造方法

onmeasure -> onlayout -> ondraw 重寫這些方法, 實現自定義控制項(測量、在這個方法裡指定自己的寬高;布局、擺放;繪製內容)

觸控事件ontouchevent(motionevent event)

封裝自定義方法

狀態更新監聽,內部介面onswitchstateupdatelistener,對外提供按鈕狀態資料,並定義方法方便外部呼叫setonswitchstateupdatelistener

自定義屬性,更方便書寫

activity

package com.maker_huige.activity;

import android.os.bundle;

import android.widget.toast;

import com.maker_huige.ui.toggleview;

/** * created by maker_huige on 2016/12/26.

*/public

class

toggleactivity

extends

activity

});}

private

void

initui()

}

自定義view

package com.maker_huige.ui;

import android.content.context;

import android.graphics.bitmap;

import android.graphics.bitmapfactory;

import android.graphics.canvas;

import android.graphics.paint;

import android.util.attributeset;

import android.view.motionevent;

import android.view.view;

/** * created by maker_huige on 2016/12/26.

*/public

class

toggleview

extends

view

public

toggleview(context context, attributeset attrs)

public

toggleview(context context, attributeset attrs, int defstyleattr)

private

void

init(attributeset attrs)

/*** 自定義元件的三個方法,執行onresum後執行

* onmeasure測量

* onlayout布局

* ondrow繪圖

* view需要兩個

* viewgrowp需要三個

*/@override

protected

void

onmeasure(int widthmeasurespec, int heightmeasurespec)

@override

protected

void

ondraw(canvas canvas) else

canvas.drawbitmap(bitmap_slide_button,newleft,0,paint);

}else else}}

@override

public

boolean

ontouchevent(motionevent event)

mswitchstate = state;

break;

}invalidate();

return

true;

}// 宣告介面物件

public

inte***ce

onswitchstateupdatelistener

// 新增設定介面物件的方法,外部進行呼叫

public

void

setonswitchstateupdatelistener(onswitchstateupdatelistener onswitchstateupdatelistener)

//自定義方法,通過bitmapfactory用id獲取到bitmap物件

public

void

setswitchbackgroundresource(int switch_background)

public

void

setslidebuttonresource(int slide_button)

}

activity_toggle.xml

<?xml version="1.0" encoding="utf-8"?>

xmlns:itheima=""

xmlns:android=""

android:layout_width="match_parent"

android:layout_height="match_parent">

itheima:switch_background="@mipmap/switch_background"

itheima:slide_button="@mipmap/slide_button"

itheima:switch_state="true"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerinparent="true"

android:id="@+id/toggleview"

/>

relativelayout>

attrs.xml自定義屬性

<?xml version="1.0" encoding="utf-8"?>

name="toggleview">

name="switch_background"

format="reference"/>

name="slide_button"

format="reference"/>

name="switch_state"

format="boolean"/>

declare-styleable>

resources>

重構 開關Switch

收穫 當給根類設定transition ns時,當根類的屬性變化都會產生過渡態,即當再新增乙個類,這個類出現 消失會出現兩種過渡態 動畫 按鈕移動 軌道顏色漸變 引數 static proptypes 效果圖 使用 import react,from react import switch from...

switch開關的製作

html css 效果圖 擴充套件 a b表示a之後出現的所有b,且a b有相同的父元素。transition all 0.3s ease 過渡。transition property all 屬性 transition duration 多長時間完成該動畫。transition timing fu...

JQuery實現switch開關

實現效果為如下的選擇開關 首先在布局上,可以清晰看到最外層乙個div包裹,內部兩個div組成,然後兩個div內部分別包裹了span用於顯示開關上的文字,html 如下 日同比周同比 對於該樣式的布局實現css如下 switch container switch btn left btn right ...