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

YukiAngel 博客 2023-08-24 143 0

作者：泥沙砖瓦浆木匠网站：http://blog.csdn.net/jeffli1993个人签名：打算起手不凡写出鸿篇巨作的人，往往坚持不了完成第一章节。交流QQ群：【编程之美 365234583】http://jq.qq.com/?_wv=1027&k=XVfBTo 要捐钱的就打支付宝吧：13958686678（泥瓦匠开个玩笑~）一、前言继续AndroidUI系列，泥瓦匠又要开始扯淡了。哈哈今天在文章头加了个支付宝账号。我也真逗，至今没收到一笔是写博客的钱。或是分享的。泥瓦匠也就挂着逗逗乐而已。笑着就笑吧，我也在笑了。和我的师傅扯着蛋。也教授了泥瓦匠很多东西。泥瓦匠一直在学习，一直在进步而已。这是师傅送我的话：睡少点，玩少点，分清主次拍优先级。还要发挥同伴的能力，不是什么事情都要自己做的。二、正文今天要讲的内容很多。还是主要大家去看代码吧。我把主要的东西，介绍下。然后给源码自己参透吧。下面给大家带来的是这一讲，云通讯录之联系人列表，带侧滑选择，带搜索框。泥瓦匠的思路：一个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代码：

android:layout_width="fill_parent"

android:layout_height="match_parent"

android:gravity="center_vertical"

android:orientation="vertical" >

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" />

android:layout_width="wrap_content"

android:layout_height="wrap_content">

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" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_toRightOf="@id/user_head"

android:background="@color/white"

android:orientation="vertical">

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"/>

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" />

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"/>

然后我们实现那个搜索框，搜索框其实看上去就是个TextView。所以我们继承TextView的类，并实现焦点控制的监听器等，让这些更好的给我们用。难点也没有，就是那个画出搜索图标而已。代码我下面也给出来了：

最后，大功告成。小结下，其实这个界面还有增加了一个SidleBar。在我们Android UI（三）SlidingMenu实现滑动菜单（详细官方）这里讲过的。因为user有个组，或是在其中一本电话本里面的。然后一个界面大家别觉得它太麻烦。一个一个来，有成就感。老话说一句呗：打算起手不凡写出鸿篇巨作的人，往往坚持不了完成第一章节。

任何做事都一样，注意细节。一步一步来，Think big, Start small, Scale fast.道理都知道，就去做呗。

四、总结

本章关于云通讯录的界面我会慢慢分享给大家。项目也放在下面的链接供大家下载学习。这个比较难，大家好好看代码吧。关于代码在下面的链接：https://files.cnblogs.com/Alandre/Android05.rar

如以上文章或链接对你有帮助的话，别忘了在文章按钮或到页面右下角点击 “赞一个” 按钮哦。你也可以点击页面右边“分享”悬浮按钮哦，让更多的人阅读这篇文章

查看原文

本文由用户于 2023-08-24 发布在夸智网，如有疑问，请联系我们。
本文链接：https://www.kuazhi.com/post/557372.html

夸智网

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

windows 网络 VPN突然用不了了咋回事

tcp/ip 网络协议【网络】网络层——IP协议

发表评论取消回复

夸智网

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

windows 网络 VPN突然用不了了咋回事

tcp/ip 网络协议 【网络】网络层——IP协议

相关文章

发表评论取消回复

tcp/ip 网络协议【网络】网络层——IP协议