自定義的view
- LetterIndex.java extends View
- ContactsListView.java extends RecyclerView
分析
- 聯(lián)系人列表有兩個要點
- 字母導(dǎo)航欄
通過自定義View畫出26個字母烂完，設(shè)置滑動監(jiān)聽事件，根據(jù)上下滑動的距離判斷當(dāng)前選中的字母缘眶，并相應(yīng)更新界面卿堂。 - 列表中的字母標(biāo)題
針對item中的聯(lián)系人姓名首字母對應(yīng)的tag作比較滩字，若與前一個相同則不顯示title，否則顯示御吞。
- 字母導(dǎo)航欄
- 事件聯(lián)動
- 當(dāng)滑動字母導(dǎo)航欄時，除了處理本身的變化外漓藕，還要留出接口陶珠，以便其他控件獲取當(dāng)前選中的字母。
- 聯(lián)系人列表滑動時享钞，除了處理本身變化外揍诽，同樣要留出接口以便獲取當(dāng)前置頂?shù)膇tem對應(yīng)的字母
- 字母導(dǎo)航欄要留出方法，以便其他控件指定選中的字母栗竖，并更新界面
具體代碼
ContactsListView.java
重寫該類主要是為了實現(xiàn)ItemDecoration根據(jù)不同的item變化暑脆，同時可以從xml布局文件中獲取ItemDecoration的自定義屬性。
主要代碼：
public ContactsListView(Context context) {
this(context, null, 0);
}
public ContactsListView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public ContactsListView(Context context, @Nullable AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mTypeArray = context.obtainStyledAttributes(attrs, R.styleable.MyRecyclerDecoration);
mContext = context;
}
故而在其內(nèi)部自定義了一個繼承自ItemDecoratio得靜態(tài)內(nèi)部類Decorationn類：
public Decoration(List<String> data){
//獲取要顯示的聯(lián)系人數(shù)據(jù)對應(yīng)的英文tag集合
//初始化各種自定義屬性
//例如顏色：mColorLetterText = mTypeArray.getColor(R.styleable.MyRecyclerDecoration_color_letter_text, 0xff152648);
}
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state){
//畫出各個導(dǎo)航title
}
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
//畫出置頂?shù)膶?dǎo)航title
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State
state) {
//判斷是否畫出導(dǎo)航title
super.getItemOffsets(outRect, view, parent, state);
int position = ((RecyclerView.LayoutParams) (view.getLayoutParams())).getViewAdapterPosition();
if (position != -1) {
String text = mDatas.get(position).substring(0, 1).toUpperCase();
if (position == 0) {
outRect.set(0, mTitleHeight, 0, 0);
} else if (text != null && !text.equals(mDatas.get(position - 1).substring(0, 1).toUpperCase())) {
outRect.set(0, mTitleHeight, 0, 0);
} else {
outRect.set(0, 0, 0, 0);
}
}
}
private void drawText(Canvas canvas, float left, float right, View child, String text) {
//畫出文字
}
LetterIndex.java
該類用來畫出字母導(dǎo)航欄狐肢，并且提供方法獲取/設(shè)置當(dāng)前選中的字母
public interface onIndexClickListener {
void onIndexClick(int chooseId);
void onActionUp();
}
public void setOnIndexClickListener(onIndexClickListener listener) {
this.mClickListener = listener;
}
public void setChooseId(int chooseId) {
if (chooseId >= 0 && chooseId < mIndexTexts.length) {
mChooseId = chooseId;
invalidate();
}
}
然后重寫onTouchEvent(MotionEvent event)方法添吗，在ACTION_DOWN、ACTION_MOVE份名、ACTION_UP時調(diào)用對應(yīng)的方法即可碟联。
重寫onDraw()方法，畫出對應(yīng)的界面
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int height = getHeight() - getPaddingTop() - getPaddingBottom();
float width = getWidth();
//childHeight 是每一個字母所在單元的高度
float childHeight = (float) height / mIndexTexts.length;
//如果被點擊了僵腺，就畫出背景
if (isClick) {
mPaint.setColor(mColorIndexBg);
canvas.drawRect(0, 0, width, height, mPaint);
}
Rect bounds = new Rect();
mPaint.setTextSize(mSizeText);
mPaint.setTextAlign(Paint.Align.CENTER);
for (int i = 0; i < mIndexTexts.length; i++) {
String text = mIndexTexts[i];
mPaint.setColor(mColorText);
//在被選中的字后面畫一個圓鲤孵，并改變字的顏色
if (i == mChooseId) {
mPaint.setColor(mColorChooseTextBg);
canvas.drawCircle(width / 2, childHeight / 2 + i * childHeight,
mSizeText / 2 + 2, mPaint);
mPaint.setColor(mColorChooseText);
}
mPaint.getTextBounds(text, 0, text.length(), bounds);
//bounds里面保存著要畫的字的一些屬性，如x辰如，y普监，centerX，centerY等琉兜，
//要注意 canvas.drawText（text,x,y,mpaint）中y并不是text的最低端凯正，而是baseline。
float x = width / 2;
float y = -bounds.centerY() + childHeight / 2 + i * childHeight;
canvas.drawText(text, x, y, mPaint);
}
}
源碼
源代碼在我的Github呕童，點這里可以找到漆际。
預(yù)覽如下
預(yù)覽.gif
