仿qq主界面的消息电话以及fragment中使用BaseExpandableListAdapter

主要有一下几点

1.只有一个activity

2.消息一个fragment，电话是另一个fragment

3.在电话fragment中使用BaseExpandableListAdapter

首先看main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <RelativeLayout
        android:id="@+id/rl_header"
        android:layout_width="fill_parent"
        android:layout_height="48dp"
        android:background="#777" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_centerVertical="true"
            android:paddingLeft="8.0dp" >

            <Button
                android:id="@+id/btn_message"
                android:layout_width="70dip"
                android:layout_height="30dip"
                android:background="@drawable/baike_btn_pink_left_f_96"
                android:gravity="center"
                android:text="消息"
                android:textColor="#df3031"
                android:textSize="14sp" />

            <Button
                android:id="@+id/btn_call"
                android:layout_width="70dip"
                android:layout_height="30dip"
                android:background="@drawable/baike_btn_trans_right_f_96"
                android:gravity="center"
                android:text="电话"
                android:textColor="#ffffff"
                android:textSize="14sp" />
        </LinearLayout>
    </RelativeLayout>


    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

这里先在最top处设置一条底色为灰色的栏，主要放置消息和电话两个按钮，下面的fragment就是我们将要布置的主要内容

先看消息的fragment-message .xml,电话的有点复杂，后面再说

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是消息界面"/>

</LinearLayout>

其实也没有什么东西就一个TextView

接下来是MainActivity.java

public class MainActivity extends FragmentActivity {

        private Button btn_message,btn_call;

        private CallFragment callFragment;
        private MessageFragment messageFragment;

        public static final int MESSAGE_FRAGMENT_TYPE = 1;
        public static final int CALL_FRAGMENT_TYPE = 2;
        public int currentFragmentType = -1;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            this.requestWindowFeature(Window.FEATURE_NO_TITLE);
            setContentView(R.layout.activity_main);

            btn_message = (Button)findViewById(R.id.btn_message);
            btn_call = (Button)findViewById(R.id.btn_call);
            btn_message.setOnClickListener(onClicker);
            btn_call.setOnClickListener(onClicker);

            /**
             * Return the FragmentManager for interacting with fragments associated with this activity.
             */
            FragmentManager fragmentManager = getSupportFragmentManager();
            if (savedInstanceState != null) {
                int type = savedInstanceState.getInt("currentFragmentType");

                //Finds a fragment that was identified by the given tag either when inflated from XML or as supplied when added in a transaction.
                messageFragment = (MessageFragment)fragmentManager.findFragmentByTag("message");
                callFragment = (CallFragment)fragmentManager.findFragmentByTag("call");
                if(type > 0)
                    loadFragment(type);
            } else {
                //Start a series of edit operations on the Fragments associated with this FragmentManager.
                FragmentTransaction transaction = fragmentManager
                        .beginTransaction();
                android.support.v4.app.Fragment mainFragment = fragmentManager.findFragmentByTag("message");
                if (mainFragment != null) {
                    /**
                     *     replace(int containerViewId, Fragment fragment, String tag)
                     Replace an existing fragment that was added to a container.
                     */
                    transaction.replace(R.id.fl_content, mainFragment);//tag== null
                    transaction.commit();
                } else {
                    loadFragment(MESSAGE_FRAGMENT_TYPE);
                }
            }

        }

        //Save all appropriate fragment state.
        @Override
        protected void onSaveInstanceState(Bundle outState) {
            super.onSaveInstanceState(outState);
            outState.putInt("lastFragmentTag", currentFragmentType);
        }

        private void switchFragment(int type) {
            switch (type) {
                case MESSAGE_FRAGMENT_TYPE:
                    loadFragment(MESSAGE_FRAGMENT_TYPE);
                    break;
                case CALL_FRAGMENT_TYPE:
                    loadFragment(CALL_FRAGMENT_TYPE);
                    break;
            }

        }

        private void loadFragment(int type) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction transaction = fragmentManager.beginTransaction();
            if (type == CALL_FRAGMENT_TYPE) {
                if (callFragment == null) {
                    callFragment = new CallFragment();

                    transaction.add(R.id.fl_content, callFragment, "zhishi");
                } else {
                    transaction.show(callFragment);
                }
                if (messageFragment != null) {
                    transaction.hide(messageFragment);
                }
                currentFragmentType = MESSAGE_FRAGMENT_TYPE;
            } else {
                if (messageFragment == null) {
                    messageFragment = new MessageFragment();
                    transaction.add(R.id.fl_content, messageFragment, "wenda");
                } else {
                    transaction.show(messageFragment);
                }
                if (callFragment != null) {
                    transaction.hide(callFragment);
                }
                currentFragmentType = CALL_FRAGMENT_TYPE;
            }
            transaction.commitAllowingStateLoss();
        }

        private View.OnClickListener onClicker = new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switch (v.getId()) {
                    case R.id.btn_message:
                        btn_message.setTextColor(Color.parseColor("#df3031"));
                        btn_call.setTextColor(Color.WHITE);
                        btn_message
                                .setBackgroundResource(R.drawable.baike_btn_pink_left_f_96);
                        btn_call
                                .setBackgroundResource(R.drawable.baike_btn_trans_right_f_96);
                        switchFragment(MESSAGE_FRAGMENT_TYPE);

                        break;
                    case R.id.btn_call:

                        btn_message.setTextColor(Color.WHITE);
                        btn_call.setTextColor(Color.parseColor("#df3031"));
                        btn_message
                                .setBackgroundResource(R.drawable.baike_btn_trans_left_f_96);
                        btn_call
                                .setBackgroundResource(R.drawable.baike_btn_pink_right_f_96);
                        switchFragment(CALL_FRAGMENT_TYPE);

                        break;

                }
            }
        };

    }          

上面实现了对两个按钮的监听，以及更改了按钮的外观

并通过FragmentManage实现消息和电话界面的切换，MessageFragment.java就不给出了，主要是通过返回下面的代码实现

inflater.inflate(R.layout.fragment_message, null);

下面将讲解在CallFragment中使用BaseExpandableListAdapter将使用一下一下类和xml

fragment_call.xml  

group.xml group列的布局

child.xml child列的布局

CallFragment.java

MyAdapter.java 自定义继承BaseExpandanleListAdapter

fragment_call.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ExpandableListView
        android:id="@+id/android_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_load_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/android_list"
        android:layout_centerHorizontal="true"
        android:padding="20dp"
        android:text="@string/load_more" />

</RelativeLayout>

 group.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tv_group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="6dp"
            android:paddingLeft="10dp"
            android:paddingTop="6dp"
            android:text="@string/list"
            android:textSize="15sp" />
    </LinearLayout>

</LinearLayout>

child.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_child"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:paddingBottom="10dp"
        android:paddingLeft="60dp"
        android:paddingTop="10dp"
        android:text="好友列表"
        android:textSize="20sp" />

</LinearLayout>

既然要用到BaseExpandableListAdapte，则要先定义一个MyAdapter

public class MyAdapter extends BaseExpandableListAdapter {

    private String[] group;
    private String[][] buddy;
    private Context context;
    private LayoutInflater inflater;

    public MyAdapter(String[] group, String[][] buddy, Context context) {
        super();
        this.group = group;
        this.buddy = buddy;
        this.context = context;
        inflater = LayoutInflater.from(context);
    }

    @Override
    public int getGroupCount() {
        return group.length;
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        return buddy[groupPosition].length;
    }

    @Override
    public Object getGroup(int groupPosition) {
        return group[groupPosition];
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {

        return buddy[groupPosition][childPosition];
    }

    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public boolean hasStableIds() {
        return true;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
                             View convertView, ViewGroup parent) {
        convertView = inflater.inflate(R.layout.group, null);
        TextView groupNameTextView = (TextView) convertView
                .findViewById(R.id.tv_group);
        ImageView ivSelector = (ImageView) convertView
                .findViewById(R.id.iv_selector);
        groupNameTextView.setText(getGroup(groupPosition).toString());
        //ivSelector.setImageResource(R.drawable.pass);
        // 更换展开分组图片
//        if (!isExpanded) {
//            ivSelector.setImageResource(R.drawable.play);
//        }
        return convertView;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition,
                             boolean isLastChild, View convertView, ViewGroup parent) {
        convertView = inflater.inflate(R.layout.child, null);
        TextView nickTextView = (TextView) convertView
                .findViewById(R.id.tv_child);

        nickTextView.setText(getChild(groupPosition, childPosition).toString());

        return convertView;
    }

    // 子选项是否可以选择
    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }

}

然后再通过CallFragment使用它

public class CallFragment extends Fragment {
    private ExpandableListView elvCompany;

    private TextView tvLoadMore;

    // 群组名称（一级条目内容）
    private String[] group = new String[] { "我的好友","我的同学" };

    private String[][]  carsList = new String[][]  { {"张三", "李四", "王五", "赵六"},
            {"景亮","叶文"} };

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_call, null);

        tvLoadMore = (TextView) view.findViewById(R.id.tv_load_more);
        elvCompany = (ExpandableListView) view.findViewById(R.id.android_list);
        MyAdapter adapter = new MyAdapter(group, carsList, getContext());
        elvCompany.setAdapter(adapter);


        setListeners();

        return view;
    }

    private void setListeners() {
        // 分组展开
        elvCompany.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {

            @Override
            public boolean onGroupClick(ExpandableListView parent, View v,
                                        int groupPosition, long id) {
                return false;
            }
        });
        // 分组关闭
        elvCompany.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {

            @Override
            public void onGroupCollapse(int groupPosition) {

            }
        });

        // 子项点击
        elvCompany.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {

            @Override
            public boolean onChildClick(ExpandableListView parent, View v,
                                        int groupPosition, int childPosition, long id) {
                Toast.makeText(getActivity(),
                        group[groupPosition] + ":" + carsList[groupPosition][childPosition],
                        Toast.LENGTH_SHORT).show();
                return false;
            }
        });

        tvLoadMore.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "没有更多数据了", Toast.LENGTH_SHORT)
                        .show();

            }
        });

    }

}

这里还有一点没做好的就是没有将group的图标更改。

参考了不少前人的代码。抱歉直接分享，一起学习。