Material Design學習之 CheckBox（詳細分析，富有表現力）
老規矩，兩部分，第一部分理論知識，第二部分程式碼
選擇控制器
選擇控制器允許使用者選擇選項。有三種類型：複選框、單選框以及開/關切換。選擇控制器使用主題同樣的顏色。（待會的程式碼主要講的是單選按鈕）
複選框
單選按鈕
切換開關
官方對呈現的樣式，顏色，透明度等都有嚴格的要求和定義，如下：
分為2個主題，1為白色主題，2為黑色主題
白色
開: Swatch 500, 透明度 100%
關: #000000, 透明度 54%
失效: #000000, 透明度 26%
黑色
開: Swatch 500, 透明度 100%
關: #FFFFFF, 透明度 70%
失效: #FFFFFF, 透明度 30%
這裡補充下，你所有的點選操作都希望帶有一定的外部反應（也就是之前一直有的，手指觸控反饋，就是那個圈圈）
像這樣：
這一部分的理論知識沒有之前那麼多，因為之前的一系列理論知識都是統一的，每個控制元件都有大體的設計方向，只是實現不同而已，我們來看下實現效果：
包結構：
部分功能寄存於我們之前的CustomView這個類，不理解的可以翻開之前的解釋看下，很詳細。
主要實現類就是CheckBox這個類，我們來讀程式碼！！
public class CheckBox extends CustomView26行，繼承於我們之前的CustomView，是個RelativeLayout。
int backgroundColor = Color.parseColor("#4CAF50");
Check checkView;
boolean press = false;
boolean check = false;
OnCheckListener onCheckListener;
public CheckBox(Context context, AttributeSet attrs) {
super(context, attrs);
setAttributes(attrs);
}28-40行，宣告一些變數包括背景色，以及建構函式初始化View
// Set atributtes of XML to View
@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
protected void setAttributes(AttributeSet attrs) {
setBackgroundResource(R.drawable.background_checkbox);
// Set size of view
setMinimumHeight(Utils.dpToPx(48, getResources()));
setMinimumWidth(Utils.dpToPx(48, getResources()));
// Set background Color
// Color by resource
int bacgroundColor = attrs.getAttributeResourceValue(ANDROIDXML,
"background", -1);
if (bacgroundColor != -1) {
setBackgroundColor(getResources().getColor(bacgroundColor));
} else {
// Color by hexadecimal
// Color by hexadecimal
int background = attrs.getAttributeIntValue(ANDROIDXML, "background", -1);
if (background != -1)
setBackgroundColor(background);
}
final boolean check = attrs.getAttributeBooleanValue(MATERIALDESIGNXML,
"check", false);
post(new Runnable() {
@Override
public void run() {
setChecked(check);
setPressed(false);
changeBackgroundColor(getResources().getColor(
android.R.color.transparent));
}
});
checkView = new Check(getContext());
checkView.setId(View.generateViewId());
RelativeLayout.LayoutParams params = new LayoutParams(Utils.dpToPx(20,
getResources()), Utils.dpToPx(20, getResources()));
params.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
checkView.setLayoutParams(params);
addView(checkView);
// Adding text view to checkbox
int textResource = attrs.getAttributeResourceValue(ANDROIDXML, "text", -1);
String text = null;
if(textResource != -1) {
text = getResources().getString(textResource);
} else {
text = attrs.getAttributeValue(ANDROIDXML, "text");
}
if(text != null) {
params.removeRule(RelativeLayout.CENTER_IN_PARENT);
params.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);
TextView textView = new TextView(getContext());
RelativeLayout.LayoutParams textViewLayoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
textViewLayoutParams.addRule(RelativeLayout.RIGHT_OF, checkView.getId());
textViewLayoutParams.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);
textViewLayoutParams.setMargins(10, 0, 0, 0);
textView.setLayoutParams(textViewLayoutParams);
textView.setText(text);
addView(textView);
}
}42-111行，初始化尺寸，背景色，是否被選，如果有文字內容，就在checkbox右側加文字，並設定一些位置引數什麼的。
How to use?
<sample.wjj.materialdesigncheckbox.views.CheckBox
android:layout_below="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/checkBox1"
android:background="#1E88E5"
materialdesign:check="true"
android:text="123">
使用 android:text=”內容” 即可
@Override
public void invalidate() {
checkView.invalidate();
super.invalidate();
}113-117重新整理view
@Override
public boolean onTouchEvent(MotionEvent event) {
invalidate();
if (isEnabled()) {
isLastTouch = true;
if (event.getAction() == MotionEvent.ACTION_DOWN) {
changeBackgroundColor((check) ? makePressColor() : Color
.parseColor("#446D6D6D"));
} else if (event.getAction() == MotionEvent.ACTION_UP) {
changeBackgroundColor(getResources().getColor(
android.R.color.transparent));
press = false;
if ((event.getX() <= getWidth() && event.getX() >= 0)
&& (event.getY() <= getHeight() && event.getY() >= 0)) {
isLastTouch = false;
check = !check;
if (onCheckListener != null)
onCheckListener.onCheck(CheckBox.this, check);
if (check) {
step = 0;
}
if (check)
checkView.changeBackground();
}
}
}
return true;
}120-147行，如果可用並且在合理的範圍內進行手勢操作，會觸發監聽事件，反之，只會有一個圓圈覆蓋在控制元件上，連background的變化也不會有，當然變幻動畫也不會有了。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (press) {
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor((check) ? makePressColor() : Color
.parseColor("#446D6D6D"));
canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2,
paint);
invalidate();
}
}150-161行，繪製手勢圓的操作，之前的例子裡也有類似內容。
private void changeBackgroundColor(int color) {
LayerDrawable layer = (LayerDrawable) getBackground();
GradientDrawable shape = (GradientDrawable) layer
.findDrawableByLayerId(R.id.shape_bacground);
shape.setColor(color);
}163-168 修改背景色等的操作，素材來源於Drawable
protected int makePressColor() {
int r = (this.backgroundColor >> 16) & 0xFF;
int g = (this.backgroundColor >> 8) & 0xFF;
int b = (this.backgroundColor >> 0) & 0xFF;
r = (r - 30 < 0) ? 0 : r - 30;
g = (g - 30 < 0) ? 0 : g - 30;
b = (b - 30 < 0) ? 0 : b - 30;
return Color.argb(70, r, g, b);
}175-183,顏色變化操作，用於上面的onDraw呼叫
@Override
public void setBackgroundColor(int color) {
backgroundColor = color;
if (isEnabled())
beforeBackground = backgroundColor;
changeBackgroundColor(color);
}
public void setChecked(boolean check) {
invalidate();
this.check = check;
setPressed(false);
changeBackgroundColor(getResources().getColor(
android.R.color.transparent));
if (check) {
step = 0;
}
if (check)
checkView.changeBackground();
}185-205行，一些設定操作，主要是UI層面的變化。
class Check extends View {
Bitmap sprite;
public Check(Context context) {
super(context);
setBackgroundResource(R.drawable.background_checkbox_uncheck);
sprite = BitmapFactory.decodeResource(context.getResources(),
R.drawable.sprite_check);
}
public void changeBackground() {
if (check) {
setBackgroundResource(R.drawable.background_checkbox_check);
LayerDrawable layer = (LayerDrawable) getBackground();
GradientDrawable shape = (GradientDrawable) layer
.findDrawableByLayerId(R.id.shape_bacground);
shape.setColor(backgroundColor);
} else {
setBackgroundResource(R.drawable.background_checkbox_uncheck);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (check) {
if (step < 11){
step++;
invalidate();
}
} else {
if (step >= 0){
step--;
invalidate();
}
if (step == -1){
invalidate();
changeBackground();
}
}
Rect src = new Rect(40 * step, 0, (40 * step) + 40, 40);
Rect dst = new Rect(0, 0, this.getWidth() - 2, this.getHeight());
canvas.drawBitmap(sprite, src, dst, null);
}
}215-263，主要的“勾” 這個影象和動畫實現的方法。
219-224，初始化我們 “勾”的控制元件，並獲取他的bitmap。
226-236, 修改控制元件 UI的操作，根據是否被選來判斷。
238-261具體繪圖的操作，用不斷的重新整理UI來操作點陣圖，實現動畫，邏輯跟之前的漣漪整個Button的方法類似。
再之後就是一系列的set的操作了 這邊不做解釋。
整體實現不算複雜。首先先是繪製我們的底層框框，然後根據是否點選來判斷修改背景色，繪製 “勾”的動畫過程，使用者無論有沒有合理操作都繪製觸控範圍的顯示，達到“正在互動”的效果。
相關推薦
Material Design學習之 CheckBox（詳細分析，富有表現力）
老規矩，兩部分，第一部分理論知識，第二部分程式碼 選擇控制器 選擇控制器允許使用者選擇選項。有三種類型：複選框、單選框以及開/關切換。選擇控制器使用主題同樣的顏色。（待會的程式碼主要講的是單選按鈕） 複選框 單選按鈕 切換
Material Design學習之 Snackbars（詳細分析，Toast的加強版）
這幾篇關於Material Design文章的程式碼幾乎都是Git上摘錄的，我做的事主要是分享給大家+解釋分析。 昨天有小夥伴看完後希望我像以前一樣把按鈕那一部分的程式碼單獨提取出來單獨打成一個包，想單獨使用或者學習而不是去扣原始碼看（懶人打屁股），那
Material Design學習之 Switch（詳細解釋）
今天講的是Switch，本來有考慮把它和CheckBox一起做了，但是畢竟實現不同，還是分開做吧，廢話不多，開始正題 開關 On/off 開關切換單一設定選擇的狀態。開關控制的選項以及它的狀態，應該明確的展示出來並且與內部的標籤相一致。開關應該單
Material Design學習之 ProgreesBar
public ani bit -c cell 空間 fin pen port 轉載奇怪註明出處：王亟亟的大牛之路 繼續我們Material Design的內容，這一篇講的是進度條,上一篇是Switch地址例如以下：http://blog.csdn.ne
Material Design學習之 Dialog(順便把前兩天AppBarLayout沒講的部分提一提)
繼續之前的MD系列的內容，今天說Dialog,不知道還能翻幾篇，反正這一系列都說完了話就找點別的內容整整。 Dialogs (提示框)用於提示使用者作一些決定，或者是完成某個任務時需要的一些其它額外的資訊。 Dialog可以是用一種 取消/確定 的簡
Material Design學習之 Camera
介紹程式碼之前先貼下效果圖 如何使用 先是新增依賴讓maven去下程式碼 maven部分 repositories { jcenter() maven { url "https://dl.bintray.c
Material Design學習之 EditText (功能強大，優於系統自帶，感謝“扔物線”)
繼續之前的Material Design歷程，今天是EditText,素材來源於http://www.rengwuxian.com/post/materialedittext（那麼程式碼解釋部分大家可以看原作者的文件，我在這裡把理論知識灌輸下就OK了，作者做
Android Material Design學習之三TabLayout
TabLayout繼承自HorizontalScrollView，它提供了一個水平方向的佈局來顯示tabs（標籤） 還是先來看看官方API吧 每一個標籤都是一個TabLayout.Tab的例項物件，你可以通過newTab（）方法來建立tabs，你可以通過setText(i
Android Material Design學習之五CollapsingToolbarLayout
來看看這個神奇的控制元件CollapsingToolbarLayout。先上效果圖 再來看看官方的API文件是怎麼描述這個控制元件的。 CollapsingToolbarLayout是一個Toolbar的包裝器，實現了一個可以進行摺疊的app導航欄。它被設計成了App
運維學習之ISCSI（小型計算機系統接口）服務
linuxiSCSI一、iscsi簡介iSCSI技術是一種由IBM公司研究開發的，是一個供硬件設備使用的可以在IP協議的上層運行的SCSI指令集，這種指令集合可以實現在IP網絡上運行SCSI協議，使其能夠在諸如高速千兆以太網上進行路由選擇。iSCSI技術是一種新儲存技術，該技術是將現有SCSI接口與以太網絡(
我的python中級班學習之路（全程筆記第一模塊） （第二章）（第2部分）
一個 文件操作 模塊 生成 字符串 講解 mar style 定義 第二章 數據類型 字符編碼 文件操作 第二部分 第三節 ：數據類型—字符串講解 一、定義： 字符串是一個有序的字符的字符
EasyUI學習之Combobox（級聯下拉列表）（二）
1. html程式碼 <fieldset> <legend>資訊查詢</legend> <div style="white-space: nowrap; padding: 5px;">
linux核心記憶體管理學習之二（實體記憶體管理--夥伴系統）
linux使用夥伴系統來管理實體記憶體頁。 一、夥伴系統原理 1. 夥伴關係 定義：由一個母實體分成的兩個各方面屬性一致的兩個子實體，這兩個子實體就處於夥伴關係。在作業系統分配記憶體的過程中，一個記憶體塊常常被分成兩個大小相等的記憶體塊，這兩個大小相等的記憶體塊就處於夥伴關
Linux運維人員成長之路學習書籍推薦（未完整，有待補充）
在此前的公開課中，有期望從事Linux運維的童鞋希望推薦一些學習書籍，在此先羅列一些我們在成長之路上曾經讀到過並覺得不錯的書籍，推薦給有需要者。 入門書： 《鳥哥的私房菜（基礎篇）》 《鳥哥的私房菜（服務篇）》 《Linux命令列與Shell指令碼程式設計大全（第2版）》 《UNIX/Li
Linux學習之七（chown、chgrp、chmod）
一、chown:改變檔案屬主（只有管理員可以使用此命令） 1、chown [option] USERNAME file,..... 例：修改普通檔案屬主 [[email protected] ~]# chown h
Html學習之十三（導航欄的制作）
inf src tex color hide rect 新聞 left als <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
揭祕阿里Java架構師背後的技術體系支撐（詳細分層，建議收藏）
前言 系統架構師是一個既需要掌控整體又需要洞悉區域性瓶頸並依據具體的業務場景給出解決方案的團隊領導型人物。一個架構師得需要足夠的想像力,能把各種目標需求進行不同維度的擴充套件，為目標客戶提供更為全面的需求清單。 從一個程式設計師到架構師是一個很大的變化，架構師需要從大的方面考慮，而不只是考慮
Python入門學習筆記————08（list函式，元組）
#傳值與傳地址的區別 #對於簡單的數值，採用傳值的操作，即在函式內的操作不影響外面的變數 #對複雜的變數，採用傳遞地址的操作，此時進行的操作即是對函式本身的操作 def a(n): n[2]=300 print(n) return None
各大機器學習包彙總（python版，持續更新）
隨著機器學習的逐日升溫，各種相關開源包也是層出不群，面對如此多種類的工具包，該如何選擇，有的甚至還知之甚少或者不知呢，本文簡單彙總了一下當下使用比較多的Python版本機器學習工具包，供大家參看，還很不全不詳盡，會持續更新，也歡迎大家補充，多謝多謝！~~~ scik
【matlab】雷達成像系列 之 RM（Range Migration，距離遷徙）成像演算法
本章內容 重點 •SAR成像幾何關係；SAR回波模型；SAR成像模型； •RD成像演算法；SAR成像質量； •距離徙動；距離校正； •實時成像；回波模擬； 要求 •掌握SAR回波