作者：泥沙磚瓦漿木匠
網站：http://blog.csdn.net/jeffli1993
個人簽名：打算起手不凡寫出鴻篇巨作的人，往往堅持不了完成第一章節。
交流QQ群：【編程之美 365234583】http://jq.qq.com/?_wv=1027&k=XVfBTo
要捐錢的就打支付寶吧：13958686678（泥瓦匠開個玩笑~）
一、前言
繼續AndroidUI系列，泥瓦匠又要開始扯淡了。哈哈今天在文章頭加了個支付寶賬號。我也真逗，至今沒收到一筆是寫博客的錢。或是分享的。泥瓦匠也就掛着逗逗樂而已。笑着就笑吧，我也在笑了。
和我的師傅扯着蛋。也教授了泥瓦匠很多東西。泥瓦匠一直在學習，一直在進步而已。這是師傅送我的話：
睡少點，玩少點，分清主次拍優先級。還要發揮同伴的能力，不是什么事情都要自己做的。
二、正文
今天要講的內容很多。還是主要大家去看代碼吧。我把主要的東西，介紹下。然后給源碼自己參透吧。下面給大家帶來的是這一講，雲通訊錄之聯系人列表，帶側滑選擇，帶搜索框。
![[S8]2(EET{GE2)%MZJ{I3MI](/image/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNTA5MDk5LzIwMTQxMi8wNDE3MDUzMTY4NjQ2OTQuanBn.png "[S8]2(EET{GE2)%MZJ{I3MI")
泥瓦匠的思路：
- 一個barTop層：兩個ImgView或是Button，一個TextView，用styles.xml控制其的樣式。
- 核心中間listView 和 側滑View 搜索框View 自定義實現。這將是本講的重點
- 底部TextView的實現
三、實現核心代碼
泥瓦匠剛剛吃完午飯，來扯會淡。路上遇到一對黑人唱着歌，朝着食堂吃飯去了。生活就需要這樣子，其樂融融。
下面泥瓦匠先實現旁邊的側滑（SideBar），其實也就是和上一篇的Android UI（四）雲通訊錄項目之雲端更新進度條實現中的自定義View一樣的。只要知道一些Canvas、Paint的一些基礎就好了。我們很簡單的定義了一個26個字母的String數組，然后循環將他們Paint出來就好了。其實就是這么簡單。
package org.nsg.views;
import com.example.android05.R;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.graphics.drawable.ColorDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;
public class SideBar extends View
{
// touching event
private OnTouchingLetterChangedListener onTouchingLetterChangedListener;
// 26 letters
public static String[] b =
{
"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", "#"
};
// if choosed
private int choose = -1;
private Paint paint = new Paint();
private TextView mTextDialog;
public void setmTextDialog(TextView mTextDialog)
{
this.mTextDialog = mTextDialog;
}
public SideBar(Context context, AttributeSet attrs, int defStyleAttr)
{
super(context, attrs, defStyleAttr);
}
public SideBar(Context context, AttributeSet attrs)
{
super(context, attrs);
}
public SideBar(Context context)
{
super(context);
}
// override onDraw function
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
// get the height
int height = getHeight();
// get the width
int width = getWidth();
// get one letter height
int singleHeight = height / b.length;
for (int i = 0; i < b.length; i++)
{
paint.setColor(Color.rgb(33, 65, 98));
paint.setTypeface(Typeface.DEFAULT_BOLD);
paint.setAntiAlias(true);
paint.setTextSize(20);
// if choosed
if(i == choose)
{
paint.setColor(Color.parseColor("#3399ff"));
paint.setFakeBoldText(true);
}
// draw text
float x = width / 2 - paint.measureText(b[i]) / 2;
float y = singleHeight * i + singleHeight;
canvas.drawText(b[i], x, y, paint);
paint.reset();
}
}
@SuppressWarnings("deprecation")
@Override
public boolean dispatchTouchEvent(MotionEvent event)
{
final int action = event.getAction();
final float y = event.getY(); // get the Y
final int oldChoose = choose;
final OnTouchingLetterChangedListener changedListener = onTouchingLetterChangedListener;
final int letterPos = (int)( y / getHeight() * b.length);
switch (action)
{
case MotionEvent.ACTION_UP:
setBackgroundDrawable(new ColorDrawable(0x00000000));
choose = -1;
invalidate();
if (mTextDialog != null)
mTextDialog.setVisibility(View.INVISIBLE);
break;
default:
setBackgroundResource(R.drawable.bg_sidebar);
if (oldChoose != letterPos)
{
if (letterPos >= 0 && letterPos < b.length)
{
if (changedListener != null)
changedListener.onTouchingLetterChanged(b[letterPos]);
if (mTextDialog != null)
{
mTextDialog.setText(b[letterPos]);
mTextDialog.setVisibility(View.VISIBLE);
}
choose = letterPos;
invalidate();
}
}
break;
}
return true;
}
public void setOnTouchingLetterChangedListener(OnTouchingLetterChangedListener changedListener)
{
this.onTouchingLetterChangedListener = changedListener;
}
public interface OnTouchingLetterChangedListener
{
public void onTouchingLetterChanged(String str);
}
}
既然做好了這個，我們就實現這個listView，其實ListView是最好實現的。先定義一個ListView，然后再創一個相應的item的xml。用代碼將它們循環一下就好。
下面是item的xml代碼：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="@+id/txt_catalog"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:paddingLeft="12dp"
android:text="A"
android:textColor="@color/bluejeff"
android:drawableBottom="@drawable/line_blue" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/user_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginTop="6dp"
android:layout_marginBottom="6dp"
android:background="@drawable/bg_border"
android:src="@drawable/user_head" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/user_head"
android:background="@color/white"
android:orientation="vertical">
<TextView
android:id="@+id/txt_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:layout_marginTop="12dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="6dp"
android:textSize="20sp"
android:text="Jeff Lee"/>
<TextView
android:id="@+id/txt_user_list_info"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:textSize="12sp"
android:layout_marginLeft="10dp"
android:text="IT部門 信息科"
android:textColor="@color/gray" />
</LinearLayout>
<TextView
android:id="@+id/txt_user_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#336598"
android:visibility="gone"
android:text="1"/>
</RelativeLayout>
</LinearLayout>
然后我們實現那個搜索框，搜索框其實看上去就是個TextView。所以我們繼承TextView的類，並實現焦點控制的監聽器等，讓這些更好的給我們用。難點也沒有，就是那個畫出搜索圖標而已。代碼我下面也給出來了：
最后，大功告成。小結下，其實這個界面還有增加了一個SidleBar。在我們Android UI（三）SlidingMenu實現滑動菜單（詳細 官方）這里講過的。因為user有個組，或是在其中一本電話本里面的。然后一個界面大家別覺得它太麻煩。一個一個來，有成就感。老話說一句唄：打算起手不凡寫出鴻篇巨作的人，往往堅持不了完成第一章節。
任何做事都一樣，注意細節。一步一步來，Think big, Start small, Scale fast.道理都知道，就去做唄。
四、總結
本章關於雲通訊錄的界面我會慢慢分享給大家。項目也放在下面的鏈接供大家下載學習。這個比較難，大家好好看代碼吧。關於代碼在下面的鏈接：http://files.cnblogs.com/Alandre/Android05.rar
如以上文章或鏈接對你有幫助的話，別忘了在文章按鈕或到頁面右下角點擊 “贊一個” 按鈕哦。你也可以點擊頁面右邊“分享”懸浮按鈕哦，讓更多的人閱讀這篇文章