思路:
自定義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 ...