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

一、效果图对比

       人人官方的主界面截图：

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

 

二、编码具体实现

       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, inttxetColor, int padding) {

        LinearLayout layout = new LinearLayout(mContext);

        AbsListView.LayoutParams lp = newAbsListView.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(newLinearLayout.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);

    }

 

}