Android UI（五）雲通信錄項目之聯繫人列表，帶側滑選擇，帶搜索框
Android UI（五）雲通信錄項目之聯繫人列表，帶側滑選擇，帶搜索框
做者：泥沙磚瓦漿木匠
網站：http://blog.csdn.net/jeffli1993
我的簽名：打算起手不凡寫出鴻篇巨做的人，每每堅持不了完成第一章節。
交流QQ羣：【編程之美 365234583】http://jq.qq.com/?_wv=1027&k=XVfBTo html
要捐錢的就打支付寶吧：13958686678（泥瓦匠開個玩笑~） android
1、前言
繼續AndroidUI系列，泥瓦匠又要開始扯淡了。哈哈今天在文章頭加了個支付寶帳號。我也真逗，至今沒收到一筆是寫博客的錢。或是分享的。泥瓦匠也就掛着逗逗樂而已。笑着就笑吧，我也在笑了。 編程
和個人師傅扯着蛋。也教授了泥瓦匠不少東西。泥瓦匠一直在學習，一直在進步而已。這是師傅送個人話：
canvas
睡少點，玩少點，分清主次拍優先級。還要發揮同伴的能力，不是什麼事情都要本身作的。
2、正文
今天要講的內容不少。仍是主要你們去看代碼吧。我把主要的東西，介紹下。而後給源碼本身參透吧。下面給你們帶來的是這一講，雲通信錄之聯繫人列表，帶側滑選擇，帶搜索框。 數組
![[S8]2(EET{GE2)%MZJ{I3MI](/link?url=http://images.cnitblog.com/blog/509099/201412/041705310763281.jpg "[S8]2(EET{GE2)%MZJ{I3MI")
泥瓦匠的思路： ide
- 一個barTop層：兩個ImgView或是Button，一個TextView，用styles.xml控制其的樣式。
- 核心中間listView 和 側滑View 搜索框View 自定義實現。這將是本講的重點
- 底部TextView的實現
3、實現核心代碼
泥瓦匠剛剛吃完午餐，來扯會淡。路上遇到一對黑人唱着歌，朝着食堂吃飯去了。生活就須要這樣子，其樂融融。 學習
下面泥瓦匠先實現旁邊的側滑（SideBar），其實也就是和上一篇的Android UI（四）雲通信錄項目之雲端更新進度條實現中的自定義View同樣的。只要知道一些Canvas、Paint的一些基礎就行了。咱們很簡單的定義了一個26個字母的String數組，而後循環將他們Paint出來就行了。其實就是這麼簡單。 網站
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
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。用代碼將它們循環一下就好。 this
下面是item的xml代碼： spa
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<?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.道理都知道，就去作唄。
4、總結
本章關於雲通信錄的界面我會慢慢分享給你們。項目也放在下面的連接供你們下載學習。這個比較難，你們好好看代碼吧。關於代碼在下面的連接：http://files.cnblogs.com/Alandre/Android05.rar
如以上文章或連接對你有幫助的話，別忘了在文章按鈕或到頁面右下角點擊 「贊一個」 按鈕哦。你也能夠點擊頁面右邊「分享」懸浮按鈕哦，讓更多的人閱讀這篇文章
相關文章
- 1. android 對話框之——帶單選列表、帶多選項列表、按鈕等問題
- 2. jquery手寫帶搜索功能的下拉框（帶複選框）
- 3. 下拉框帶搜索框
- 4. Material UI 帶複選框表格獲取選中值（索引）
- 5. 自定義搜索框，帶提示信息的搜索框
- 6. 前端下拉左右選擇，帶搜索框
- 7. Android——列表選擇框(Spinner)
- 8. 【Android】自定義控件-仿QQ聯繫人側滑條目，右側滑菜單。
- 9. Android PopupWindow實現帶背景陰影的下滑選擇框
- 10. 仿微信聯繫人列表滑動字母索引
- 更多相關文章...
- • ionic 滑動框 - ionic 教程
- • jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
