转载请标明出处: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" ><LinearLayoutandroid: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" ><ImageViewandroid: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" /><TextViewandroid: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><ExpandableListViewandroid: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_launcherprivate 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;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);}@Overrideprotected 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);}@Overrideprotected int getLayoutId() {return R.layout.left_panel;}@Overrideprotected 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);}}

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

转载于:https://www.cnblogs.com/xinyuyuanm/archive/2013/04/02/2995483.html

[置顶] Android仿人人客户端(v5.7.1)——应用主界面之左侧面板UI实现相关推荐

  1. Android仿人人客户端(v5.7.1)——应用主界面之左侧面板UI实现

    转载请标明出处:http://blog.csdn.net/android_ls/article/details/8749188 声明:仿人人项目,所用所有图片资源都来源于其它Android移动应用,编 ...

  2. Android仿人人客户端(v5.7.1)——项目框架新做的调整描述(项目中基类java源码)...

    转载请标明出处:http://blog.csdn.net/android_ls/article/details/8909068 声明:没看过仿人人android客户端系列博文,前面的相关文章的朋友,请 ...

  3. Android仿人人客户端(v5.7.1)——对从服务器端(网络)获取的图片进行本地双缓存处理(编码实现)...

    转载请标明出处:http://blog.csdn.net/android_ls/article/details/8797740 这篇是基于上一篇Android仿人人客户端(v5.7.1)--对从服务器 ...

  4. Android仿人人客户端(v5.7.1)——通过HTTPS协议的POST方式获取用户的基本信息

    转载请标明出处:http://blog.csdn.net/android_ls/article/details/8770537 一.扩展之前的网络模块 基于Android仿人人客户端(v5.7.1)- ...

  5. Android仿人人客户端(v5.7.1)——采用RelativeLayout做父容器,实现左侧滑动菜单(二)...

    转载请标明出处:http://blog.csdn.net/android_ls/article/details/8758943 上一篇在Android仿人人客户端(v5.7.1)--应用主界面之滑动效 ...

  6. Android仿人人客户端(v5.7.1)——网络模块处理的架构

    转载请标明出处:http://blog.csdn.net/android_ls/article/details/8732427 声明:仿人人项目,所用所有图片资源都来源于官方人人android客户端, ...

  7. Android仿人人客户端(v5.7.1)——采用RelativeLayout做父容器,实现左侧滑动菜单(二)

    转载请标明出处:http://blog.csdn.net/android_ls/article/details/8758943 上一篇在Android仿人人客户端(v5.7.1)--应用主界面之滑动效 ...

  8. Android仿人人客户端(v5.7.1)——点击左侧菜单栏中的Item切换视图

    转载请标明出处:http://blog.csdn.net/android_ls/article/details/8765193 在前面几讲中,左侧菜单(左侧面板).满足滑动或点击子View的方式,打开 ...

  9. Android仿人人客户端(v5.7.1)——采用RelativeLayout做父容器,实现左侧滑动菜单(一)...

    转载请标明出处:http://blog.csdn.net/android_ls/article/details/8756059 一.滑动效果的实现原理: 1.采用RelativeLayout作为父容器 ...

最新文章

  1. 斯皮尔曼相关系数范围_数据的相关系数
  2. 取消tableView上面多出来20个像素
  3. 《构建之法》 读书笔记(3)
  4. 未来两年我们即将要读的Python书!
  5. Mac下使用数据库将Excel数据转换存入.plist
  6. 分布式多副本一致性协议:paxos
  7. springboot学习笔记-5 springboot整合shiro
  8. 嵌入Windows User Control到ASP.NET web form
  9. Hadoop Configuration 源码详解
  10. k3导入账套_金蝶K3财务操作流程
  11. 步进电机驱动器介绍 --PWM
  12. WEB系统中集成控制扫描仪解决方案
  13. 内向的人和陌生人聊天,如何做到有话可说
  14. 实数单竖线,向量双竖线,范数双竖线加下标,矩阵单竖线
  15. Qt5.3.1环境变量配置-----gyy
  16. xshell不能通过账户密码连接虚拟机
  17. 负载均衡服务器性能评估,性能测试:pgpool做负载均衡的性能评估
  18. java 根据PDF模板生成PDF文件并导出
  19. 使用Adobe Premiere Pro CC2015如何删除影片中的片段
  20. Linux系统离线安装phonopy

热门文章

  1. Jmeter模拟加密密码登录
  2. linux下mysql 8.0忘记密码后重置密码
  3. unity3d php js,【Unity开发】unity3d中的http通信?post/get
  4. win10开始屏幕计算机,为什么Win10系统开始屏幕没反应?解决Win10系统开始屏幕没反应的方法...
  5. linux中哪个命令可以压缩部分文件,可以使用Linux解压缩命令,解压缩任意格式的压缩文件。...
  6. mysql 导出并压缩_mysql压缩备份导入导出
  7. c语言有趣的编程代码,一个有趣的小程序
  8. httpservletresponse 重定向浏览器不变的原因_JavaWeb——Servlet——请求转发与响应重定向...
  9. vscode 清空缓存_如何清除Visual Studio Code的TypeScript的intellisense缓存?
  10. 线性回归和逻辑回归的区别_Spark实现线性回归与逻辑回归算法