Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> 實戰Android仿人人客戶端之點擊左側菜單欄中的Item切換視圖

實戰Android仿人人客戶端之點擊左側菜單欄中的Item切換視圖

編輯：Android開發實例

       在前面幾講中，左側菜單（左側面板）、滿足滑動或點擊子View的方式，打開左側菜單的父容器和新鮮事視圖（雛形）已基本完成，這一篇我們將主界面的整個視圖框架完善下，實現點擊左側菜單切換右側視圖的功能。

一、添加消息中心視圖

       通過觀察，發現消息中心與新鮮事視圖的頂部導航欄（工具欄）非常類似，既然類似就自定義組件，在兩個視圖需要用到的位置包含進去就可以了，降低代碼冗余度。

       頂部導航欄的布局文件（top_menu_navbar.xml）：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:layout_width="fill_parent" 
  3.     android:layout_height="fill_parent" > 
  4.  
  5.     <LinearLayout 
  6.         android:id="@+id/ll_back" 
  7.         android:layout_width="60dip" 
  8.         android:layout_height="fill_parent" 
  9.         android:background="@drawable/v5_0_1_flipper_head_title_wrapper_background" 
  10.         android:gravity="center_vertical" > 
  11.  
  12.         <ImageView 
  13.             android:id="@+id/iv_back" 
  14.             android:layout_width="wrap_content" 
  15.             android:layout_height="wrap_content" 
  16.             android:layout_marginLeft="15dip" 
  17.             android:src="@drawable/v5_0_1_flipper_head_flip" /> 
  18.     </LinearLayout> 
  19.  
  20.     <ImageView 
  21.         android:id="@+id/iv_line_separator" 
  22.         android:layout_width="1dip" 
  23.         android:layout_height="25dip" 
  24.         android:layout_centerVertical="true" 
  25.         android:layout_toRightOf="@+id/ll_back" 
  26.         android:background="@drawable/v5_0_1_flipper_head_separator" /> 
  27.  
  28.     <LinearLayout 
  29.         android:id="@+id/ll_down_list" 
  30.         android:layout_width="wrap_content" 
  31.         android:layout_height="fill_parent" 
  32.         android:layout_marginLeft="5dip" 
  33.         android:layout_toRightOf="@+id/iv_line_separator" 
  34.         android:background="@drawable/v5_0_1_flipper_head_title_wrapper_background" > 
  35.  
  36.         <TextView 
  37.             android:id="@+id/tv_title" 
  38.             android:layout_width="wrap_content" 
  39.             android:layout_height="wrap_content" 
  40.             android:layout_gravity="center_vertical" 
  41.             android:layout_marginLeft="5dip" 
  42.             android:text="新鮮事" 
  43.             android:textColor="#FFFFFF" 
  44.             android:textSize="17dip" 
  45.             android:textStyle="bold" /> 
  46.  
  47.         <ImageView 
  48.             android:id="@+id/iv_down_list_icon" 
  49.             android:layout_width="wrap_content" 
  50.             android:layout_height="wrap_content" 
  51.             android:layout_gravity="bottom" 
  52.             android:layout_marginBottom="3dip" 
  53.             android:layout_marginLeft="5dip" 
  54.             android:layout_marginRight="5dip" 
  55.             android:src="@drawable/v5_0_1_flipper_head_title_corner" /> 
  56.     </LinearLayout> 
  57.  
  58.     <ImageView 
  59.         android:id="@+id/iv_right_line" 
  60.         android:layout_width="1dip" 
  61.         android:layout_height="25dip" 
  62.         android:layout_centerVertical="true" 
  63.         android:layout_toLeftOf="@+id/ll_refresh" 
  64.         android:background="@drawable/v5_0_1_flipper_head_separator" /> 
  65.  
  66.     <LinearLayout 
  67.         android:id="@+id/ll_refresh" 
  68.         android:layout_width="60dip" 
  69.         android:layout_height="fill_parent" 
  70.         android:layout_alignParentRight="true" 
  71.         android:background="@drawable/v5_0_1_flipper_head_title_wrapper_background" 
  72.         android:gravity="center" > 
  73.  
  74.         <TextView 
  75.             android:id="@+id/tv_right_operation_name" 
  76.             android:layout_width="wrap_content" 
  77.             android:layout_height="wrap_content" 
  78.             android:layout_gravity="center_vertical" 
  79.             android:layout_marginLeft="5dip" 
  80.             android:text="編輯" 
  81.             android:textColor="#FFFFFF" 
  82.             android:textSize="17dip" 
  83.             android:textStyle="bold" /> 
  84.  
  85.         <ImageView 
  86.             android:id="@+id/iv_refresh" 
  87.             android:layout_width="wrap_content" 
  88.             android:layout_height="wrap_content" 
  89.             android:src="@drawable/refresh_icon" /> 
  90.     </LinearLayout> 
  91.  
  92. </RelativeLayout> 

 

       頂部導航欄的Java文件：

  1. package com.everyone.android.widget;  
  2.  
  3. import android.content.Context;  
  4. import android.util.AttributeSet;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.widget.FrameLayout;  
  8. import android.widget.ImageView;  
  9. import android.widget.LinearLayout;  
  10. import android.widget.RelativeLayout;  
  11. import android.widget.TextView;  
  12.  
  13. import com.everyone.android.R;  
  14. import com.everyone.android.api.OnMenuClickListener;  
  15.  
  16. /**  
  17.  * 功能描述：自定義頂部菜單欄  
  18.  * @author android_ls  
  19.  */ 
  20. public class TopMenuNavbar extends FrameLayout {  
  21.  
  22.     // 打開左側菜單的組件  
  23.     private LinearLayout llShowMenu;  
  24.  
  25.     /**  
  26.      * 下拉列表  
  27.      */ 
  28.     public LinearLayout mLlDownList;  
  29.  
  30.     /**  
  31.      * 當前的標題  
  32.      */ 
  33.     public TextView tvTitle;  
  34.  
  35.     /**  
  36.      * 下拉標識  
  37.      */ 
  38.     public ImageView ivDownListIcon;  
  39.  
  40.     /**  
  41.      * 刷新圖標  
  42.      */ 
  43.     public ImageView ivRefresh;  
  44.  
  45.     /**  
  46.      * 右側操作（動作）的名稱  
  47.      */ 
  48.     public TextView tvRightOperationName;  
  49.  
  50.     /**  
  51.      * 右側豎直分割線  
  52.      */ 
  53.     public ImageView ivRightLine;  
  54.  
  55.     /**  
  56.      * 右側的操作觸控組件  
  57.      */ 
  58.     public LinearLayout mLlRefresh;  
  59.  
  60.     /**  
  61.      * 打開左側菜單的組件的事件監聽器  
  62.      */ 
  63.     private OnMenuClickListener mOnClickListener;  
  64.  
  65.     public TopMenuNavbar(Context context) {  
  66.         super(context);  
  67.         setupViews();  
  68.     }  
  69.  
  70.     public TopMenuNavbar(Context context, AttributeSet attrs) {  
  71.         super(context, attrs);  
  72.         setupViews();  
  73.     }  
  74.  
  75.     public void setOnClickListener(OnMenuClickListener onClickListener) {  
  76.         mOnClickListener = onClickListener;  
  77.     }  
  78.  
  79.     private void setupViews() {  
  80.         final LayoutInflater mLayoutInflater = LayoutInflater.from(getContext());  
  81.         RelativeLayout rlTopNavbar = (RelativeLayout) mLayoutInflater.inflate(R.layout.top_menu_navbar, null);  
  82.         addView(rlTopNavbar);  
  83.  
  84.         llShowMenu = (LinearLayout) rlTopNavbar.findViewById(R.id.ll_back);  
  85.         mLlDownList = (LinearLayout) rlTopNavbar.findViewById(R.id.ll_down_list);  
  86.         mLlRefresh = (LinearLayout) rlTopNavbar.findViewById(R.id.ll_refresh);  
  87.  
  88.         tvTitle = (TextView) rlTopNavbar.findViewById(R.id.tv_title);  
  89.         tvRightOperationName = (TextView) rlTopNavbar.findViewById(R.id.tv_right_operation_name);  
  90.         ivDownListIcon = (ImageView) rlTopNavbar.findViewById(R.id.iv_down_list_icon);  
  91.         ivRefresh = (ImageView) rlTopNavbar.findViewById(R.id.iv_refresh);  
  92.         ivRightLine = (ImageView) rlTopNavbar.findViewById(R.id.iv_right_line);  
  93.  
  94.         llShowMenu.setOnClickListener(new View.OnClickListener() {  
  95.  
  96.             @Override 
  97.             public void onClick(View v) {  
  98.                 if (mOnClickListener != null) {  
  99.                     mOnClickListener.onClick();  
  100.                 }  
  101.             }  
  102.         });  
  103.     }  
  104.  
  105. }  
  106.  

 

       消息中心視圖的布局文件（message.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:background="#FFFFFF" 
  6.     android:orientation="vertical" > 
  7.  
  8.     <com.everyone.android.widget.TopMenuNavbar 
  9.         android:id="@+id/rl_top_menu_navbar" 
  10.         style="@style/top_navbar" /> 
  11.  
  12. </LinearLayout> 

 

       消息中心視圖的Java文件：

  1. package com.everyone.android.widget;  
  2.  
  3. import android.content.Context;  
  4. import android.util.AttributeSet;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.View.OnClickListener;  
  8. import android.widget.FrameLayout;  
  9. import android.widget.LinearLayout;  
  10.  
  11. import com.everyone.android.R;  
  12.  
  13. /**  
  14.  * 功能描述：消息中心視圖  
  15.  * @author android_ls  
  16.  */ 
  17. public class MessageLayout extends FrameLayout implements OnClickListener {  
  18.  
  19.     private TopMenuNavbar topMenuNavbar;  
  20.  
  21.     public TopMenuNavbar getTopMenuNavbar() {  
  22.         return topMenuNavbar;  
  23.     }  
  24.  
  25.     public MessageLayout(Context context) {  
  26.         super(context);  
  27.         setupViews();  
  28.     }  
  29.  
  30.     public MessageLayout(Context context, AttributeSet attrs) {  
  31.         super(context, attrs);  
  32.         setupViews();  
  33.     }  
  34.  
  35.     private void setupViews() {  
  36.         final LayoutInflater mLayoutInflater = LayoutInflater.from(getContext());  
  37.         LinearLayout rlTopNavbar = (LinearLayout) mLayoutInflater.inflate(R.layout.message, null);  
  38.         addView(rlTopNavbar);  
  39.  
  40.         topMenuNavbar = (TopMenuNavbar) rlTopNavbar.findViewById(R.id.rl_top_menu_navbar);  
  41.         topMenuNavbar.mLlRefresh.setOnClickListener(this);  
  42.  
  43.         topMenuNavbar.tvTitle.setText("消息中心");  
  44.         topMenuNavbar.ivDownListIcon.setVisibility(View.GONE);  
  45.         topMenuNavbar.ivRefresh.setVisibility(View.GONE);  
  46.  
  47.     }  
  48.  
  49.     @Override 
  50.     public void onClick(View v) {  
  51.         switch (v.getId()) {  
  52.         case R.id.ll_refresh:  
  53.  
  54.             break;  
  55.         default:  
  56.             break;  
  57.         }  
  58.  
  59.     }  
  60.       
  61. }  
  62.  

 

二、修改新鮮事視圖

       修改後的新鮮事視圖布局文件（fresh_news.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:background="#FFFFFF" 
  6.     android:orientation="vertical" > 
  7.  
  8.     <com.everyone.android.widget.TopMenuNavbar 
  9.         android:id="@+id/rl_top_menu_navbar" 
  10.         style="@style/top_navbar" /> 
  11.       
  12. </LinearLayout> 

 

       修改後的新鮮事視圖的Java文件：

  1. package com.everyone.android.widget;  
  2.  
  3. import android.content.Context;  
  4. import android.util.AttributeSet;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.View.OnClickListener;  
  8. import android.widget.FrameLayout;  
  9. import android.widget.LinearLayout;  
  10.  
  11. import com.everyone.android.R;  
  12.  
  13. /**  
  14.  * 功能描述：新鮮事視圖  
  15.  * @author android_ls  
  16.  */ 
  17. public class FreshNewsLayout extends FrameLayout implements OnClickListener {  
  18.  
  19.     private TopMenuNavbar topMenuNavbar;  
  20.       
  21.     public TopMenuNavbar getTopMenuNavbar() {  
  22.         return topMenuNavbar;  
  23.     }  
  24.  
  25.     public FreshNewsLayout(Context context) {  
  26.         super(context);  
  27.         setupViews();  
  28.     }  
  29.  
  30.     public FreshNewsLayout(Context context, AttributeSet attrs) {  
  31.         super(context, attrs);  
  32.         setupViews();  
  33.     }  
  34.  
  35.     private void setupViews() {  
  36.         final LayoutInflater mLayoutInflater = LayoutInflater.from(getContext());  
  37.         LinearLayout rlTopNavbar = (LinearLayout) mLayoutInflater.inflate(R.layout.fresh_news, null);  
  38.         addView(rlTopNavbar);  
  39.           
  40.         topMenuNavbar = (TopMenuNavbar) rlTopNavbar.findViewById(R.id.rl_top_menu_navbar);  
  41.         topMenuNavbar.mLlDownList.setOnClickListener(this);  
  42.         topMenuNavbar.mLlRefresh.setOnClickListener(this);  
  43.         topMenuNavbar.ivRightLine.setVisibility(View.GONE);  
  44.         topMenuNavbar.tvRightOperationName.setVisibility(View.GONE);  
  45.           
  46.     }  
  47.  
  48.     @Override 
  49.     public void onClick(View v) {  
  50.         switch (v.getId()) {  
  51.         case R.id.ll_down_list:  
  52.  
  53.             break;  
  54.         case R.id.ll_refresh:  
  55.  
  56.             break;  
  57.         default:  
  58.             break;  
  59.         }  
  60.  
  61.     }  
  62.       
  63. }  
  64.  

 

三、左側菜單欄添加選中的Item事件監聽器

       點擊左側菜單中某個組的Item後，要實現切換父容器中的視圖，那麼左側菜單對象就得持有父容器（我們自定義的滿足滑動顯示或隱藏左側菜單的ViewGroup）和各個視圖的引用。這樣，等於左側菜單與父容器和各個要切換的視圖都關聯起來了，也就是左側菜單與其它對象的耦合度高了，編寫代碼也變得復雜。如果硬要這麼做，有錯嗎？沒有。不過我不想這麼寫，在左側菜單類添加接口，將每次用戶單擊的Item的位置信息傳到外部。我們讓主界面Activity類去實現該接口，完成左側菜單拋出去的要響應的事件。（這塊不是很好描述，或者是我表達能力的問題吧。）

        在父容器（ScrollerContainer）中添加切換視圖的方法：

 

  1. /**  
  2.    * 切換視圖  
  3.    * @param view  
  4.    */ 
  5.   public void show(View view) {  
  6.       mPanelInvisible = false;  
  7.         
  8.       int scrollX = getChildAt(1).getScrollX();  
  9.       mScroller.startScroll(scrollX, 0, -scrollX, 0, ANIMATION_DURATION_TIME);  
  10.       invalidate();  
  11.         
  12.       removeViewAt(1);  
  13.       addView(view, 1, getLayoutParams());  
  14.   }  

        對外的接口：

  1. /**  
  2.    * 設置選中的Item事件監聽器  
  3.    * @param seletedListener  
  4.    */ 
  5.   public void setOnSeletedListener(onSeletedListener seletedListener) {  
  6.       mOnSeletedListener = seletedListener;  
  7.   }  
  8.  
  9.   /**  
  10.    * 選中的Item事件監聽器  
  11.    * @author android_ls  
  12.    */ 
  13.   public interface onSeletedListener {  
  14.       /**  
  15.        * 當前選中的Item事件處理器  
  16.        * @param groupPosition 所屬組Id  
  17.        * @param childPosition 在所屬組內的位置  
  18.        */ 
  19.       public abstract void seletedChildView(int groupPosition, int childPosition);  
  20.   }  

      組的Item單擊事件監聽器：

  1. mExpandableListView.setOnChildClickListener(new OnChildClickListener() {  
  2.  
  3.    @Override 
  4.    public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {  
  5.        if (mOnSeletedListener == null) {  
  6.            return false;  
  7.        }  
  8.  
  9.        mGroupPosition = groupPosition;  
  10.        mChildPosition = childPosition;  
  11.  
  12.        mOnSeletedListener.seletedChildView(groupPosition, childPosition);  
  13.        return true;  
  14.    }  
  15. );  

 

      左側菜單修改後的完整源碼：

  1. package com.everyone.android.widget;  
  2.  
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.  
  6. import android.content.Context;  
  7. import android.content.res.Resources;  
  8. import android.util.AttributeSet;  
  9. import android.view.LayoutInflater;  
  10. import android.view.View;  
  11. import android.widget.ExpandableListView;  
  12. import android.widget.ExpandableListView.OnChildClickListener;  
  13. import android.widget.ExpandableListView.OnGroupClickListener;  
  14. import android.widget.FrameLayout;  
  15. import android.widget.ImageView;  
  16. import android.widget.LinearLayout;  
  17. import android.widget.TextView;  
  18.  
  19. import com.everyone.android.R;  
  20. import com.everyone.android.adapter.LeftPanelExListViewAdapter;  
  21. import com.everyone.android.entity.LeftPanelListItem;  
  22.  
  23. /**  
  24.  * 功能描述：仿人人主界面之左側面板  
  25.  * @author android_ls  
  26.  *  
  27.  */ 
  28. public class LeftPanelLayout extends FrameLayout {  
  29.  
  30.     /**  
  31.      * 用戶圖標顯示組件  
  32.      */ 
  33.     public ImageView ivUserIcon;  
  34.  
  35.     /**  
  36.      * 用戶名稱顯示組件  
  37.      */ 
  38.     public TextView tvNickname;  
  39.  
  40.     /**  
  41.      * 可展開的ListView組件  
  42.      */ 
  43.     private ExpandableListView mExpandableListView;  
  44.  
  45.     /**  
  46.      * ExpandableListView組件的數據適配器  
  47.      */ 
  48.     private LeftPanelExListViewAdapter mExListViewAdapter;  
  49.  
  50.     /**  
  51.      * ExpandableListView組件的數據源  
  52.      */ 
  53.     private List<LeftPanelListItem> mListItems = new ArrayList<LeftPanelListItem>();  
  54.  
  55.     /**  
  56.      * 分組名數組  
  57.      */ 
  58.     private String[] mGroupNames;  
  59.  
  60.     private onSeletedListener mOnSeletedListener;  
  61.  
  62.     private int mGroupPosition;  
  63.  
  64.     private int mChildPosition;  
  65.  
  66.     public LeftPanelLayout(Context context) {  
  67.         super(context);  
  68.         setupViews();  
  69.     }  
  70.  
  71.     public LeftPanelLayout(Context context, AttributeSet attrs) {  
  72.         super(context, attrs);  
  73.         setupViews();  
  74.     }  
  75.  
  76.     private void setupViews() {  
  77.         final LayoutInflater mInflater = LayoutInflater.from(getContext());  
  78.         LinearLayout viewRoot = (LinearLayout) mInflater.inflate(R.layout.left_panel, null);  
  79.         addView(viewRoot);  
  80.  
  81.         ivUserIcon = (ImageView) viewRoot.findViewById(R.id.iv_user_icon);  
  82.         tvNickname = (TextView) viewRoot.findViewById(R.id.tv_nickname);  
  83.         mExpandableListView = (ExpandableListView) viewRoot.findViewById(R.id.elv_list_view);  
  84.  
  85.         initialized();  
  86.     }  
  87.  
  88.     private void initialized() {  
  89.         Resources resources = this.getResources();  
  90.         mGroupNames = resources.getStringArray(R.array.left_panel_group_names);  
  91.  
  92.         String[] firstGroupNames = resources.getStringArray(R.array.left_panel_first_group_names);  
  93.         String[] secondGroupNames = resources.getStringArray(R.array.left_panel_second_group_names);  
  94.         String[] threeGroupNames = resources.getStringArray(R.array.left_panel_group_three_names);  
  95.  
  96.         int[] firstGroupIcons = {   
  97.                 R.drawable.left_panel_item_newsfeed_icon_selector,   
  98.                 R.drawable.left_panel_item_message_icon_selector,  
  99.                 R.drawable.left_panel_item_chat_icon_selector,   
  100.                 R.drawable.left_panel_item_friends_icon_selector,  
  101.                 R.drawable.left_panel_item_search_icon_selector };  
  102.  
  103.         int[] secondGroupIcons = {   
  104.                 R.drawable.left_panel_item_location_icon_selector,   
  105.                 R.drawable.left_panel_item_mainpage_icon_selector,  
  106.                 R.drawable.left_panel_item_hot_icon_selector,  
  107.                 R.drawable.left_panel_item_apps_icon_selector };  
  108.  
  109.         int[] threeGroupIcons = {   
  110.                 R.drawable.left_panel_item_settings_icon_selector,  
  111.                 R.drawable.left_panel_item_layout_icon_selector };  
  112.  
  113.         addGroup(0, firstGroupNames, firstGroupIcons);  
  114.         addGroup(1, secondGroupNames, secondGroupIcons);  
  115.         addGroup(2, threeGroupNames, threeGroupIcons);  
  116.  
  117.         mExListViewAdapter = new LeftPanelExListViewAdapter(getContext(), mListItems);  
  118.         mExpandableListView.setAdapter(mExListViewAdapter);  
  119.  
  120.         // 設置默認讓所有組都展開  
  121.         for (int i = 0; i < mListItems.size(); i++) {  
  122.             mExpandableListView.expandGroup(i);  
  123.         }  
  124.  
  125.         // 設置OnGroupClick時，不再展開或收縮組內的子項  
  126.         mExpandableListView.setOnGroupClickListener(new OnGroupClickListener() {  
  127.  
  128.             @Override 
  129.             public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {  
  130.                 // 表示GroupItem的單擊事件已被處理  
  131.                 return true;  
  132.             }  
  133.  
  134.         });  
  135.  
  136.         mExpandableListView.setOnChildClickListener(new OnChildClickListener() {  
  137.  
  138.             @Override 
  139.             public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {  
  140.                 if (mOnSeletedListener == null) {  
  141.                     return false;  
  142.                 }  
  143.  
  144.                 mGroupPosition = groupPosition;  
  145.                 mChildPosition = childPosition;  
  146.  
  147.                 mOnSeletedListener.seletedChildView(groupPosition, childPosition);  
  148.                 return true;  
  149.             }  
  150.         });  
  151.     }  
  152.  
  153.     /**  
  154.      * 添加數據到指定的組  
  155.      * @param groupId 組ID  
  156.      * @param names 子項的名字數組  
  157.      * @param icons 子項的圖標數組  
  158.      */ 
  159.     private void addGroup(int groupId, String[] names, int[] icons) {  
  160.         LeftPanelListItem listItem = new LeftPanelListItem();  
  161.         listItem.setId(groupId);  
  162.         listItem.setName(mGroupNames[groupId]);  
  163.         // 組沒有操作指示圖標  
  164.         // listItem.setDrawableId(drawableId);  
  165.  
  166.         ArrayList<LeftPanelListItem> firstGroup = new ArrayList<LeftPanelListItem>();  
  167.         for (int i = 0; i < names.length; i++) {  
  168.             LeftPanelListItem firstGroupItem = new LeftPanelListItem();  
  169.             firstGroupItem.setId(i);  
  170.             firstGroupItem.setName(names[i]);  
  171.             firstGroupItem.setDrawableId(icons[i]);  
  172.  
  173.             // 可以無限延伸  
  174.             // firstGroupItem.setGroups(null);  
  175.             firstGroup.add(firstGroupItem);  
  176.         }  
  177.  
  178.         listItem.setGroups(firstGroup);  
  179.         mListItems.add(listItem);  
  180.     }  
  181.  
  182.     /**  
  183.      * 設置選中的Item事件監聽器  
  184.      * @param seletedListener  
  185.      */ 
  186.     public void setOnSeletedListener(onSeletedListener seletedListener) {  
  187.         mOnSeletedListener = seletedListener;  
  188.     }  
  189.  
  190.     /**  
  191.      * 選中的Item事件監聽器  
  192.      * @author android_ls  
  193.      */ 
  194.     public interface onSeletedListener {  
  195.         /**  
  196.          * 當前選中的Item事件處理器  
  197.          * @param groupPosition 所屬組Id  
  198.          * @param childPosition 在所屬組內的位置  
  199.          */ 
  200.         public abstract void seletedChildView(int groupPosition, int childPosition);  
  201.     }  
  202.  
  203. }  


四、應用主界面源碼：

  1. package com.everyone.android.ui;  
  2.  
  3. import android.os.Bundle;  
  4. import android.view.ViewGroup.LayoutParams;  
  5.  
  6. import com.everyone.android.AppBaseActivity;  
  7. import com.everyone.android.api.OnMenuClickListener;  
  8. import com.everyone.android.widget.FreshNewsLayout;  
  9. import com.everyone.android.widget.LeftPanelLayout;  
  10. import com.everyone.android.widget.LeftPanelLayout.onSeletedListener;  
  11. import com.everyone.android.widget.MessageLayout;  
  12. import com.everyone.android.widget.ScrollerContainer;  
  13.  
  14. /**  
  15.  * 功能描述：應用主界面  
  16.  * @author android_ls  
  17.  */ 
  18. public class EveryoneActivity extends AppBaseActivity implements OnMenuClickListener, onSeletedListener {  
  19.  
  20.     /**  
  21.      * 滾動（滑動）容器  
  22.      */ 
  23.     private ScrollerContainer mSlideContainer;  
  24.  
  25.     /**  
  26.      * 左側面板  
  27.      */ 
  28.     private LeftPanelLayout mLeftPanelLayout;  
  29.  
  30.     /**  
  31.      * 新鮮事  
  32.      */ 
  33.     private FreshNewsLayout mFreshNewsLayout;  
  34.  
  35.     /**  
  36.      * 消息  
  37.      */ 
  38.     private MessageLayout mMessageLayout;  
  39.       
  40.     @Override 
  41.     public void onCreate(Bundle savedInstanceState) {  
  42.         super.onCreate(savedInstanceState);  
  43.         setContentView(mSlideContainer);  
  44.           
  45.     }  
  46.       
  47.     @Override 
  48.     protected int getLayoutId() {  
  49.         return 0;  
  50.     }  
  51.  
  52.     @Override 
  53.     protected void setupView() {  
  54.         mSlideContainer = new ScrollerContainer(mContext);  
  55.         mLeftPanelLayout = new LeftPanelLayout(mContext);  
  56.         mLeftPanelLayout.setOnSeletedListener(this);  
  57.           
  58.         mFreshNewsLayout = new FreshNewsLayout(mContext);  
  59.         mMessageLayout = new MessageLayout(mContext);  
  60.          
  61.         mFreshNewsLayout.getTopMenuNavbar().setOnClickListener(this);  
  62.         mMessageLayout.getTopMenuNavbar().setOnClickListener(this);  
  63.  
  64.         LayoutParams layoutParams = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);  
  65.         mSlideContainer.addView(mLeftPanelLayout, 0, layoutParams);  
  66.         mSlideContainer.addView(mFreshNewsLayout, 1, layoutParams);  
  67.     }  
  68.  
  69.     @Override 
  70.     protected void initialized() {  
  71.         // TODO Auto-generated method stub  
  72.  
  73.     }  
  74.  
  75.     @Override 
  76.     public void onClick() {  
  77.         mSlideContainer.show();  
  78.     }  
  79.  
  80.     @Override 
  81.     public void seletedChildView(int groupPosition, int childPosition) {  
  82.         switch (groupPosition) {  
  83.         case 0: // 第一組  
  84.  
  85.             switch (childPosition) {  
  86.             case 0:  
  87.                 mSlideContainer.show(mFreshNewsLayout);  
  88.                 break;  
  89.             case 1:  
  90.                 mSlideContainer.show(mMessageLayout);  
  91.                 break;  
  92.             case 2:  
  93.  
  94.                 break;  
  95.             case 3:  
  96.  
  97.                 break;  
  98.             case 4:  
  99.  
  100.                 break;  
  101.  
  102.             default:  
  103.                 break;  
  104.             }  
  105.               
  106.             break;  
  107.         case 1: // 第二組  
  108.             switch (childPosition) {  
  109.             case 0:  
  110.  
  111.                 break;  
  112.             case 1:  
  113.  
  114.                 break;  
  115.             case 2:  
  116.  
  117.                 break;  
  118.             case 3:  
  119.  
  120.                 break;  
  121.             default:  
  122.                 break;  
  123.             }  
  124.               
  125.             break;  
  126.         case 2: // 第三組  
  127.             switch (childPosition) {  
  128.             case 0:  
  129.  
  130.                 break;  
  131.             case 1:  
  132.  
  133.                 break;  
  134.             default:  
  135.                 break;  
  136.             }  
  137.               
  138.             break;  
  139.         default:  
  140.             break;  
  141.         }  
  142.  
  143.     }  
  144.  
  145. }  

五、效果圖：

       新鮮事視圖

 

       點擊頂部左側Menu按鈕後

       點擊左側菜單的消息Item

       松開手後的中心消息視圖

 

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

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
android開發之調用手機的攝像頭使用MediaRecorder錄像並播放 Android 通過onDraw實現在View中繪圖操作的示例 Android提高之SurfaceView與多線程的混搭實例 Android 簡單的照相機程序的實例代碼 Android計時器Chronometer的使用 Android示例程序剖析之記事本（三：Activity生命周期和自定義控件）
Android本地化

Android應用程序可以在許多不同地區的許多設備上運行。為了使應用程序
Android Canvas繪圖之MaskFilter圖文詳解（附源碼下載）

       
Android編程之OpenGL繪圖技巧總結

本文實例講述了Android編程之OpenGL繪圖技巧。分享給大
Android MediaPlayer(多媒體播放)

Android提供了許多方法來控制播放的音頻/視頻文件和流。其中該方法是
閱讀排行版
Copyright © Android教程網 All Rights Reserved