Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> 實戰Android仿人人客戶端之應用主界面之左側面板UI實現

實戰Android仿人人客戶端之應用主界面之左側面板UI實現

編輯：Android開發實例

一、效果圖對比

       人人官方的主界面截圖：

        我仿的主界面之左側面板（仿，不一定要一樣，自己覺得看著不舒服的可以任意改，呵呵）截圖：

 

二、編碼具體實現

       1、Layout布局文件（left_panel.xml）

 

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:layout_width="fill_parent" 
  4.     android:layout_height="fill_parent" 
  5.     android:orientation="vertical" > 
  6.  
  7.     <LinearLayout 
  8.         android:layout_width="fill_parent" 
  9.         android:layout_height="wrap_content" 
  10.         android:background="@drawable/left_panel_top_bg" 
  11.         android:gravity="center_vertical" 
  12.         android:orientation="horizontal" 
  13.         android:padding="7dip" > 
  14.  
  15.         <ImageView 
  16.             android:id="@+id/iv_user_icon" 
  17.             android:layout_width="48dip" 
  18.             android:layout_height="48dip" 
  19.             android:scaleType="centerCrop" 
  20.             android:src="@drawable/v5_0_1_widget_default_head" /> 
  21.  
  22.         <TextView 
  23.             android:id="@+id/tv_nickname" 
  24.             android:layout_width="wrap_content" 
  25.             android:layout_height="wrap_content" 
  26.             android:layout_marginLeft="10dip" 
  27.             android:text="逐鹿。。。" 
  28.             android:textColor="#FFFFF0" 
  29.             android:textSize="17sp" /> 
  30.     </LinearLayout> 
  31.  
  32.     <ExpandableListView 
  33.         android:id="@+id/elv_list_view" 
  34.         android:layout_width="fill_parent" 
  35.         android:layout_height="wrap_content" 
  36.         android:layout_weight="1.0" 
  37.         android:cacheColorHint="#FFFFFF" 
  38.         android:childIndicator="@null" 
  39.         android:divider="@drawable/v5_0_1_flipper_head_popup_menu_black_divider" 
  40.         android:dividerHeight="1px" 
  41.         android:fadingEdge="none" 
  42.         android:footerDividersEnabled="false" 
  43.         android:groupIndicator="@null" 
  44.         android:headerDividersEnabled="false" 
  45.         android:listSelector="#00000000" 
  46.         android:scrollbars="none" /> 
  47.  
  48. </LinearLayout> 

       2、初始化組件，構建數據

             初始化組件

 

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

             構建分組數據

  1. Resources resources = this.getResources();  
  2. mGroupNames = resources.getStringArray(R.array.left_panel_group_names);  
  3.  
  4. String[] firstGroupNames = resources.getStringArray(R.array.left_panel_first_group_names);  
  5. String[] secondGroupNames = resources.getStringArray(R.array.left_panel_second_group_names);  
  6. String[] threeGroupNames = resources.getStringArray(R.array.left_panel_group_three_names);  
  7.  
  8. int[] firstGroupIcons = {   
  9.         R.drawable.left_panel_item_newsfeed_icon_selector,  
  10.         R.drawable.left_panel_item_message_icon_selector,  
  11.         R.drawable.left_panel_item_chat_icon_selector,  
  12.         R.drawable.left_panel_item_friends_icon_selector,  
  13.         R.drawable.left_panel_item_search_icon_selector};  
  14.  
  15. int[] secondGroupIcons = {  
  16.         R.drawable.left_panel_item_location_icon_selector,   
  17.         R.drawable.left_panel_item_mainpage_icon_selector,  
  18.         R.drawable.left_panel_item_hot_icon_selector,  
  19.         R.drawable.left_panel_item_apps_icon_selector };  
  20.  
  21. int[] threeGroupIcons = {  
  22.         R.drawable.left_panel_item_settings_icon_selector,   
  23.         R.drawable.left_panel_item_layout_icon_selector };  
  24.  
  25. addGroup(0, firstGroupNames, firstGroupIcons);  
  26. addGroup(1, secondGroupNames, secondGroupIcons);  
  27. addGroup(2, threeGroupNames, threeGroupIcons);  

 

       3、自定類繼承BaseExpandableListAdapter，實現左側面板ExpandableListView組件的數據適配器

  1. package com.everyone.android.adapter;  
  2.  
  3. import java.util.List;  
  4.  
  5. import android.content.Context;  
  6. import android.graphics.Color;  
  7. import android.util.TypedValue;  
  8. import android.view.Gravity;  
  9. import android.view.View;  
  10. import android.view.ViewGroup;  
  11. import android.widget.AbsListView;  
  12. import android.widget.BaseExpandableListAdapter;  
  13. import android.widget.LinearLayout;  
  14. import android.widget.TextView;  
  15.  
  16. import com.everyone.android.R;  
  17. import com.everyone.android.entity.LeftPanelListItem;  
  18.  
  19. /**  
  20.  * 功能描述：左側面板ExpandableListView組件數據適配器  
  21.  * @author android_ls  
  22.  *  
  23.  */ 
  24. public class LeftPanelExListViewAdapter extends BaseExpandableListAdapter {  
  25.  
  26.     private Context mContext;  
  27.  
  28.     private List<LeftPanelListItem> mListItems;  
  29.  
  30.     public LeftPanelExListViewAdapter(Context context, List<LeftPanelListItem> listItems) {  
  31.         mContext = context;  
  32.         mListItems = listItems;  
  33.     }  
  34.  
  35.     public LeftPanelListItem getChild(int groupPosition, int childPosition) {  
  36.         return mListItems.get(groupPosition).getGroups().get(childPosition);  
  37.     }  
  38.  
  39.     public long getChildId(int groupPosition, int childPosition) {  
  40.         return childPosition;  
  41.     }  
  42.  
  43.     public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {  
  44.         ViewHolder viewHolder = null;  
  45.         if (convertView == null) {  
  46.             convertView = getItemLayout(80, R.drawable.left_panel_item_selector, 18, Color.GRAY, 30);  
  47.  
  48.             viewHolder = new ViewHolder();  
  49.             viewHolder.groupName = (TextView) convertView.findViewById(0);  
  50.  
  51.             convertView.setTag(viewHolder);  
  52.         } else {  
  53.             viewHolder = (ViewHolder) convertView.getTag();  
  54.         }  
  55.  
  56.         LeftPanelListItem listItem = getChild(groupPosition, childPosition);  
  57.         viewHolder.groupName.setCompoundDrawablesWithIntrinsicBounds(listItem.getDrawableId(), 0, 0, 0);  
  58.         viewHolder.groupName.setCompoundDrawablePadding(10);  
  59.         viewHolder.groupName.setText(listItem.getName());  
  60.  
  61.         return convertView;  
  62.     }  
  63.  
  64.     public int getChildrenCount(int groupPosition) {  
  65.         return mListItems.get(groupPosition).getGroups().size();  
  66.     }  
  67.  
  68.     public LeftPanelListItem getGroup(int groupPosition) {  
  69.         return mListItems.get(groupPosition);  
  70.     }  
  71.  
  72.     public int getGroupCount() {  
  73.         return mListItems.size();  
  74.     }  
  75.  
  76.     public long getGroupId(int groupPosition) {  
  77.         return groupPosition;  
  78.     }  
  79.  
  80.     public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {  
  81.         ViewHolder viewHolder = null;  
  82.         if (convertView == null) {  
  83.             convertView = getItemLayout(60, R.drawable.v5_0_1_desktop_list_item, 15, Color.WHITE, 20);  
  84.  
  85.             viewHolder = new ViewHolder();  
  86.             viewHolder.groupName = (TextView) convertView.findViewById(0);  
  87.  
  88.             convertView.setTag(viewHolder);  
  89.         } else {  
  90.             viewHolder = (ViewHolder) convertView.getTag();  
  91.         }  
  92.  
  93.         viewHolder.groupName.setText(getGroup(groupPosition).getName());  
  94.         return convertView;  
  95.     }  
  96.  
  97.     public boolean hasStableIds() {  
  98.         return false;  
  99.     }  
  100.  
  101.     public boolean isChildSelectable(int groupPosition, int childPosition) {  
  102.         return true;  
  103.     }  
  104.  
  105.     static class ViewHolder {  
  106.         public TextView groupName;  
  107.     }  
  108.  
  109.     /**  
  110.      * 根據參數配置獲取相應的Layout  
  111.      * @param height Layout高度  
  112.      * @param backgroundId Layout的背景圖片ID  
  113.      * @param textSize 字體大小  
  114.      * @param txetColor 字體顏色  
  115.      * @param padding 文字距離左邊的大小（間距）  
  116.      * @return LinearLayout  
  117.      */ 
  118.     private LinearLayout getItemLayout(int height, int backgroundId, int textSize, int txetColor, int padding) {  
  119.         LinearLayout layout = new LinearLayout(mContext);  
  120.         AbsListView.LayoutParams lp = new AbsListView.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, height);  
  121.         layout.setBackgroundResource(backgroundId);  
  122.         layout.setGravity(Gravity.CENTER_VERTICAL);  
  123.         layout.setLayoutParams(lp);  
  124.  
  125.         TextView textView = new TextView(mContext);  
  126.         textView.setId(0);  
  127.         textView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));  
  128.         textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize);  
  129.         textView.setTextColor(txetColor);  
  130.         textView.setPadding(padding, 0, 0, 0);  
  131.         layout.addView(textView);  
  132.  
  133.         return layout;  
  134.     }  
  135.  
  136. }  
  137.  

 

       4、給ExpandableListView設置數據適配器，並默認讓所有組都展開

  1. mExListViewAdapter = new LeftPanelExListViewAdapter(this, mListItems);  
  2. mExpandableListView.setAdapter(mExListViewAdapter);  
  3.  
  4. // 設置默認讓所有組都展開  
  5. for (int i = 0; i < mListItems.size(); i++) {  
  6.     mExpandableListView.expandGroup(i);  
  7. }  

 

四、完整代碼

 strings.xml文件

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <resources> 
  3.     <string name="app_name">CopyEveryone</string> 
  4.  
  5.     <string-array name="left_panel_group_names"> 
  6.         <item>常用</item> 
  7.         <item>更多</item> 
  8.         <item>操作</item> 
  9.     </string-array> 
  10.     <string-array name="left_panel_first_group_names"> 
  11.         <item>新鮮事</item> 
  12.         <item>消息</item> 
  13.         <item>聊天</item> 
  14.         <item>好友</item> 
  15.         <item>找人</item> 
  16.     </string-array> 
  17.     <string-array name="left_panel_second_group_names"> 
  18.         <item>附近</item> 
  19.         <item>公共主頁</item> 
  20.         <item>熱門分享</item> 
  21.         <item>應用與游戲</item> 
  22.     </string-array> 
  23.     <string-array name="left_panel_group_three_names"> 
  24.         <item>選項</item> 
  25.         <item>注銷登錄</item> 
  26.     </string-array> 
  27.  
  28. </resources> 


左側面板的Item信息實體類

 

  1. package com.everyone.android.entity;  
  2.  
  3. import java.util.ArrayList;  
  4.  
  5. /**  
  6.  * 功能描述：左側面板Item信息  
  7.  * @author android_ls  
  8.  *  
  9.  */ 
  10. public class LeftPanelListItem {  
  11.  
  12.     private int id; // 唯一標識  
  13.  
  14.     private String name; // 操作項名稱  
  15.  
  16.     private int drawableId; // 指示圖標 #R.drawable.ic_launcher  
  17.  
  18.     private ArrayList<LeftPanelListItem> groups;  
  19.  
  20.     public int getId() {   
  21.         return id;  
  22.     }  
  23.  
  24.     public void setId(int id) {  
  25.         this.id = id;  
  26.     }  
  27.  
  28.     public String getName() {  
  29.         return name;  
  30.     }  
  31.  
  32.     public void setName(String name) {  
  33.         this.name = name;  
  34.     }  
  35.  
  36.     public int getDrawableId() {  
  37.         return drawableId;  
  38.     }  
  39.  
  40.     public void setDrawableId(int drawableId) {  
  41.         this.drawableId = drawableId;  
  42.     }  
  43.  
  44.     public ArrayList<LeftPanelListItem> getGroups() {  
  45.         return groups;  
  46.     }  
  47.  
  48.     public void setGroups(ArrayList<LeftPanelListItem> groups) {  
  49.         this.groups = groups;  
  50.     }  
  51.  
  52. }  
  53.  


仿人人主界面之左側面板（LeftPanelActivity類）源碼：


 

  1. package com.everyone.android.ui;  
  2.  
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.  
  6. import android.content.res.Resources;  
  7. import android.os.Bundle;  
  8. import android.widget.ExpandableListView;  
  9. import android.widget.ImageView;  
  10. import android.widget.TextView;  
  11.  
  12. import com.everyone.android.AppBaseActivity;  
  13. import com.everyone.android.R;  
  14. import com.everyone.android.adapter.LeftPanelExListViewAdapter;  
  15. import com.everyone.android.entity.LeftPanelListItem;  
  16. /**  
  17.  * 功能描述：仿人人主界面之左側面板  
  18.  * @author android_ls  
  19.  *  
  20.  */ 
  21. public class LeftPanelActivity extends AppBaseActivity {  
  22.  
  23.     /**  
  24.      * 用戶圖標顯示組件  
  25.      */ 
  26.     private ImageView ivUserIcon;  
  27.  
  28.     /**  
  29.      * 用戶名稱顯示組件  
  30.      */ 
  31.     private TextView tvNickname;  
  32.  
  33.     /**  
  34.      * 可展開的ListView組件  
  35.      */ 
  36.     private ExpandableListView mExpandableListView;  
  37.  
  38.     /**  
  39.      * ExpandableListView組件的數據適配器  
  40.      */ 
  41.     private LeftPanelExListViewAdapter mExListViewAdapter;  
  42.  
  43.     /**  
  44.      * ExpandableListView組件的數據源  
  45.      */ 
  46.     private List<LeftPanelListItem> mListItems = new ArrayList<LeftPanelListItem>();  
  47.  
  48.     /**  
  49.      * 分組名數組  
  50.      */ 
  51.     private String[] mGroupNames;  
  52.  
  53.     @Override 
  54.     public void onCreate(Bundle savedInstanceState) {  
  55.         super.onCreate(savedInstanceState);  
  56.  
  57.     }  
  58.  
  59.     @Override 
  60.     protected void setupView() {  
  61.         ivUserIcon = (ImageView) findViewById(R.id.iv_user_icon);  
  62.         tvNickname = (TextView) findViewById(R.id.tv_nickname);  
  63.         mExpandableListView = (ExpandableListView) findViewById(R.id.elv_list_view);  
  64.  
  65.     }  
  66.  
  67.     @Override 
  68.     protected int getLayoutId() {  
  69.         return R.layout.left_panel;  
  70.     }  
  71.  
  72.     @Override 
  73.     protected void initializedData() {  
  74.         Resources resources = this.getResources();  
  75.         mGroupNames = resources.getStringArray(R.array.left_panel_group_names);  
  76.  
  77.         String[] firstGroupNames = resources.getStringArray(R.array.left_panel_first_group_names);  
  78.         String[] secondGroupNames = resources.getStringArray(R.array.left_panel_second_group_names);  
  79.         String[] threeGroupNames = resources.getStringArray(R.array.left_panel_group_three_names);  
  80.  
  81.         int[] firstGroupIcons = {   
  82.                 R.drawable.left_panel_item_newsfeed_icon_selector,  
  83.                 R.drawable.left_panel_item_message_icon_selector,  
  84.                 R.drawable.left_panel_item_chat_icon_selector,  
  85.                 R.drawable.left_panel_item_friends_icon_selector,  
  86.                 R.drawable.left_panel_item_search_icon_selector};  
  87.  
  88.         int[] secondGroupIcons = {  
  89.                 R.drawable.left_panel_item_location_icon_selector,   
  90.                 R.drawable.left_panel_item_mainpage_icon_selector,  
  91.                 R.drawable.left_panel_item_hot_icon_selector,  
  92.                 R.drawable.left_panel_item_apps_icon_selector };  
  93.  
  94.         int[] threeGroupIcons = {  
  95.                 R.drawable.left_panel_item_settings_icon_selector,   
  96.                 R.drawable.left_panel_item_layout_icon_selector };  
  97.  
  98.         addGroup(0, firstGroupNames, firstGroupIcons);  
  99.         addGroup(1, secondGroupNames, secondGroupIcons);  
  100.         addGroup(2, threeGroupNames, threeGroupIcons);  
  101.  
  102.         mExListViewAdapter = new LeftPanelExListViewAdapter(this, mListItems);  
  103.         mExpandableListView.setAdapter(mExListViewAdapter);  
  104.  
  105.         // 設置默認讓所有組都展開  
  106.         for (int i = 0; i < mListItems.size(); i++) {  
  107.             mExpandableListView.expandGroup(i);  
  108.         }  
  109.           
  110.     }  
  111.  
  112.     /**  
  113.      * 添加數據到指定的組  
  114.      * @param groupId 組ID  
  115.      * @param names 子項的名字數組  
  116.      * @param icons 子項的圖標數組  
  117.      */ 
  118.     private void addGroup(int groupId, String[] names, int[] icons) {  
  119.         LeftPanelListItem listItem = new LeftPanelListItem();  
  120.         listItem.setId(groupId);  
  121.         listItem.setName(mGroupNames[groupId]);  
  122.         // 組沒有操作指示圖標  
  123.         // listItem.setDrawableId(drawableId);  
  124.  
  125.         ArrayList<LeftPanelListItem> firstGroup = new ArrayList<LeftPanelListItem>();  
  126.         for (int i = 0; i < names.length; i++) {  
  127.             LeftPanelListItem firstGroupItem = new LeftPanelListItem();  
  128.             firstGroupItem.setId(i);  
  129.             firstGroupItem.setName(names[i]);  
  130.             firstGroupItem.setDrawableId(icons[i]);  
  131.  
  132.             // 可以無限延伸  
  133.             // firstGroupItem.setGroups(null);  
  134.             firstGroup.add(firstGroupItem);  
  135.         }  
  136.  
  137.         listItem.setGroups(firstGroup);  
  138.         mListItems.add(listItem);  
  139.     }  
  140.  
  141. }  

 

轉自：http://blog.csdn.net/android_ls/article/details/8749188

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android 小項目之--消息、線程、動畫顯示圖片（附源碼） Android UI設計技巧 Android imageView動畫效果 Android 使用XML做動畫UI的深入解析 Android開發之旅：HelloWorld項目的目錄結構 Android提高之SurfaceView與多線程的混搭實例
listview 選中高亮顯示實現方法

人人客戶端有一個很好的導航欄，如下圖所示，當點擊左側ListVi
Android MediaPlayer(多媒體播放)

Android提供了許多方法來控制播放的音頻/視頻文件和流。其中該方法是
Android加載Spinner

可以顯示在的Android任務，通過加載進度條的進展。進度條有兩種形狀。
Android JSON解析器

JSON代表JavaScript對象符號。它是一個獨立的數據交換格式，是
閱讀排行版
Copyright © Android教程網 All Rights Reserved