[置顶] Android仿人人客户端（v5.7.1）——应用主界面之左侧面板UI实现

转载请标明出处：http://blog.csdn.net/android_ls/article/details/8749188
声明：仿人人项目，所用所有图片资源都来源于其它Android移动应用，编写本应用的目的在于学习交流，如涉及侵权请告知，我会及时换掉用到的相关图片。

一、效果图对比

人人官方的主界面截图：



我仿的主界面之左侧面板（仿，不一定要一样，自己觉得看着不舒服的可以任意改，呵呵）截图：





二、编码具体实现

1、Layout布局文件（left_panel.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="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>

<ExpandableListView
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、初始化组件，构建数据

初始化组件

ivUserIcon = (ImageView) findViewById(R.id.iv_user_icon);
tvNickname = (TextView) findViewById(R.id.tv_nickname);
mExpandableListView = (ExpandableListView) findViewById(R.id.elv_list_view);

构建分组数据

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组件的数据适配器

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.BaseExpandableListAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.everyone.android.R;
import com.everyone.android.entity.LeftPanelListItem;

/**
* 功能描述：左侧面板ExpandableListView组件数据适配器
* @author android_ls
*
*/
public class LeftPanelExListViewAdapter extends BaseExpandableListAdapter {

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设置数据适配器，并默认让所有组都展开

mExListViewAdapter = new LeftPanelExListViewAdapter(this, mListItems);
mExpandableListView.setAdapter(mExListViewAdapter);

// 设置默认让所有组都展开
for (int i = 0; i < mListItems.size(); i++) {
mExpandableListView.expandGroup(i);
}

四、完整代码

strings.xml文件

<?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信息实体类

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类）源码：

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.ExpandableListView;
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 ExpandableListView mExpandableListView;

/**
* ExpandableListView组件的数据适配器
*/
private LeftPanelExListViewAdapter mExListViewAdapter;

/**
* ExpandableListView组件的数据源
*/
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);
mExpandableListView = (ExpandableListView) 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);
mExpandableListView.setAdapter(mExListViewAdapter);

// 设置默认让所有组都展开
for (int i = 0; i < mListItems.size(); i++) {
mExpandableListView.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);
}

}

时间不早了，先到这里吧，后面的待续。。。