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



转载请标明出处：http://blog.csdn.net/android_ls/article/details/8765193

       在前面几讲中，左侧菜单（左侧面板）、满足滑动或点击子View的方式，打开左侧菜单的父容器和新鲜事视图（雏形）已基本完成，这一篇我们将主界面的整个视图框架完善下，实现点击左侧菜单切换右侧视图的功能。

一、添加消息中心视图

       通过观察，发现消息中心与新鲜事视图的顶部导航栏（工具栏）非常类似，既然类似就自定义组件，在两个视图需要用到的位置包含进去就可以了，降低代码冗余度。

       顶部导航栏的布局文件（top_menu_navbar.xml）：

[html] view plain copy print ?

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>  

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:id="@+id/ll_back"
        android:layout_width="60dip"
        android:layout_height="fill_parent"
        android:background="@drawable/v5_0_1_flipper_head_title_wrapper_background"
        android:gravity="center_vertical" >

        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dip"
            android:src="@drawable/v5_0_1_flipper_head_flip" />
    </LinearLayout>

    <ImageView
        android:id="@+id/iv_line_separator"
        android:layout_width="1dip"
        android:layout_height="25dip"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/ll_back"
        android:background="@drawable/v5_0_1_flipper_head_separator" />

    <LinearLayout
        android:id="@+id/ll_down_list"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginLeft="5dip"
        android:layout_toRightOf="@+id/iv_line_separator"
        android:background="@drawable/v5_0_1_flipper_head_title_wrapper_background" >

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dip"
            android:text="新鲜事"
            android:textColor="#FFFFFF"
            android:textSize="17dip"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/iv_down_list_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="3dip"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:src="@drawable/v5_0_1_flipper_head_title_corner" />
    </LinearLayout>

    <ImageView
        android:id="@+id/iv_right_line"
        android:layout_width="1dip"
        android:layout_height="25dip"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/ll_refresh"
        android:background="@drawable/v5_0_1_flipper_head_separator" />

    <LinearLayout
        android:id="@+id/ll_refresh"
        android:layout_width="60dip"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:background="@drawable/v5_0_1_flipper_head_title_wrapper_background"
        android:gravity="center" >

        <TextView
            android:id="@+id/tv_right_operation_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dip"
            android:text="编辑"
            android:textColor="#FFFFFF"
            android:textSize="17dip"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/iv_refresh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/refresh_icon" />
    </LinearLayout>

</RelativeLayout>

 

       顶部导航栏的Java文件：

[java] view plain copy print ?

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. }  

package com.everyone.android.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.everyone.android.R;
import com.everyone.android.api.OnMenuClickListener;

/**
 * 功能描述：自定义顶部菜单栏
 * @author android_ls
 */
public class TopMenuNavbar extends FrameLayout {

    // 打开左侧菜单的组件
    private LinearLayout llShowMenu;

    /**
     * 下拉列表
     */
    public LinearLayout mLlDownList;

    /**
     * 当前的标题
     */
    public TextView tvTitle;

    /**
     * 下拉标识
     */
    public ImageView ivDownListIcon;

    /**
     * 刷新图标
     */
    public ImageView ivRefresh;

    /**
     * 右侧操作（动作）的名称
     */
    public TextView tvRightOperationName;

    /**
     * 右侧竖直分割线
     */
    public ImageView ivRightLine;

    /**
     * 右侧的操作触控组件
     */
    public LinearLayout mLlRefresh;

    /**
     * 打开左侧菜单的组件的事件监听器
     */
    private OnMenuClickListener mOnClickListener;

    public TopMenuNavbar(Context context) {
        super(context);
        setupViews();
    }

    public TopMenuNavbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        setupViews();
    }

    public void setOnClickListener(OnMenuClickListener onClickListener) {
        mOnClickListener = onClickListener;
    }

    private void setupViews() {
        final LayoutInflater mLayoutInflater = LayoutInflater.from(getContext());
        RelativeLayout rlTopNavbar = (RelativeLayout) mLayoutInflater.inflate(R.layout.top_menu_navbar, null);
        addView(rlTopNavbar);

        llShowMenu = (LinearLayout) rlTopNavbar.findViewById(R.id.ll_back);
        mLlDownList = (LinearLayout) rlTopNavbar.findViewById(R.id.ll_down_list);
        mLlRefresh = (LinearLayout) rlTopNavbar.findViewById(R.id.ll_refresh);

        tvTitle = (TextView) rlTopNavbar.findViewById(R.id.tv_title);
        tvRightOperationName = (TextView) rlTopNavbar.findViewById(R.id.tv_right_operation_name);
        ivDownListIcon = (ImageView) rlTopNavbar.findViewById(R.id.iv_down_list_icon);
        ivRefresh = (ImageView) rlTopNavbar.findViewById(R.id.iv_refresh);
        ivRightLine = (ImageView) rlTopNavbar.findViewById(R.id.iv_right_line);

        llShowMenu.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if (mOnClickListener != null) {
                    mOnClickListener.onClick();
                }
            }
        });
    }

}

 

       消息中心视图的布局文件（message.xml）：

[html] view plain copy print ?

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>  

<?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:background="#FFFFFF"
    android:orientation="vertical" >

    <com.everyone.android.widget.TopMenuNavbar
        android:id="@+id/rl_top_menu_navbar"
        style="@style/top_navbar" />

</LinearLayout>

 

       消息中心视图的Java文件：

[java] view plain copy print ?

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. }  

package com.everyone.android.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

import com.everyone.android.R;

/**
 * 功能描述：消息中心视图
 * @author android_ls
 */
public class MessageLayout extends FrameLayout implements OnClickListener {

    private TopMenuNavbar topMenuNavbar;

    public TopMenuNavbar getTopMenuNavbar() {
        return topMenuNavbar;
    }

    public MessageLayout(Context context) {
        super(context);
        setupViews();
    }

    public MessageLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        setupViews();
    }

    private void setupViews() {
        final LayoutInflater mLayoutInflater = LayoutInflater.from(getContext());
        LinearLayout rlTopNavbar = (LinearLayout) mLayoutInflater.inflate(R.layout.message, null);
        addView(rlTopNavbar);

        topMenuNavbar = (TopMenuNavbar) rlTopNavbar.findViewById(R.id.rl_top_menu_navbar);
        topMenuNavbar.mLlRefresh.setOnClickListener(this);

        topMenuNavbar.tvTitle.setText("消息中心");
        topMenuNavbar.ivDownListIcon.setVisibility(View.GONE);
        topMenuNavbar.ivRefresh.setVisibility(View.GONE);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.ll_refresh:

            break;
        default:
            break;
        }

    }
    
}

 

二、修改新鲜事视图

       修改后的新鲜事视图布局文件（fresh_news.xml）：

[html] view plain copy print ?

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>  

<?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:background="#FFFFFF"
    android:orientation="vertical" >

    <com.everyone.android.widget.TopMenuNavbar
        android:id="@+id/rl_top_menu_navbar"
        style="@style/top_navbar" />
    
</LinearLayout>

 

       修改后的新鲜事视图的Java文件：

[java] view plain copy print ?

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. }  

package com.everyone.android.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

import com.everyone.android.R;

/**
 * 功能描述：新鲜事视图
 * @author android_ls
 */
public class FreshNewsLayout extends FrameLayout implements OnClickListener {

    private TopMenuNavbar topMenuNavbar;
    
    public TopMenuNavbar getTopMenuNavbar() {
        return topMenuNavbar;
    }

    public FreshNewsLayout(Context context) {
        super(context);
        setupViews();
    }

    public FreshNewsLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        setupViews();
    }

    private void setupViews() {
        final LayoutInflater mLayoutInflater = LayoutInflater.from(getContext());
        LinearLayout rlTopNavbar = (LinearLayout) mLayoutInflater.inflate(R.layout.fresh_news, null);
        addView(rlTopNavbar);
        
        topMenuNavbar = (TopMenuNavbar) rlTopNavbar.findViewById(R.id.rl_top_menu_navbar);
        topMenuNavbar.mLlDownList.setOnClickListener(this);
        topMenuNavbar.mLlRefresh.setOnClickListener(this);
        topMenuNavbar.ivRightLine.setVisibility(View.GONE);
        topMenuNavbar.tvRightOperationName.setVisibility(View.GONE);
        
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.ll_down_list:

            break;
        case R.id.ll_refresh:

            break;
        default:
            break;
        }

    }
    
}

 

三、左侧菜单栏添加选中的Item事件监听器

       点击左侧菜单中某个组的Item后，要实现切换父容器中的视图，那么左侧菜单对象就得持有父容器（我们自定义的满足滑动显示或隐藏左侧菜单的ViewGroup）和各个视图的引用。这样，等于左侧菜单与父容器和各个要切换的视图都关联起来了，也就是左侧菜单与其它对象的耦合度高了，编写代码也变得复杂。如果硬要这么做，有错吗？没有。不过我不想这么写，在左侧菜单类添加接口，将每次用户单击的Item的位置信息传到外部。我们让主界面Activity类去实现该接口，完成左侧菜单抛出去的要响应的事件。（这块不是很好描述，或者是我表达能力的问题吧。）

        在父容器（ScrollerContainer）中添加切换视图的方法：

[java] view plain copy print ?

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.   }  

  /**
     * 切换视图
     * @param view
     */
    public void show(View view) {
        mPanelInvisible = false;
        
        int scrollX = getChildAt(1).getScrollX();
        mScroller.startScroll(scrollX, 0, -scrollX, 0, ANIMATION_DURATION_TIME);
        invalidate();
        
        removeViewAt(1);
        addView(view, 1, getLayoutParams());
    }

        对外的接口：

[java] view plain copy print ?

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事件监听器
     * @param seletedListener
     */
    public void setOnSeletedListener(onSeletedListener seletedListener) {
        mOnSeletedListener = seletedListener;
    }

    /**
     * 选中的Item事件监听器
     * @author android_ls
     */
    public interface onSeletedListener {
        /**
         * 当前选中的Item事件处理器
         * @param groupPosition 所属组Id
         * @param childPosition 在所属组内的位置
         */
        public abstract void seletedChildView(int groupPosition, int childPosition);
    }

      组的Item单击事件监听器：

[java] view plain copy print ?

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. );  

         mExpandableListView.setOnChildClickListener(new OnChildClickListener() {

            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
                if (mOnSeletedListener == null) {
                    return false;
                }

                mGroupPosition = groupPosition;
                mChildPosition = childPosition;

                mOnSeletedListener.seletedChildView(groupPosition, childPosition);
                return true;
            }
        });

       左侧菜单修改后的完整源码：

[java] view plain copy print ?

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. }  

package com.everyone.android.widget;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.content.res.Resources;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ExpandableListView.OnGroupClickListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.everyone.android.R;
import com.everyone.android.adapter.LeftPanelExListViewAdapter;
import com.everyone.android.entity.LeftPanelListItem;

/**
 * 功能描述：仿人人主界面之左侧面板
 * @author android_ls
 *
 */
public class LeftPanelLayout extends FrameLayout {

    /**
     * 用户图标显示组件
     */
    public ImageView ivUserIcon;

    /**
     * 用户名称显示组件
     */
    public TextView tvNickname;

    /**
     * 可展开的ListView组件
     */
    private ExpandableListView mExpandableListView;

    /**
     * ExpandableListView组件的数据适配器
     */
    private LeftPanelExListViewAdapter mExListViewAdapter;

    /**
     * ExpandableListView组件的数据源
     */
    private List<LeftPanelListItem> mListItems = new ArrayList<LeftPanelListItem>();

    /**
     * 分组名数组
     */
    private String[] mGroupNames;

    private onSeletedListener mOnSeletedListener;

    private int mGroupPosition;

    private int mChildPosition;

    public LeftPanelLayout(Context context) {
        super(context);
        setupViews();
    }

    public LeftPanelLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        setupViews();
    }

    private void setupViews() {
        final LayoutInflater mInflater = LayoutInflater.from(getContext());
        LinearLayout viewRoot = (LinearLayout) mInflater.inflate(R.layout.left_panel, null);
        addView(viewRoot);

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

        initialized();
    }

    private void initialized() {
        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(getContext(), mListItems);
        mExpandableListView.setAdapter(mExListViewAdapter);

        // 设置默认让所有组都展开
        for (int i = 0; i < mListItems.size(); i++) {
            mExpandableListView.expandGroup(i);
        }

        // 设置OnGroupClick时，不再展开或收缩组内的子项
        mExpandableListView.setOnGroupClickListener(new OnGroupClickListener() {

            @Override
            public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
                // 表示GroupItem的单击事件已被处理
                return true;
            }

        });

        mExpandableListView.setOnChildClickListener(new OnChildClickListener() {

            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
                if (mOnSeletedListener == null) {
                    return false;
                }

                mGroupPosition = groupPosition;
                mChildPosition = childPosition;

                mOnSeletedListener.seletedChildView(groupPosition, childPosition);
                return true;
            }
        });
    }

    /**
     * 添加数据到指定的组
     * @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);
    }

    /**
     * 设置选中的Item事件监听器
     * @param seletedListener
     */
    public void setOnSeletedListener(onSeletedListener seletedListener) {
        mOnSeletedListener = seletedListener;
    }

    /**
     * 选中的Item事件监听器
     * @author android_ls
     */
    public interface onSeletedListener {
        /**
         * 当前选中的Item事件处理器
         * @param groupPosition 所属组Id
         * @param childPosition 在所属组内的位置
         */
        public abstract void seletedChildView(int groupPosition, int childPosition);
    }

}

四、应用主界面源码：

[java] view plain copy print ?

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. }  

package com.everyone.android.ui;

import android.os.Bundle;
import android.view.ViewGroup.LayoutParams;

import com.everyone.android.AppBaseActivity;
import com.everyone.android.api.OnMenuClickListener;
import com.everyone.android.widget.FreshNewsLayout;
import com.everyone.android.widget.LeftPanelLayout;
import com.everyone.android.widget.LeftPanelLayout.onSeletedListener;
import com.everyone.android.widget.MessageLayout;
import com.everyone.android.widget.ScrollerContainer;

/**
 * 功能描述：应用主界面
 * @author android_ls
 */
public class EveryoneActivity extends AppBaseActivity implements OnMenuClickListener, onSeletedListener {

    /**
     * 滚动（滑动）容器
     */
    private ScrollerContainer mSlideContainer;

    /**
     * 左侧面板
     */
    private LeftPanelLayout mLeftPanelLayout;

    /**
     * 新鲜事
     */
    private FreshNewsLayout mFreshNewsLayout;

    /**
     * 消息
     */
    private MessageLayout mMessageLayout;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(mSlideContainer);
        
    }
    
    @Override
    protected int getLayoutId() {
        return 0;
    }

    @Override
    protected void setupView() {
        mSlideContainer = new ScrollerContainer(mContext);
        mLeftPanelLayout = new LeftPanelLayout(mContext);
        mLeftPanelLayout.setOnSeletedListener(this);
        
        mFreshNewsLayout = new FreshNewsLayout(mContext);
        mMessageLayout = new MessageLayout(mContext);
       
        mFreshNewsLayout.getTopMenuNavbar().setOnClickListener(this);
        mMessageLayout.getTopMenuNavbar().setOnClickListener(this);

        LayoutParams layoutParams = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
        mSlideContainer.addView(mLeftPanelLayout, 0, layoutParams);
        mSlideContainer.addView(mFreshNewsLayout, 1, layoutParams);
    }

    @Override
    protected void initialized() {
        // TODO Auto-generated method stub

    }

    @Override
    public void onClick() {
        mSlideContainer.show();
    }

    @Override
    public void seletedChildView(int groupPosition, int childPosition) {
        switch (groupPosition) {
        case 0: // 第一组

            switch (childPosition) {
            case 0:
                mSlideContainer.show(mFreshNewsLayout);
                break;
            case 1:
                mSlideContainer.show(mMessageLayout);
                break;
            case 2:

                break;
            case 3:

                break;
            case 4:

                break;

            default:
                break;
            }
            
            break;
        case 1: // 第二组
            switch (childPosition) {
            case 0:

                break;
            case 1:

                break;
            case 2:

                break;
            case 3:

                break;
            default:
                break;
            }
            
            break;
        case 2: // 第三组
            switch (childPosition) {
            case 0:

                break;
            case 1:

                break;
            default:
                break;
            }
            
            break;
        default:
            break;
        }

    }

}

五、效果图：

       新鲜事视图

       点击顶部左侧Menu按钮后

       点击左侧菜单的消息Item

       松开手后的中心消息视图