一、效果图对比
人人官方的主界面截图:
我仿的主界面之左侧面板(仿,不一定要一样,自己觉得看着不舒服的可以任意改,呵呵)截图:
二、编码具体实现
1、Layout布局文件(left_panel.xml)
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
|
<?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=
"fill_parent"
android:orientation=
"vertical"
>
<LinearLayout
android:layout_width=
"fill_parent"
android:layout_height=
"wrap_content"
android:background=
"@drawable/left_panel_top_bg"
android:gravity=
"center_vertical"
android:orientation=
"horizontal"
android:padding=
"7dip"
>
<ImageView
android:id=
"@+id/iv_user_icon"
android:layout_width=
"48dip"
android:layout_height=
"48dip"
android:scaleType=
"centerCrop"
android:src=
"@drawable/v5_0_1_widget_default_head"
/>
<TextView
android:id=
"@+id/tv_nickname"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_marginLeft=
"10dip"
android:text=
"逐鹿。。。"
android:textColor=
"#FFFFF0"
android:textSize=
"17sp"
/>
</LinearLayout>
<<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a>
android:id=
"@+id/elv_list_view"
android:layout_width=
"fill_parent"
android:layout_height=
"wrap_content"
android:layout_weight=
"1.0"
android:cacheColorHint=
"#FFFFFF"
android:childIndicator=
"@null"
android:divider=
"@drawable/v5_0_1_flipper_head_popup_menu_black_divider"
android:dividerHeight=
"1px"
android:fadingEdge=
"none"
android:footerDividersEnabled=
"false"
android:groupIndicator=
"@null"
android:headerDividersEnabled=
"false"
android:listSelector=
"#00000000"
android:scrollbars=
"none"
/>
</LinearLayout>
|
2、初始化组件,构建数据
初始化组件
1
2
3
4
|
ivUserIcon = (ImageView) findViewById(R.id.iv_user_icon);
tvNickname = (TextView) findViewById(R.id.tv_nickname);
m<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a> = (<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a>) findViewById(R.id.elv_list_view);
|
构建分组数据
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
|
Resources resources =
this
.getResources();
mGroupNames = resources.getStringArray(R.array.left_panel_group_names);
String[] firstGroupNames = resources.getStringArray(R.array.left_panel_first_group_names);
String[] secondGroupNames = resources.getStringArray(R.array.left_panel_second_group_names);
String[] threeGroupNames = resources.getStringArray(R.array.left_panel_group_three_names);
int
[] firstGroupIcons = {
R.drawable.left_panel_item_newsfeed_icon_selector,
R.drawable.left_panel_item_message_icon_selector,
R.drawable.left_panel_item_chat_icon_selector,
R.drawable.left_panel_item_friends_icon_selector,
R.drawable.left_panel_item_search_icon_selector};
int
[] secondGroupIcons = {
R.drawable.left_panel_item_location_icon_selector,
R.drawable.left_panel_item_mainpage_icon_selector,
R.drawable.left_panel_item_hot_icon_selector,
R.drawable.left_panel_item_apps_icon_selector };
int
[] threeGroupIcons = {
R.drawable.left_panel_item_settings_icon_selector,
R.drawable.left_panel_item_layout_icon_selector };
addGroup(
0
, firstGroupNames, firstGroupIcons);
addGroup(
1
, secondGroupNames, secondGroupIcons);
addGroup(
2
, threeGroupNames, threeGroupIcons);
|
3、自定类继承BaseExpandableListAdapter,实现左侧面板ExpandableListView组件的数据适配器
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
|
package
com.everyone.android.adapter;
import
java.util.List;
import
android.content.Context;
import
android.graphics.Color;
import
android.util.TypedValue;
import
android.view.Gravity;
import
android.view.View;
import
android.view.ViewGroup;
import
android.widget.AbsListView;
import
android.widget.<a title=
"BaseExpandableListAd"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>BaseExpandableListAd</a>apter;
import
android.widget.LinearLayout;
import
android.widget.TextView;
import
com.everyone.android.R;
import
com.everyone.android.entity.LeftPanelListItem;
/**
* 功能描述:左侧面板<a title="ExpandableListView" href="http://www.android-study.com/pingtaikaifa/554.html">ExpandableListView</a>组件数据适配器
* @author android_ls
*
*/
public
class
LeftPanelExListViewAdapter
extends
<a title=
"BaseExpandableListAd"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>BaseExpandableListAd</a>apter {
private
Context mContext;
private
List<LeftPanelListItem> mListItems;
public
LeftPanelExListViewAdapter(Context context, List<LeftPanelListItem> listItems) {
mContext = context;
mListItems = listItems;
}
public
LeftPanelListItem getChild(
int
groupPosition,
int
childPosition) {
return
mListItems.get(groupPosition).getGroups().get(childPosition);
}
public
long
getChildId(
int
groupPosition,
int
childPosition) {
return
childPosition;
}
public
View getChildView(
int
groupPosition,
int
childPosition,
boolean
isLastChild, View convertView, ViewGroup parent) {
ViewHolder viewHolder =
null
;
if
(convertView ==
null
) {
convertView = getItemLayout(
80
, R.drawable.left_panel_item_selector,
18
, Color.GRAY,
30
);
viewHolder =
new
ViewHolder();
viewHolder.groupName = (TextView) convertView.findViewById(
0
);
convertView.setTag(viewHolder);
}
else
{
viewHolder = (ViewHolder) convertView.getTag();
}
LeftPanelListItem listItem = getChild(groupPosition, childPosition);
viewHolder.groupName.setCompoundDrawablesWithIntrinsicBounds(listItem.getDrawableId(),
0
,
0
,
0
);
viewHolder.groupName.setCompoundDrawablePadding(
10
);
viewHolder.groupName.setText(listItem.getName());
return
convertView;
}
public
int
getChildrenCount(
int
groupPosition) {
return
mListItems.get(groupPosition).getGroups().size();
}
public
LeftPanelListItem getGroup(
int
groupPosition) {
return
mListItems.get(groupPosition);
}
public
int
getGroupCount() {
return
mListItems.size();
}
public
long
getGroupId(
int
groupPosition) {
return
groupPosition;
}
public
View getGroupView(
int
groupPosition,
boolean
isExpanded, View convertView, ViewGroup parent) {
ViewHolder viewHolder =
null
;
if
(convertView ==
null
) {
convertView = getItemLayout(
60
, R.drawable.v5_0_1_desktop_list_item,
15
, Color.WHITE,
20
);
viewHolder =
new
ViewHolder();
viewHolder.groupName = (TextView) convertView.findViewById(
0
);
convertView.setTag(viewHolder);
}
else
{
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.groupName.setText(getGroup(groupPosition).getName());
return
convertView;
}
public
boolean
hasStableIds() {
return
false
;
}
public
boolean
isChildSelectable(
int
groupPosition,
int
childPosition) {
return
true
;
}
static
class
ViewHolder {
public
TextView groupName;
}
/**
* 根据参数配置获取相应的Layout
* @param height Layout高度
* @param backgroundId Layout的背景图片ID
* @param textSize 字体大小
* @param txetColor 字体颜色
* @param padding 文字距离左边的大小(间距)
* @return LinearLayout
*/
private
LinearLayout getItemLayout(
int
height,
int
backgroundId,
int
textSize,
int
txetColor,
int
padding) {
LinearLayout layout =
new
LinearLayout(mContext);
AbsListView.LayoutParams lp =
new
AbsListView.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, height);
layout.setBackgroundResource(backgroundId);
layout.setGravity(Gravity.CENTER_VERTICAL);
layout.setLayoutParams(lp);
TextView textView =
new
TextView(mContext);
textView.setId(
0
);
textView.setLayoutParams(
new
LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize);
textView.setTextColor(txetColor);
textView.setPadding(padding,
0
,
0
,
0
);
layout.addView(textView);
return
layout;
}
}
|
4、给ExpandableListView设置数据适配器,并默认让所有组都展开
1
2
3
4
5
6
7
8
|
mExListViewAdapter =
new
LeftPanelExListViewAdapter(
this
, mListItems);
m<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a>.setAdapter(mExListViewAdapter);
// 设置默认让所有组都展开
for
(
int
i =
0
; i < mListItems.size(); i++) {
m<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a>.expandGroup(i);
}
|
四、完整代码
strings.xml文件
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
|
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<resources>
<string name=
"app_name"
>CopyEveryone</string>
<string-array name=
"left_panel_group_names"
>
<item>常用</item>
<item>更多</item>
<item>操作</item>
</string-array>
<string-array name=
"left_panel_first_group_names"
>
<item>新鲜事</item>
<item>消息</item>
<item>聊天</item>
<item>好友</item>
<item>找人</item>
</string-array>
<string-array name=
"left_panel_second_group_names"
>
<item>附近</item>
<item>公共主页</item>
<item>热门分享</item>
<item>应用与游戏</item>
</string-array>
<string-array name=
"left_panel_group_three_names"
>
<item>选项</item>
<item>注销登录</item>
</string-array>
</resources>
|
左侧面板的Item信息实体类
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
|
package
com.everyone.android.entity;
import
java.util.ArrayList;
/**
* 功能描述:左侧面板Item信息
* @author android_ls
*
*/
public
class
LeftPanelListItem {
private
int
id;
// 唯一标识
private
String name;
// 操作项名称
private
int
drawableId;
// 指示图标 #R.drawable.ic_launcher
private
ArrayList<LeftPanelListItem> groups;
public
int
getId() {
return
id;
}
public
void
setId(
int
id) {
this
.id = id;
}
public
String getName() {
return
name;
}
public
void
setName(String name) {
this
.name = name;
}
public
int
getDrawableId() {
return
drawableId;
}
public
void
setDrawableId(
int
drawableId) {
this
.drawableId = drawableId;
}
public
ArrayList<LeftPanelListItem> getGroups() {
return
groups;
}
public
void
setGroups(ArrayList<LeftPanelListItem> groups) {
this
.groups = groups;
}
}
|
仿人人主界面之左侧面板(LeftPanelActivity类)源码:
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
|
package
com.everyone.android.ui;
import
java.util.ArrayList;
import
java.util.List;
import
android.content.res.Resources;
import
android.os.Bundle;
import
android.widget.<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a>;
import
android.widget.ImageView;
import
android.widget.TextView;
import
com.everyone.android.AppBaseActivity;
import
com.everyone.android.R;
import
com.everyone.android.adapter.LeftPanelExListViewAdapter;
import
com.everyone.android.entity.LeftPanelListItem;
/**
* 功能描述:仿人人主界面之左侧面板
* @author android_ls
*
*/
public
class
LeftPanelActivity
extends
AppBaseActivity {
/**
* 用户图标显示组件
*/
private
ImageView ivUserIcon;
/**
* 用户名称显示组件
*/
private
TextView tvNickname;
/**
* 可展开的ListView组件
*/
private
<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a> m<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a>;
/**
* <a title="ExpandableListView" href="http://www.android-study.com/pingtaikaifa/554.html">ExpandableListView</a>组件的数据适配器
*/
private
LeftPanelExListViewAdapter mExListViewAdapter;
/**
* <a title="ExpandableListView" href="http://www.android-study.com/pingtaikaifa/554.html">ExpandableListView</a>组件的数据源
*/
private
List<LeftPanelListItem> mListItems =
new
ArrayList<LeftPanelListItem>();
/**
* 分组名数组
*/
private
String[] mGroupNames;
@Override
public
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
}
@Override
protected
void
setupView() {
ivUserIcon = (ImageView) findViewById(R.id.iv_user_icon);
tvNickname = (TextView) findViewById(R.id.tv_nickname);
m<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a> = (<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a>) findViewById(R.id.elv_list_view);
}
@Override
protected
int
getLayoutId() {
return
R.layout.left_panel;
}
@Override
protected
void
initializedData() {
Resources resources =
this
.getResources();
mGroupNames = resources.getStringArray(R.array.left_panel_group_names);
String[] firstGroupNames = resources.getStringArray(R.array.left_panel_first_group_names);
String[] secondGroupNames = resources.getStringArray(R.array.left_panel_second_group_names);
String[] threeGroupNames = resources.getStringArray(R.array.left_panel_group_three_names);
int
[] firstGroupIcons = {
R.drawable.left_panel_item_newsfeed_icon_selector,
R.drawable.left_panel_item_message_icon_selector,
R.drawable.left_panel_item_chat_icon_selector,
R.drawable.left_panel_item_friends_icon_selector,
R.drawable.left_panel_item_search_icon_selector};
int
[] secondGroupIcons = {
R.drawable.left_panel_item_location_icon_selector,
R.drawable.left_panel_item_mainpage_icon_selector,
R.drawable.left_panel_item_hot_icon_selector,
R.drawable.left_panel_item_apps_icon_selector };
int
[] threeGroupIcons = {
R.drawable.left_panel_item_settings_icon_selector,
R.drawable.left_panel_item_layout_icon_selector };
addGroup(
0
, firstGroupNames, firstGroupIcons);
addGroup(
1
, secondGroupNames, secondGroupIcons);
addGroup(
2
, threeGroupNames, threeGroupIcons);
mExListViewAdapter =
new
LeftPanelExListViewAdapter(
this
, mListItems);
m<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a>.setAdapter(mExListViewAdapter);
// 设置默认让所有组都展开
for
(
int
i =
0
; i < mListItems.size(); i++) {
m<a title=
"ExpandableListView"
href=
"http://www.android-study.com/pingtaikaifa/554.html"
>ExpandableListView</a>.expandGroup(i);
}
}
/**
* 添加数据到指定的组
* @param groupId 组ID
* @param names 子项的名字数组
* @param icons 子项的图标数组
*/
private
void
addGroup(
int
groupId, String[] names,
int
[] icons) {
LeftPanelListItem listItem =
new
LeftPanelListItem();
listItem.setId(groupId);
listItem.setName(mGroupNames[groupId]);
// 组没有操作指示图标
// listItem.setDrawableId(drawableId);
ArrayList<LeftPanelListItem> firstGroup =
new
ArrayList<LeftPanelListItem>();
for
(
int
i =
0
; i < names.length; i++) {
LeftPanelListItem firstGroupItem =
new
LeftPanelListItem();
firstGroupItem.setId(i);
firstGroupItem.setName(names[i]);
firstGroupItem.setDrawableId(icons[i]);
// 可以无限延伸
// firstGroupItem.setGroups(null);
firstGroup.add(firstGroupItem);
}
listItem.setGroups(firstGroup);
mListItems.add(listItem);
}
}
|