157.n1-模仿微信下边点击不同的模块切换不同的界面

这种实现一般是通过RadioButton实现下边的点击选项，通过ViewPager实现上边的页面的切换。将ViewPager的滑动事件禁掉，只能接受RadioButton的点击切换界面.

需要注意的是，上面是ViewPager下面是RadioGroup，上面的ViewPager填充多少是一个问题，可以按照下面的方法设置，设置高度为0权重为1就可以了。下面的RradioGroup的高度会自动填充

android:layout_height="0dp"
android:layout_weight="1"让button的圈不显示的方法：android:button="@null"
android:drawableTop可以在文字的上方设置图片

android:drawablePadding文字和图片共设padding

需要引入xUtils库

实现的步骤：

首先布局分为2个部分一个是上面部分的viewpager和下面部分的RadioGroup，raidoGroup设置好然后。再分解viewGroup,分解成为上面的大标题栏和下面的内容部分，这里再使用创建一个基类的方法进行填充，上面的部分是不变化的，下面的部分是变化的，下面的部分使用FrameLayout弄一个空的布局，然后再创建子布局往FrameLayout中填充

frame_content.xml上面的部分是ViewPager下面的部分是RadioGroup

<?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" >

<!-- 内容栏 -->
<!-- 上边的内容栏 -->
<android.support.v4.view.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
/>
<!-- 下边的点击栏 -->
<RadioGroup
android:id="@+id/rg_group"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@drawable/bottom_tab_bg"
android:orientation="horizontal"
>
<RadioButton
android:id="@+id/rb_home"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_home_selector"
android:text="首页"
/>
<RadioButton
android:id="@+id/rb_news"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_news_selector"
android:text="新闻中心"
/>
<RadioButton
android:id="@+id/rb_smart"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_smart_selector"
android:text="智慧服务"
/>
<RadioButton
android:id="@+id/rb_gov"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_gov_selector"
android:text="政务"
/>
<RadioButton
android:id="@+id/rb_setting"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_setting_selector"
android:text="设置"
/>
</RadioGroup>
</LinearLayout>

base_pager.xml上面的部分是固定的，使用相对布局实现，下面的部分是变化的使用FrameLayout然后创建基类来填充

<?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
4000
" >

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/title_red_bg"
>

<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textColor="#ffffff"
android:textSize="22sp"
android:text="智慧城市" />
<ImageButton
android:id="@+id/btn_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:src="@drawable/img_menu"
/>
</RelativeLayout>
<FrameLayout
android:id="@+id/rl_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
></FrameLayout>

</LinearLayout>

中间使用了style.xml来设置统一的布局

<resources>

<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Light">
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
</style>

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>

<!-- 主界面下方的button -->
<style name="BottomTabStyle">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:button">@null</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:drawablePadding">5dp</item>
<item name="android:padding">6dp</item>
<item name="android:textColor">@drawable/btn_tab_text_selector</item>
<item name="android:layout_weight">1</item>
<item name="android:gravity">center</item>
</style>

</resources>

RadioButton点击背景和文本的切换是使用selector实现的

比如btn_tab_home_selector.xml注意因为要持久化，因此是state_check而不是press

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 主界面tab的home案件选择 -->
<!-- 按钮勾选住，这个可以持久状态 -->
<item android:drawable="@drawable/home_press" android:state_checked="true" />
<!-- 常规状态 -->
<item android:drawable="@drawable/home"/>
</selector>

btn_tab_text_selector.xml文本颜色的锁定

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:color="#f00" android:state_checked="true"/>
<item android:color="#fff"/>

</selector>

ContentFragment.java主界面的逻辑文件

package com.ldw.news.fragment;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RadioGroup;

import com.ldw.news.R;
import com.ldw.news.base.BasePager;
import com.ldw.news.base.impl.GovAffairsPager;
import com.ldw.news.base.impl.HomePager;
import com.ldw.news.base.impl.NewsCenterPager;
import com.ldw.news.base.impl.SettingPager;
import com.ldw.news.base.impl.SmartServicePager;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;

/*
* 主界面
*/
public class ContentFragment extends BaseFragment{

@ViewInject(R.id.rg_group)
private RadioGroup rg_group;
@ViewInject(R.id.vp_content)
private ViewPager mViewPager;

private ArrayList<BasePager> mPagerList;
//初始化布局
@Override
public View initViews() {
View view = View.inflate(mActivity, R.layout.fragment_content, null);

//获取的id注入view
ViewUtils.inject(this, view);

return view;
}

//初始化数据
@Override
public void initData(){
//默认勾选home
rg_group.check(R.id.rb_home);

mPagerList = new ArrayList<BasePager>();
//初始化5个页面
/*
for(int i = 0; i < 5; i++){
BasePager pager = new BasePager(mActivity);
mPagerList.add(pager);
}
*/
mPagerList.add(new HomePager(mActivity));
mPagerList.add(new NewsCenterPager(mActivity));
mPagerList.add(new SmartServicePager(mActivity));
mPagerList.add(new GovAffairsPager(mActivity));
mPagerList.add(new SettingPager(mActivity));
mViewPager.setAdapter(new ContentAdapter());
}

class ContentAdapter extends PagerAdapter{

@Override
public int getCount() {
// TODO Auto-generated method stub
return mPagerList.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
// TODO Auto-generated method stub
return view == object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
//获取到某个位置的pager
BasePager pager = mPagerList.get(position);
//填充布局对象
container.addView(pager.mRootView);
// 初始化数据.... 不要放在此处初始化数据, 否则会预加载下一个页面
//pager.initData();
return pager.mRootView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}

}

BasePager.java是ViewPager中标题下面的基类，使用这个基类为基础进行填充

package com.ldw.news.base;

import com.ldw.news.R;

import android.app.Activity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.TextView;

/*
* 主页下面，5个子页面的基类
*/
public class BasePager {

public Activity mActivity;
public View mRootView;// 布局对象

public TextView tvTitle;// 标题对象

public FrameLayout flContent;// 内容

public ImageButton btnMenu;// 菜单按钮

public BasePager(Activity activity) {
mActivity = activity;
initViews();
}

/*
* 初始化布局
*/
private void initViews() {
//填充内容，用基类来填充
mRootView = View.inflate(mActivity, R.layout.base_pager, null);

//获取组件
tvTitle = (TextView) mRootView.findViewById(R.id.tv_title);
flContent = (FrameLayout) mRootView.findViewById(R.id.fl_content);
btnMenu = (ImageButton) mRootView.findViewById(R.id.btn_menu);

}

/**
* 初始化数据
*/
public void initData() {

}
}

HomePager.java填充子页面，这是一个举例

package com.ldw.news.base.impl;

import android.app.Activity;
import android.graphics.Color;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;

import com.ldw.news.base.BasePager;

/*
* home继承基类
*/
public class HomePager extends BasePager {

public HomePager(Activity activity) {
super(activity);
}

@Override
public void initData() {
System.out.println("初始化首页数据....");

// 修改标题
tvTitle.setText("智慧城市");
// 隐藏菜单按钮
btnMenu.setVisibility(View.GONE);
//setSlidingMenuEnable(false);//关闭侧边栏

TextView text = new TextView(mActivity);
text.setText("首页");
text.setTextColor(Color.RED);
text.setTextSize(25);
text.setGravity(Gravity.CENTER);

// 向FrameLayout中动态添加布局
flContent.addView(text);
}

}