[置顶] 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); } }
时间不早了,先到这里吧,后面的待续。。。