Android仿人人客户端（v5.7.1）——消息中心视图的实现

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

声明：仿人人项目，所用所有图片资源都来源于其它Android移动应用，编写本应用的目的在于学习交流，如涉及侵权请告知，我会及时换掉用到的相关图片。

一、人人官方的消息中心截图如下：

        

二、消息中心视图的实现。

        我个人觉得人人官方的消息中心看着怪怪的，不舒服。因此，实现时我稍作修改，具体实现如下：

        1、定义类去继承FrameLayout，源码如下：

package com.everyone.android.ui.message;

import android.util.AttributeSet;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;

import com.everyone.android.ui.EveryoneActivity;

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

    private EveryoneActivity mActivity;
   
    public MessageLayout(EveryoneActivity activity) {
        super(activity);
        mActivity = activity;

        setupViews();
    }

    public MessageLayout(EveryoneActivity activity, AttributeSet attrs) {
        super(activity, attrs);
        mActivity = activity;

        setupViews();
    }

    private void setupViews() {
        
    }

    @Override
    public void onClick(View v) {

    }

}

    2、在setupViews()方法中， 为其设置布局文件代码如下：

 final LayoutInflater mLayoutInflater = LayoutInflater.from(getContext());
        LinearLayout rootView = (LinearLayout) mLayoutInflater.inflate(R.layout.message, null);
        addView(rootView);

         3、message.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:background="#FFFFFF"
    android:orientation="vertical" >

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

    <RadioGroup
        android:id="@+id/rg_message"
        android:layout_width="fill_parent"
        android:layout_height="40dip"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/rb_message"
            style="@style/message_radio_button"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="消息" />

        <RadioButton
            android:id="@+id/rb_friend"
            style="@style/message_radio_button"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="好友申请" />

        <RadioButton
            android:id="@+id/rb_birthday"
            style="@style/message_radio_button"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="生日提醒" />
    </RadioGroup>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_message"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
    </android.support.v4.view.ViewPager>

</LinearLayout>

        在styles.xml中添加的样式如下：

 <style name="message_radio_button">
        <item name="android:background">@drawable/v5_0_1_tabsbar_background</item>
        <item name="android:button">@null</item>
        <item name="android:checked">false</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">#000000</item>
        <item name="android:textSize">14sp</item>
    </style>

       4、在setupViews()方法中，添加的处理代码如下：

// 对顶部的导航栏进行设置
        topMenuNavbar = (TopMenuNavbar) rootView.findViewById(R.id.rl_top_menu_navbar);
        topMenuNavbar.mLlRefresh.setOnClickListener(this);

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

        // 初始化RadioGroup及相关组件
        rgMessageNavbar = (RadioGroup) rootView.findViewById(R.id.rg_message);
        rbMessage = (RadioButton) rootView.findViewById(R.id.rb_message);
        rbMessage.setChecked(true);
        rbFriend = (RadioButton) rootView.findViewById(R.id.rb_friend);
        rbBirthDay = (RadioButton) rootView.findViewById(R.id.rb_birthday);

        // 初始化ViewPager组件的子视图
        View messageView = mLayoutInflater.inflate(R.layout.message_message, null);
        View friendView = mLayoutInflater.inflate(R.layout.message_friend, null);
        View birthdayView = mLayoutInflater.inflate(R.layout.message_birthday, null);

        ArrayList<View> views = new ArrayList<View>();
        views.add(messageView);
        views.add(friendView);
        views.add(birthdayView);

        // 初始化ViewPager组件，并为其设置数据适配器
        mViewPager = (ViewPager) rootView.findViewById(R.id.vp_message);
        ViewPagerAdapter mPagerAdapter = new ViewPagerAdapter(views);
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.setCurrentItem(0);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            public void onPageSelected(int arg0) {

            }

            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            public void onPageScrollStateChanged(int arg0) {
                if (arg0 == ViewPager.SCROLL_STATE_IDLE) {
                    switch (mViewPager.getCurrentItem()) {
                    case 0:
                        rbMessage.setChecked(true);
                        break;

                    case 1:
                        rbFriend.setChecked(true);
                        break;

                    case 2:
                        rbBirthDay.setChecked(true);
                        break;
                    }
                }
            }
        });

        rgMessageNavbar.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                case R.id.rb_message:
                    mViewPager.setCurrentItem(0);
                    break;

                case R.id.rb_friend:
                    mViewPager.setCurrentItem(1);
                    break;

                case R.id.rb_birthday:
                    mViewPager.setCurrentItem(2);
                    break;
                }
            }
        });

          5、运行后的效果图如下：

    默认选中消息，效果图如下：

   当前选择“好友申请”，效果图如下：

三、完整源码

    ViewPagerAdapter类的源码如下：

package com.everyone.android.ui.message;

import java.util.ArrayList;

import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

/**
 * 功能描述：消息中心视图中ViewPager对象的数据适配器
 * @author android_ls
 */
public class ViewPagerAdapter extends PagerAdapter {

    private ArrayList<View> mViews;

    public ViewPagerAdapter(ArrayList<View> list) {
        this.mViews = list;
    }

    @Override
    public Object instantiateItem(View arg0, int arg1) {
        ((ViewPager) arg0).addView(mViews.get(arg1));
        return mViews.get(arg1);
    }

    @Override
    public void destroyItem(View arg0, int arg1, Object arg2) {
        ((ViewPager) arg0).removeView(mViews.get(arg1));
    }

    @Override
    public int getCount() {
        return mViews.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    @Override
    public void finishUpdate(View arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void restoreState(Parcelable arg0, ClassLoader arg1) {
        // TODO Auto-generated method stub

    }

    @Override
    public Parcelable saveState() {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public void startUpdate(View arg0) {
        // TODO Auto-generated method stub

    }

}

    消息中心视图（MessageLayout）源码如下：

package com.everyone.android.ui.message;

import java.util.ArrayList;

import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
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 android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

import com.everyone.android.R;
import com.everyone.android.ui.EveryoneActivity;
import com.everyone.android.widget.TopMenuNavbar;

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

    private TopMenuNavbar topMenuNavbar;

    /**
     * 获取顶部左侧的menu组件
     * @return
     */
    public LinearLayout getMenuView() {
        return topMenuNavbar.llShowMenu;
    }

    private ViewPager mViewPager;

    private RadioGroup rgMessageNavbar;

    private RadioButton rbMessage;

    private RadioButton rbFriend;

    private RadioButton rbBirthDay;

    private EveryoneActivity mActivity;

    public MessageLayout(EveryoneActivity activity) {
        super(activity);
        mActivity = activity;

        setupViews();
    }

    public MessageLayout(EveryoneActivity activity, AttributeSet attrs) {
        super(activity, attrs);
        mActivity = activity;

        setupViews();
    }

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

        // 对顶部的导航栏进行设置
        topMenuNavbar = (TopMenuNavbar) rootView.findViewById(R.id.rl_top_menu_navbar);
        topMenuNavbar.mLlRefresh.setOnClickListener(this);

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

        // 初始化RadioGroup及相关组件
        rgMessageNavbar = (RadioGroup) rootView.findViewById(R.id.rg_message);
        rbMessage = (RadioButton) rootView.findViewById(R.id.rb_message);
        rbMessage.setChecked(true);
        rbFriend = (RadioButton) rootView.findViewById(R.id.rb_friend);
        rbBirthDay = (RadioButton) rootView.findViewById(R.id.rb_birthday);

        // 初始化ViewPager组件的子视图
        View messageView = mLayoutInflater.inflate(R.layout.message_message, null);
        View friendView = mLayoutInflater.inflate(R.layout.message_friend, null);
        View birthdayView = mLayoutInflater.inflate(R.layout.message_birthday, null);

        ArrayList<View> views = new ArrayList<View>();
        views.add(messageView);
        views.add(friendView);
        views.add(birthdayView);

        // 初始化ViewPager组件，并为其设置数据适配器
        mViewPager = (ViewPager) rootView.findViewById(R.id.vp_message);
        ViewPagerAdapter mPagerAdapter = new ViewPagerAdapter(views);
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.setCurrentItem(0);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            public void onPageSelected(int arg0) {

            }

            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            public void onPageScrollStateChanged(int arg0) {
                if (arg0 == ViewPager.SCROLL_STATE_IDLE) {
                    switch (mViewPager.getCurrentItem()) {
                    case 0:
                        rbMessage.setChecked(true);
                        break;

                    case 1:
                        rbFriend.setChecked(true);
                        break;

                    case 2:
                        rbBirthDay.setChecked(true);
                        break;
                    }
                }
            }
        });

        rgMessageNavbar.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                case R.id.rb_message:
                    mViewPager.setCurrentItem(0);
                    break;

                case R.id.rb_friend:
                    mViewPager.setCurrentItem(1);
                    break;

                case R.id.rb_birthday:
                    mViewPager.setCurrentItem(2);
                    break;
                }
            }
        });

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.ll_refresh:
            // 顶部右侧编辑事件处理

            break;
        default:
            break;
        }
    }

}

   由于人人开放平台未提供有关消息的API，因此，这里我只实现其UI部分。