Android自定義控件之仿通訊錄聯繫人

開始介紹這個控件的生成之前先來貼張圖:
這裏寫圖片描述
從圖中可以看出這個控件是一個組合控件,右邊呢是一個可觸摸滑動的View,中間呢是一個顯示右邊觸摸過程中的字和一個圓形的背景,首先先來分析一下實現思路,這裏呢可以分爲三步:第一實現右邊的A-Z的字母以及觸摸過程中對中間View的傳遞;第二步實現中間的View,圓形背景圖和可變的字母,第三步將兩個View組合起來實現觸摸的監聽。接下來就來一一的實現。
第一步:右邊的控件,
(1):定義一個A-Z的數組來顯示
(2):對每個字母的高度進行測量,其中包括上padding和下padding
(3):在View中逐一繪製出這些字母
(4):對這個View的touch事件進行判定
(5):對當前觸摸過程中選中的字母進行傳遞
1:定義數組
String[] cotents = {“A”, “B”, “C”, “D”, “E”, “F”, “G”,
“H”, “I”, “J”, “K”, “L”, “M”, “N”, “O”, “P”, “Q”, “R”,
“S”, “T”, “U”, “V”, “W”, “X”, “Y”, “Z”};
2:測量每個文本的高度
int strHeight = (int) (strPaint.descent() - strPaint.ascent());
在onMeasure方法中二次測量
case MeasureSpec.EXACTLY:
return size;
case MeasureSpec.AT_MOST:
switch (type) {
case 1:
//返回寬度的測量結果
return (int) strPaint.measureText(cotents[0]) + getPaddingLeft() + getPaddingRight();
case 2:
//返回高度的測量結果
return (strHeight * cotents.length) + getPaddingTop() + getPaddingBottom();
}
break;
3:繪製字母
canvas.drawText(cotents[i], getWidth() / 2 - strPaint.measureText(cotents[i]) / 2,(i + 1) * strHeight,strPaint);
4:對touch事件監聽
這裏寫圖片描述
5:對選中View的字母進行傳遞我使用的方式是接口回調
public interface OnTouchSlidBarListener {
void selectWord(String word, int postition);//選中那個字母
void unTouch();//未選中
}
到此側邊欄的控件也就繪製結束,接下來開始實現中間的View,從效果圖來看,這個地方是由一個背景是圓,內部是字母來顯示的View,思路呢是分別把他們“畫”出來。
第二步:中間的View
(1)定義畫筆,一個畫圓,一個畫字
(2)獲取到傳遞過來的字母再開始畫。
1:畫筆的定義
private Paint criclePaint;
private Paint txtPaint;

    criclePaint = new Paint();
    criclePaint.setColor(Color.parseColor("#39a6d9"));
    criclePaint.setAntiAlias(true);//抗鋸齒

    txtPaint = new Paint();
    txtPaint.setAntiAlias(true);
    txtPaint.setTextSize(80);

在onDraw方法中繪製
這裏寫圖片描述
第三步:組合兩個控件
(1)定義一個類繼承於FrameLayout,利用LayoutInflater轉換組合的佈局來實現這個View
(2)利用接口回調的方式將當前所獲取到的字母傳給主佈局
1:LayoutInflater.from(getContext()).inflate(R.layout.custem_broadside_labelview, this, true);參數介紹在下面
如果第二個參數不爲空,但是第三個參數爲false
表示視圖中的最外層佈局的屬性被保留
如果第二個參數不爲空,但是第三個參數爲true
表示視圖中最外層佈局的屬性被保留,並且該視圖對象直接添加到第二個參數所表示的容器對象中
2:定義接口,傳遞當前位置的字母,然後由主頁面去實現這個接口來實現相應的邏輯操作
public interface OnSelectorListener{
void selectWord(String word, int position);
}
到此整個自定義的組合的仿通訊錄聯繫人的控件就實現了,貼上我的所有實現代碼:源碼下載
謝謝

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章