Android UI（五）云通讯录项目之联系人列表，带侧滑选择，带搜索框

本文主要是介绍Android UI（五）云通讯录项目之联系人列表，带侧滑选择，带搜索框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Android UI（五）云通讯录项目之联系人列表，带侧滑选择，带搜索框

作者：泥沙砖瓦浆木匠
网站：http://blog.csdn.net/jeffli1993
个人签名：打算起手不凡写出鸿篇巨作的人，往往坚持不了完成第一章节。
交流QQ群：【编程之美 365234583】http://jq.qq.com/?_wv=1027&k=XVfBTo

要捐钱的就打支付宝吧：13958686678（泥瓦匠开个玩笑~）

一、前言

继续AndroidUI系列，泥瓦匠又要开始扯淡了。哈哈今天在文章头加了个支付宝账号。我也真逗，至今没收到一笔是写博客的钱。或是分享的。泥瓦匠也就挂着逗逗乐而已。笑着就笑吧，我也在笑了。

和我的师傅扯着蛋。也教授了泥瓦匠很多东西。泥瓦匠一直在学习，一直在进步而已。这是师傅送我的话：

睡少点，玩少点，分清主次拍优先级。还要发挥同伴的能力，不是什么事情都要自己做的。

二、正文

今天要讲的内容很多。还是主要大家去看代码吧。我把主要的东西，介绍下。然后给源码自己参透吧。下面给大家带来的是这一讲，云通讯录之联系人列表，带侧滑选择，带搜索框。

7MA6B{~~@L(1VSV)3RCJ6$K (3%N}[Z4[)9@{O2MMOT64VO [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.道理都知道，就去做呗。