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

于 2017-05-12 03:10:05 发布
阅读量561 收藏 1
点赞数 1
分类专栏： android整理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/augfun/article/details/71699705
版权

这种实现一般是通过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" >
    

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

}



augfun
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值