AndroidCustomViews

摘要： AndroidCustomViews 方便安卓開發者使用的自定義控制元件庫 加入Gradle依賴 implementation 'com.ayvytr:custom-views:0.2.0' 或者 compile 'com.ayvytr:cu...

AndroidCustomViews

方便安卓開發者使用的自定義控制元件庫

加入Gradle依賴

implementation 'com.ayvytr:custom-views:0.2.0'
或者
compile 'com.ayvytr:custom-views:0.2.0'

自定義控制元件列表

1. NumberPickerView 數字選擇控制元件，支援多行和多種選項的數字選擇控制元件
2. QuickIndexView 通訊錄右側字母索引控制元件
3. SuperEditText 可以一鍵清空，點選圖示顯示/隱藏密碼的EditText
4. SingleTextView 單行，居中，文字超出一行尾部省略的TextView
5. ClearableEditText <font color=red>0.2.0新加入 </font> 一鍵清空文字的EditText，直接繼承AppCompatEditText
6. PasswordEditText <font color=red>0.2.0新加入 </font> 點選或觸控顯示/隱藏密碼的EditText，直接繼承AppCompatEditText

截圖（請看ofollow,noindex">GitHub ，圖片老是上傳失敗）

使用和說明

NumberPickerView

NumberPickerView 是一款與android原生NumberPicker 具有類似介面以及類似功能的View 。

主要功能同樣是從多個候選項中通過上下滾動的方式選擇需要的選項，但是與NumberPicker 相比較，有幾個主要不同點，下面是兩者的不同之處。

原始控制元件特性-NumberPicker

setWrapSelectorWheel()

自定義控制元件特性-NumberPickerView

1. 顯示視窗可以顯示多個備選選項；
2. fling時滑動速度較快，且可以設定摩擦力，如下程式碼使得摩擦力為預設狀態的2倍
   mNumberPickerView.setFriction(2 * ViewConfiguration.get(mContext).getScrollFriction());
3. 在選中與非選中的狀態滑動時，具有漸變的動畫效果，包括文字放大縮小以及顏色的漸變；
4. 在批量改變選項中的內容時，可以選擇是否採用友好的滑動效果；
5. 可以動態的設定是否wrap，即，是否迴圈滾動；
6. 選中位置可以新增文字說明，可控制文字字型大小顏色等；
7. 具有在程式碼中動態的滑動到某一位置的功能；
8. 支援wrap_content ，支援item的padding
9. 提供多種屬性，優化UI效果
10. 在滑動過程中不響應onValueChanged()
11. 點選上下單元格，可以自動滑動到對應的點選物件。
12. 可通過屬性設定onValueChanged 等回撥介面的執行執行緒。
13. 相容NumberPicker的重要方法和介面

相容的方法有：

setOnValueChangedListener()
setOnScrollListener()
setDisplayedValues()/getDisplayedValues()
setWrapSelectorWheel()/getWrapSelectorWheel()
setMinValue()/getMinValue()
setMaxValue()/getMaxValue()
setValue()/getValue()

相容的內部介面有：
OnValueChangeListener
OnScrollListener

新增的介面有：
OnValueChangeListenerInScrolling//滑動過程中響應value change

NumberPickerView使用方法

1. 通過佈局宣告NumberPickerView

<cn.carbswang.android.numberpickerview.library.NumberPickerView
android:id="@+id/picker"
android:layout_width="wrap_content"
android:layout_height="240dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:background="#11333333"
android:contentDescription="test_number_picker_view"
app:npv_ItemPaddingHorizontal="5dp"
app:npv_ItemPaddingVertical="5dp"
app:npv_ShowCount="5"
app:npv_RespondChangeOnDetached="false"
app:npv_TextSizeNormal="16sp"
app:npv_TextSizeSelected="20sp"
app:npv_WrapSelectorWheel="true"/>

3. Java程式碼中使用：

   1)若設定的資料(String[] mDisplayedValues)不會再次改變，可以使用如下方式進行設定：（與NumberPicker的設定方式一致）

picker.setMinValue(minValue);
picker.setMaxValue(maxValue);
picker.setValue(value);

2)若設定的資料(String[] mDisplayedValues)會改變，可以使用如下組合方式進行設定：（與NumberPicker的更改資料方式一致）

int minValue = getMinValue();
int oldMaxValue = getMaxValue();
int oldSpan = oldMaxValue - minValue + 1;
int newMaxValue = display.length - 1;
int newSpan = newMaxValue - minValue + 1;
if (newSpan > oldSpan) {
setDisplayedValues(display);
setMaxValue(newMaxValue);
} else {
setMaxValue(newMaxValue);
setDisplayedValues(display);
}

或者直接使用NumberPickerView提供的方法：

refreshByNewDisplayedValues (String[] display)

使用此方法時需要注意保證資料改變前後的minValue值不變，以及設定的display不能夠為null，且長度不能夠為0。

3)添加了滑動過程中響應value change的函式

picker.setOnValueChangeListenerInScrolling(...);

4.另外，NumberPickerView提供了平滑滾動的方法：

public void smoothScrollToValue(int fromValue, int toValue, boolean needRespond)

此方法與setValue(int) 方法相同之處是可以動態設定當前顯示的item，不同之處在於此方法可以使NumberPickerView 平滑的從滾動，即從fromValue 值挑選最近路徑滾動到toValue ，第三個引數needRespond 用來標識在滑動過程中是否響應onValueChanged 回撥函式。因為多個NumberPickerView 在聯動時，很可能不同的NumberPickerView 的停止時間不同，如果在此時響應了onValueChanged 回撥，就可能再次聯動，造成資料不準確，將needRespond 置為false ，可避免在滑動中響應回撥函式。

另外，在使用此方法或者間接呼叫此方法時，需要注意最好不要在onCreate(Bundle savedInstanceState) 方法中呼叫，因為scroll動畫需要一定時間，如需確要在onCreate(Bundle savedInstanceState) 中呼叫，請使用如下方式：

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//程式碼省略
mNumberPickerView.post(new Runnable() {
@Override
public void run() {
//呼叫smoothScrollToValue()等方法的程式碼
}
});
}

5.各項自定義屬性的說明

<declare-styleable name="NumberPickerView">
<attr name="npv_ShowCount" format="reference|integer" />//顯示的條目個數，預設3個
<attr name="npv_ShowDivider" format="reference|boolean" />//是否顯示兩條divider，預設顯示
<attr name="npv_DividerColor" format="reference|color" />//兩條divider的顏色
<attr name="npv_DividerMarginLeft" format="reference|dimension" />//divider距左側的距離
<attr name="npv_DividerMarginRight" format="reference|dimension" />//divider距右側的距離
<attr name="npv_DividerHeight" format="reference|dimension" />//divider的高度
<attr name="npv_TextColorNormal" format="reference|color" />//未選中文字的顏色
<attr name="npv_TextColorSelected" format="reference|color" />//選中文字的顏色
<attr name="npv_TextColorHint" format="reference|color" />//中間偏右側說明文字的顏色
<attr name="npv_TextSizeNormal" format="reference|dimension" />//未選中文字的大小
<attr name="npv_TextSizeSelected" format="reference|dimension" />//選中文字的大小
<attr name="npv_TextSizeHint" format="reference|dimension" />//說明文字的大小
<attr name="npv_TextArray" format="reference" />//文字內容，stringarray型別
<attr name="npv_MinValue" format="reference|integer" />//最小值，同setMinValue()
<attr name="npv_MaxValue" format="reference|integer" />//最大值，同setMaxValue()
<attr name="npv_WrapSelectorWheel" format="reference|boolean" />//設定是否wrap，同setWrapSelectorWheel
<attr name="npv_HintText" format="reference|string" />//設定說明文字
<attr name="npv_EmptyItemHint" format="reference|string" />//空行的顯示文字，預設不顯示任何文字。只在WrapSelectorWheel==false是起作用
<attr name="npv_MarginStartOfHint" format="reference|dimension" />//說明文字距離左側的距離，"左側"是指文字array最寬item的右側
<attr name="npv_MarginEndOfHint" format="reference|dimension" />//說明文字距離右側的距離
<attr name="npv_ItemPaddingHorizontal" format="reference|dimension" />//item的水平padding，用於wrap_content模式
<attr name="npv_ItemPaddingVertical" format="reference|dimension" />//item的豎直padding，用於wrap_content模式
<attr name="npv_RespondChangeOnDetached" format="reference|boolean" />//在detach時如果NumberPickerView正好滑動，設定
//是否響應onValueChange回撥，用在一個Dialog/PopupWindow被顯示多次，
//且多次顯示時記錄上次滑動狀態的情況。建議Dialog/PopupWindow在顯示時每次都指定初始值，且將此屬性置為false
<attr name="npv_RespondChangeInMainThread" format="reference|boolean" />//指定`onValueChanged`響應事件在什麼執行緒中執行。
//預設為`true`，即在主執行緒中執行。如果設定為`false`則在子執行緒中執行。

//以下屬性用於在wrap_content模式下，改變內容array並且又不想讓控制元件"跳動"，那麼就可以設定所有改變的內容的最大寬度
<!--just used to measure maxWidth for wrap_content without hint,
the string array will never be displayed.
you can set this attr if you want to keep the wraped numberpickerview
width unchanged when alter the content list-->
<attr name="npv_AlternativeTextArrayWithMeasureHint" format="reference" />//可能達到的最大寬度，包括說明文字在內，最大寬度只可能比此String的寬度更大
<attr name="npv_AlternativeTextArrayWithoutMeasureHint" format="reference" />//可能達到的最大寬度，不包括說明文字在內，最大寬度只可能比此String的寬度+說明文字+說明文字marginstart +說明文字marginend 更大
<!--the max length of hint content-->
<attr name="npv_AlternativeHint" format="reference|string" />//說明文字的最大寬度
</declare-styleable>

QuickIndexView

在佈局檔案中加入QuickIndexView，並且加入自定義屬性，或者程式碼中動態建立和設定自定義屬性即可

<com.ayvytr.customview.custom.index.QuickIndexView
android:id="@+id/quickIndexView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#eee"
android:gravity="center"
android:lineSpacingExtra="@dimen/_10dp"
app:indexArray="@array/defaultQuickIndexViewLetters"/>

API文件

clearIndexList()清空字母索引.
getGravity()獲取當前 indexList Gravity
getIndexList()獲取 indexList
getLineSpacing()獲取字型上下間距值
getTextColor()獲取字型顏色 textColor
getTextSize()獲取字型大小
setGravity(int gravity)設定字母索引重心,只有 Gravity.TOP, Gravity.CENTER,Gravity.CENTER_VERTICAL有效，也就是說只有靠上對齊或者靠中間對齊有效.
setIndexArray(String[] letterArray)設定 indexList
setIndexList(List<String> indexList)設定 indexList
setLineSpacing(int lineSpacing) 設定字型上下間距值
setOnLetterChangeListener(OnLetterChangeListener onLetterChangeListener)設定字母索引變化監聽器
setTextColor(int textColor) 設定字型顏色 textColor
setTextSize(int textSize)設定字型大小，如果字型大小和原來的相同，或者字型大小小於0，設定不生效.

自定義屬性表

android:textColor字型顏色
android:textSize字型大小
android:background背景
android:gravity字母索引重心（實際效果只有靠頂部對齊或者居中有效）
android:lineSpacingExtra字母索引文字上下間距
indexArray字母索引陣列

SuperEditText

API文件

addTextChangedListener(TextWatcher watcher) 新增文字變化監聽器
getText()獲取當前文字
setClearIcon(Drawable drawable) 設定清除按鈕圖示
setClearIcon(int id)設定清除按鈕圖示
setFocusChangeListener(View.OnFocusChangeListener l)設定焦點變化監聽器
setHint(int id) 設定提示文字
setHint(String hint)設定提示文字
setKeyListener(KeyListener keyListener) 設定按鍵監聽器
setSelection(int index) 設定游標位置
setText(int id) 設定文字
setText(String text)設定文字

自定義屬性表

<declare-styleable name="SuperEditText">
<attr name="android:text"/>
<attr name="android:hint"/>
<attr name="android:inputType"/>
<attr name="android:enabled"/>
<attr name="android:background"/>
<attr name="android:digits"/>
<attr name="android:maxLength"/>
<attr name="android:textColor"/>
<attr name="android:textColorHint"/>
<attr name="textPaddingLeft" format="dimension"/>
<attr name="textPaddingRight" format="dimension"/>
<attr name="textPaddingTop" format="dimension"/>
<attr name="textPaddingBottom" format="dimension"/>
<attr name="textPadding" format="dimension"/>
<attr name="filterChinese" format="boolean"/>
<attr name="switchShowPassword" format="boolean"/>
<attr name="clearIcon" format="reference"/>
<attr name="showClearIcon" format="boolean"/>
<attr name="textBackground" format="reference"/>
</declare-styleable>

ClearableEditText

API 文件

getClearTextDrawable() 獲取清除Drawable
isShowClearDrawableNoFocus() 沒有焦點時是否顯示清除Drawable
setClearTextDrawable(Drawable clearTextDrawable) 設定清除Drawable
setClearTextDrawable(int drawableId) 設定清除Drawable
setShowClearDrawableNoFocus(boolean showClearDrawableNoFocus) 設定沒有焦點時是否顯示清除Drawable

自定義屬性表

<declare-styleable name="ClearableEditText">
<attr name="showClearDrawableNoFocus" format="boolean"/>是否在沒有焦點時顯示Drawable
</declare-styleable>

<h3 id="PasswordEditText">PasswordEditText</h3>

API 文件

getHidePasswordDrawable() 獲取隱藏密碼Drawable
getShowPasswordDrawable() 獲取顯示密碼Drawable
isPasswordInputType(int inputType) 判斷輸入型別是不是密碼.
isShowDrawableNoFocus() 獲取是否在沒有焦點時顯示Drawable.
setClickMode(boolean clickMode) 設定點選顯示/隱藏Drawable模式
setHidePasswordDrawable(Drawable hidePasswordDrawable) 設定隱藏密碼Drawable
setHidePasswordDrawable(int hidePasswordDrawableId) 設定隱藏密碼Drawable
setShowDrawableNoFocus(boolean showDrawableNoFocus) 設定是否在沒有焦點時顯示Drawable
setShowPasswordDrawable(android.graphics.drawable.Drawable showPasswordDrawable) 設定顯示密碼Drawable
setShowPasswordDrawable(int showPasswordDrawableId) 設定顯示密碼Drawable

自定義屬性表

<declare-styleable name="PasswordEditText">
<attr name="showPasswordDrawable" format="reference"/>顯示密碼Drawable
<attr name="hidePasswordDrawable" format="reference"/>隱藏密碼Drawable
<attr name="showDrawableWhenEmptyText" format="boolean"/> 當文字為空時是否顯示Drawable
<attr name="clickMode" format="boolean"/>點選模式，true：點選顯示，再次點選隱藏密碼；false:按下顯示，抬起隱藏密碼
<attr name="showDrawableNoFocus" format="boolean"/> 當沒有焦點時是否顯示Drawable
</declare-styleable>

ChangeLog

• 0.1.0

  • NumberPickerView
  • QuickIndexView
  • SuperEditText
  • SingleTextView

• 0.2.0

  • ClearableEditText
  • PasswordEditText

TODO

1. SuperEditText自定義屬性過多，需要優化和重新設計
2. 加入更多自定義View
3. 自定義TabLayout
4. 完善測試用例（歡迎熟練Espresso等測試的大神提意見或者推薦資料）

想要更多自定義控制元件請到提Issue或者Pull Request吧！

都看到這兒了，那就請點個吧！非常感謝！