【Android】安卓开发实战之仿iPhone通讯录demo的移植和优化

demo下载地址：http://download.csdn.net/detail/u013895206/9273575

首先来看一下demo和我移植优化后的对比效果

demo：



优化后：



可以看到，针对demo，我做了移植后，主要做了一下优化：

1、优化键盘设置。

2、将顶部固定的搜索框折叠到了搜索图标中。

3、将Activity中的demo，移到了Fragment碎片中。

4、将右侧过长的字母列表向中间缩进。

1、优化键盘设置：

原demo弹出的键盘点击空白处不会收回，功能键是“下一步”，而不是“完成”、“搜索”这样的功能键，用户输入后，只能点击返回键收回软键盘，体验不好。至于软键盘的设置，请参考我之前的博客。

2、搜索框的优化：

顶部固定搜索框是比较省事，但是会占用屏幕空间，使得显示列表减少，用户体验不好。搜索框弹出效果，请参考我之前的博客。

3、将Activity中的demo，移到了Fragment碎片中。移植代码如下：

/**
* 这个类将Fragment和包含ListView和标题栏的布局进行绑定
*/
public class FragmentOfLinkMan extends Fragment implements View.OnClickListener {
private LinearLayout ll_Linkman;//“联系人”标题栏布局，现在可见，点击搜索图标后不可见
private LinearLayout ll_searchman;//“搜索框”布局，现在不可见，点击搜索图标后可见。
private Dialog dialogOfGroup;//该对话框用显式点击分组图标后的列表项
private EditText searchEdit;

EditText edit_search;//搜索栏
PinnedSectionListView listView;//列表
LetterIndexView letterIndexView;//右边字母列表
TextView txt_center;//中间显示右边按的字母
private ArrayList<PhoneBean> list_all;//所有名字集合
private ArrayList<PhoneBean> list_show;//名字集合+英文首字母栏的集合
private AdapterOfLinkManListView adapter;//列表适配器
public HashMap<String, Integer> map_IsHead;//保存名字首字母
public static final int ITEM = 0;//item标识为0
public static final int TITLE = 1;//item标题标识为1

/**
* 这个方法可以进行适配器和布局的绑定，初始化Item点击监听
*/
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup contain, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.listview_of_lingkman, contain, false);

ll_Linkman = (LinearLayout) view.findViewById(R.id.ll_of_LinkMan);
ll_searchman = (LinearLayout) view.findViewById(R.id.ll_of_search);

ImageView searchImage = (ImageView) view.findViewById(R.id.m_searchImageId);
ImageView sorteImage = (ImageView) view.findViewById(R.id.m_sortImageId);
TextView cancelTextView = (TextView) view.findViewById(R.id.textView_search_cancel);
searchEdit = (EditText) view.findViewById(R.id.edit_of_search);
searchImage.setOnClickListener(this);
sorteImage.setOnClickListener(this);
cancelTextView.setOnClickListener(this);
searchEdit.setOnClickListener(this);

//----------------------------在碎片中添加对话框--------------------------------------------
UsingMain activity = (UsingMain) getActivity();//不在Fragment中，这行去掉
dialogOfGroup = new Dialog(activity);//不在Fragment中，activity设置为需要显示对话框的活动
dialogOfGroup.setContentView(R.layout.dailog_group_layout);
Window dialogWindow = dialogOfGroup.getWindow();
WindowManager.LayoutParams lp = dialogWindow.getAttributes();
dialogWindow.setGravity(Gravity.LEFT | Gravity.TOP);
lp.x = 40; // 新位置X坐标
lp.y = 120; // 新位置Y坐标
lp.width = 280; // 宽度
lp.height = 650; // 高度
lp.alpha = 1.0f; // 透明度
dialogWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.round_dialog_box));
dialogWindow.setAttributes(lp);
//------------------------------------------------------------------------------------------

//----------------------------在碎片中引入PhoneDemo的相关布局-------------------------------
edit_search = (EditText) view.findViewById(R.id.edit_of_search);//获取搜索栏组件的对象
listView = (PinnedSectionListView) view.findViewById(R.id.listViewOfLinkManId);//获取列表组件的对象
letterIndexView = (LetterIndexView) view.findViewById(R.id.phone_LetterIndexView);//获取右侧字母栏的对象
txt_center = (TextView) view.findViewById(R.id.phone_txt_center);//获取点击右侧，中间显示的文本组件的对象

initView();//初始化布局中的组件
initData();//数据初始化
//------------------------------------------------------------------------------------------
return view;
}

private void initView() {//初始化布局中的组件
// 输入监听
edit_search.addTextChangedListener(new TextWatcher() {//监听搜索栏中输入字符的变化状态
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
@Override
public void afterTextChanged(Editable editable) {//在字符输入后的动作
list_show.clear();//清空ListView组件中的内容
map_IsHead.clear();//清空保存名字和首字母的HashMap
//把输入的字符改成大写
String search = editable.toString().trim().toUpperCase();

if (TextUtils.isEmpty(search)) {//如果输入的是空字符，执行以下语句
for (int i = 0; i < list_all.size(); i++) {
PhoneBean bean = list_all.get(i);
//中文字符匹配首字母和英文字符匹配首字母
if (!map_IsHead.containsKey(bean.getHeadChar())) {// 如果不包含就添加一个标题
PhoneBean bean1 = new PhoneBean();
// 设置名字
bean1.setName(bean.getName());
// 设置标题type
bean1.setType(FragmentOfLinkMan.TITLE);
list_show.add(bean1);
// map的值为标题的下标
map_IsHead.put(bean1.getHeadChar(), list_show.size() - 1);
}
// 设置Item type
bean.setType(FragmentOfLinkMan.ITEM);
list_show.add(bean);
}
} else {//如果输入不为空，执行以下语句
for (int i = 0; i < list_all.size(); i++) {
PhoneBean bean = list_all.get(i);
//中文字符匹配首字母和英文字符匹配首字母
if (bean.getName().indexOf(search) != -1 || bean.getName_en().indexOf(search) != -1) {
if (!map_IsHead.containsKey(bean.getHeadChar())) {// 如果不包含就添加一个标题
PhoneBean bean1 = new PhoneBean();
// 设置名字
bean1.setName(bean.getName());
// 设置标题type
bean1.setType(FragmentOfLinkMan.TITLE);
list_show.add(bean1);
// map的值为标题的下标
map_IsHead.put(bean1.getHeadChar(),
list_show.size() - 1);
}
// 设置Item type
bean.setType(FragmentOfLinkMan.ITEM);
list_show.add(bean);
}
}
}
adapter.notifyDataSetChanged();
}
});
// 右边字母竖排的初始化以及监听
letterIndexView.init(new LetterIndexView.OnTouchLetterIndex() {
//实现移动接口
@Override
public void touchLetterWitch(String letter) {
// 中间显示的首字母
txt_center.setVisibility(View.VISIBLE);
txt_center.setText(letter);
// 首字母是否被包含
if (adapter.map_IsHead.containsKey(letter)) {
// 设置首字母的位置
listView.setSelection(adapter.map_IsHead.get(letter));
}
}
//实现抬起接口
@Override
public void touchFinish() {
txt_center.setVisibility(View.GONE);
}
});
/** listview点击事件 */
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view,int i, long l) {
if (list_show.get(i).getType() == FragmentOfLinkMan.ITEM) {// 标题点击不给操作
UsingMain usingMain = (UsingMain)getActivity();
Toast.makeText(usingMain,list_show.get(i).getName(), Toast.LENGTH_LONG).show();
}
}
});
// 设置标题部分有阴影
listView.setShadowVisible(true);
}

protected void initData() {
list_all = new ArrayList<PhoneBean>();//list集合，元素只能是PhoneBean的对象
list_show = new ArrayList<PhoneBean>();//list集合，元素只能是PhoneBean的对象
map_IsHead = new HashMap<String, Integer>();//HashMap的集合，key对是String-Integer
UsingMain usingMain = (UsingMain) getActivity();
adapter = new AdapterOfLinkManListView(usingMain, list_show, map_IsHead);//ListView的适配器
listView.setAdapter(adapter);
// 开启异步加载数据
new Thread(runnable).start();
}

private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
adapter.notifyDataSetChanged();
}
};

private Runnable runnable = new Runnable() {
@Override
public void run() {
String[] str = getResources().getStringArray(R.array.phone_all);//把资源文件array里的数据加载到str数组里
/**
* 把str数组里的名字添加到PhoneBean类里的String name
* 如果name是汉字就转化为拼音，然后把name存到en_name里
* 同时把首字母添加到String headchar里
* for里可以反复创建同名对象的原因在于
* cityBean引用的作用域在单次循环里，下次循环时该引用即失效
* 而它指向的对象在堆内存中失去了强引用，也面临着被回收的境地
* 然而ArrayList集合添加了它，List集合跟数组差不多，所以集合的下标
* 应该具备引用一般的强引用作用，所以被添加的PhoneBean对象不会被回收
*/
for (int i = 0; i < str.length; i++) {
PhoneBean cityBean = new PhoneBean();
cityBean.setName(str[i]);
list_all.add(cityBean);
}
//按拼音排序
MemberSortUtil sortUtil = new MemberSortUtil();
Collections.sort(list_all, sortUtil);
// 初始化数据，顺便放入把标题放入map集合
for (int i = 0; i < list_all.size(); i++) {//遍历已经添加了PhoneBean的list集合
PhoneBean cityBean = list_all.get(i);
//检查HashMap集合里的key，是否有和添加到了list集合的PhoneBean元素的headchar一致
if (!map_IsHead.containsKey(cityBean.getHeadChar())) {// 如果不包含就添加一个标题
PhoneBean cityBean1 = new PhoneBean();
// 设置名字
cityBean1.setName(cityBean.getName());
// 设置标题type
cityBean1.setType(FragmentOfLinkMan.TITLE);
list_show.add(cityBean1);
// map的值为标题的下标
map_IsHead.put(cityBean1.getHeadChar(), list_show.size() - 1);
}
list_show.add(cityBean);
}
handler.sendMessage(handler.obtainMessage());
}
};

public class MemberSortUtil implements Comparator<PhoneBean> {
/**
* 按拼音排序
*/
@Override
public int compare(PhoneBean lhs, PhoneBean rhs) {
Comparator<Object> cmp = Collator
.getInstance(java.util.Locale.CHINA);
return cmp.compare(lhs.getName_en(), rhs.getName_en());
}
}

@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.m_searchImageId://点击“搜索”图标触发的事件
ll_Linkman.setVisibility(View.GONE);
ll_searchman.setVisibility(View.VISIBLE);
//---------------------------设置引入图片的尺寸---------------------------------------------
Drawable searchPic = getResources().getDrawable(R.drawable.redsearch);
searchPic.setBounds(0, 0, 40, 40);
searchEdit.setCompoundDrawables(searchPic, null, null, null);
//------------------------------------------------------------------------------------------
break;
case R.id.m_sortImageId://点击“组别”图标触发的事件
dialogOfGroup.show();//显式组别列表框
break;
case R.id.textView_search_cancel://点击“取消”字样触发的事件
ll_Linkman.setVisibility(View.VISIBLE);
ll_searchman.setVisibility(View.GONE);
searchEdit.setText("");//清空输入框的内容
//----------------------------------收起软键盘--------------------------------------------------------
UsingMain usingMain = (UsingMain)getActivity();
InputMethodManager imm = (InputMethodManager)usingMain.getSystemService(Context.INPUT_METHOD_SERVICE);
if (imm != null) {
imm.hideSoftInputFromWindow(usingMain.getWindow().getDecorView().getWindowToken(),0);
}
//-----------------------------------------------------------------------------------------------------
break;
default:
break;
}
}
} 至于怎么在Activity中加载Fragment，请参考我之前的博客。

4、将右侧过长的字母列表向中间缩进。

public class LetterIndexView extends LinearLayout {

/**
* 上下文环境
*/
private Context context;
/**
* 字母控件
*/
private TextView[] lettersTxt = new TextView[28];
/**
* 触碰字母索引接口
*/
private OnTouchLetterIndex touchLetterIndex;

private float textHight=0;

public LetterIndexView(Context context) {
super(context);
this.context = context;
}

public LetterIndexView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
}

/**
* 初始化控件.
*/
public void init(OnTouchLetterIndex touchLetterIndex) {
this.touchLetterIndex = touchLetterIndex;
this.setBackgroundColor(getResources().getColor(R.color.transparent));
this.setOrientation(LinearLayout.VERTICAL);
this.setGravity(Gravity.CENTER);
//创建字母控件实例
for (int i = 0; i < 28; i++) {
lettersTxt[i] = new TextView(context);
lettersTxt[i].setGravity(Gravity.CENTER);
char tab = (char) (i + 63);
if (i == 0)
lettersTxt[i].setText("!");
else if (i == 1)
lettersTxt[i].setText("#");
else
lettersTxt[i].setText("" + tab);
//----------------这里我对demo进行了修改------------------------------------------------
lettersTxt[i].setPadding(0, 0,0, 0);
lettersTxt[i].setTextSize(10);
//--------------------------------------------------------------------------------------
lettersTxt[i].setTextColor(Color.BLACK);
this.addView(lettersTxt[i]);
}
this.setOnTouchListener(new OnTouchListener() {
//移动y轴的距离
private float y;
//控件的高度
private int height;
//按到了哪个字母
private String tab;

@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//按下时改变背景和字体颜色
setTextColor(Color.WHITE);
LetterIndexView.this.setBackgroundColor(getResources().getColor(R.color.ff7c7c7c));
case MotionEvent.ACTION_MOVE:
// 获取触发事件点的纵坐标
//----------------这里我对demo进行了修改------------------------------------
/**
* 先获取包含字母列表的线性布局的总高度height和单个字母的高度TextHight
* M是线性布局的顶端（坐标0）到第一个字符“！”的举例
* y是线性布局顶端到点击位置的距离
* x = y - M相当于将原点在线性布局的顶端重置为第一个字符“！”的顶端
* (y>=M)&&(y<=height-M)意思是只有在字符列表处点击，才会响应
* location = (int)(x / textHight)可以定位出现在点击的是第几个字符
*/
textHight = lettersTxt[0].getHeight();
height = LetterIndexView.this.getHeight();
float M = (height-textHight*28)/2;
y = event.getY();
float x = y - M;
if((y>=M)&&(y<=height-M)){
int location = (int)(x / textHight);
if (location == 0) {
tab = "!";
} else if (location == 1) {
tab = "#";
} else if (location > 0 && location <= 27) {
tab = String.valueOf((char) (location + 63));
}
if (LetterIndexView.this.touchLetterIndex!=null) {
//调用接口
LetterIndexView.this.touchLetterIndex.touchLetterWitch(tab);
}
}
//--------------------------------------------------------------------------
break;
case MotionEvent.ACTION_UP:
LetterIndexView.this.setBackgroundColor(getResources().getColor(R.color.transparent));
if (LetterIndexView.this.touchLetterIndex!=null) {
//调用接口
LetterIndexView.this.touchLetterIndex.touchFinish();
}
setTextColor(Color.BLACK);
break;
}
return true;
}
});
}

/**
* 设置字体颜色
*/
private void setTextColor(int color) {
for (int i = 0; i < 28; i++) {
lettersTxt[i].setTextColor(color);
}
}

/**
* 触碰字母索引接口
*/
public interface OnTouchLetterIndex {

/**
* 触摸字母空间接口.
*/
void touchLetterWitch(String letter);

/**
* 结束查询
*/
void touchFinish();

}

}