作者：泥沙磚瓦漿木匠
網(wǎng)站：http://blog.csdn.net/jeffli1993
個(gè)人簽名：打算起手不凡寫出鴻篇巨作的人，往往堅(jiān)持不了完成第一章節(jié)。
交流QQ群：【編程之美 365234583】http://jq.qq.com/?_wv=1027&k=XVfBTo

要捐錢的就打支付寶吧：13958686678（泥瓦匠開個(gè)玩笑~）

一、前言

??? 繼續(xù)AndroidUI系列，泥瓦匠又要開始扯淡了。哈哈今天在文章頭加了個(gè)支付寶賬號(hào)。我也真逗，至今沒收到一筆是寫博客的錢?；蚴欠窒淼?。泥瓦匠也就掛著逗逗樂而已。笑著就笑吧，我也在笑了。

??? 和我的師傅扯著蛋。也教授了泥瓦匠很多東西。泥瓦匠一直在學(xué)習(xí)，一直在進(jìn)步而已。這是師傅送我的話：

睡少點(diǎn)，玩少點(diǎn)，分清主次拍優(yōu)先級(jí)。還要發(fā)揮同伴的能力，不是什么事情都要自己做的。

二、正文

??? 今天要講的內(nèi)容很多。還是主要大家去看代碼吧。我把主要的東西，介紹下。然后給源碼自己參透吧。下面給大家?guī)淼氖沁@一講，云通訊錄之聯(lián)系人列表，帶側(cè)滑選擇，帶搜索框。

??? 泥瓦匠的思路：

• 一個(gè)barTop層：兩個(gè)ImgView或是Button，一個(gè)TextView，用styles.xml控制其的樣式。
• 核心中間listView 和 側(cè)滑View 搜索框View 自定義實(shí)現(xiàn)。這將是本講的重點(diǎn)?
• 底部TextView的實(shí)現(xiàn)??????
  

三、實(shí)現(xiàn)核心代碼

??? 泥瓦匠剛剛吃完午飯，來扯會(huì)淡。路上遇到一對(duì)黑人唱著歌，朝著食堂吃飯去了。生活就需要這樣子，其樂融融。

??? 下面泥瓦匠先實(shí)現(xiàn)旁邊的側(cè)滑（SideBar），其實(shí)也就是和上一篇的Android UI（四）云通訊錄項(xiàng)目之云端更新進(jìn)度條實(shí)現(xiàn)中的自定義View一樣的。只要知道一些Canvas、Paint的一些基礎(chǔ)就好了。我們很簡(jiǎn)單的定義了一個(gè)26個(gè)字母的String數(shù)組，然后循環(huán)將他們Paint出來就好了。其實(shí)就是這么簡(jiǎn)單。

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 eventprivate OnTouchingLetterChangedListener onTouchingLetterChangedListener;// 26 letterspublic 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 choosedprivate 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 functionprotected void onDraw(Canvas canvas){super.onDraw(canvas);// get the heightint height = getHeight();// get the widthint width = getWidth();// get one letter heightint 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 textfloat x = width / 2 - paint.measureText(b[i]) / 2;float y = singleHeight * i + singleHeight;canvas.drawText(b[i], x, y, paint);paint.reset();}}@SuppressWarnings("deprecation")@Overridepublic 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);} }

? 既然做好了這個(gè)，我們就實(shí)現(xiàn)這個(gè)listView，其實(shí)ListView是最好實(shí)現(xiàn)的。先定義一個(gè)ListView，然后再創(chuàng)一個(gè)相應(yīng)的item的xml。用代碼將它們循環(huán)一下就好。

? 下面是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" ><TextViewandroid: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"><ImageViewandroid: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"><TextViewandroid: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"/><TextViewandroid: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><TextViewandroid: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>

? 然后我們實(shí)現(xiàn)那個(gè)搜索框，搜索框其實(shí)看上去就是個(gè)TextView。所以我們繼承TextView的類，并實(shí)現(xiàn)焦點(diǎn)控制的監(jiān)聽器等，讓這些更好的給我們用。難點(diǎn)也沒有，就是那個(gè)畫出搜索圖標(biāo)而已。代碼我下面也給出來了：

? 最后，大功告成。小結(jié)下，其實(shí)這個(gè)界面還有增加了一個(gè)SidleBar。在我們Android UI（三）SlidingMenu實(shí)現(xiàn)滑動(dòng)菜單（詳細(xì) 官方）這里講過的。因?yàn)閡ser有個(gè)組，或是在其中一本電話本里面的。然后一個(gè)界面大家別覺得它太麻煩。一個(gè)一個(gè)來，有成就感。老話說一句唄：打算起手不凡寫出鴻篇巨作的人，往往堅(jiān)持不了完成第一章節(jié)。

? 任何做事都一樣，注意細(xì)節(jié)。一步一步來，Think big, Start small, Scale fast.道理都知道，就去做唄。

四、總結(jié)

?? 本章關(guān)于云通訊錄的界面我會(huì)慢慢分享給大家。項(xiàng)目也放在下面的鏈接供大家下載學(xué)習(xí)。這個(gè)比較難，大家好好看代碼吧。關(guān)于代碼在下面的鏈接：http://files.cnblogs.com/Alandre/Android05.rar

?? 如以上文章或鏈接對(duì)你有幫助的話，別忘了在文章按鈕或到頁面右下角點(diǎn)擊 “贊一個(gè)” 按鈕哦。你也可以點(diǎn)擊頁面右邊“分享”懸浮按鈕哦，讓更多的人閱讀這篇文章

轉(zhuǎn)載于:https://www.cnblogs.com/Alandre/p/4143327.html

總結(jié)

以上是生活随笔為你收集整理的Android UI（五）云通讯录项目之联系人列表，带侧滑选择，带搜索框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。