主页面布局框架搭建

最新推荐文章于 2021-02-16 10:37:43 发布

xiaoleiacm

最新推荐文章于 2021-02-16 10:37:43 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android项目-智慧北京文章标签： Android 项目

本文链接：https://blog.youkuaiyun.com/xiaoleiacmer/article/details/50354204

Android项目-智慧北京专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在Android中搭建主页面布局框架，包括布局方式、公共属性布局和数据区域布局的实现。通过使用RadioButton、ViewPager和Fragment，实现了底部导航栏与内容区域的动态切换，其中内容区域使用线性布局填充不同标题和内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 布局方式：

由于在主页面现在内容是一个空的Fragment,现在需要往这个空的Fragment添加有内容的Fragment.

最终的实现效果是：

可以看出

1 下面一排是RadioButton

2 页面切换可以看做变化的Viewpager作为底板

3 ViewPager上使用线性布局的方式，放入不同的标题，以及内容（内容依旧使用Fragment布局方式进行填充）

下面是用于填充空Fragment的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">
 
    <!-- 这里调用了自定义了一个继承ViewPager的类：NoScrollViewPager,这个类重写了 onTouchEvent，使其不产生左右滑动的效果-->
    <com.example.zhihuibj.view.NoScrollViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:layout_weight="1" />
   
    
    
    <RadioGroup 
        android:id="@+id/rg_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@android:color/darker_gray"        
        >
        <RadioButton   
            android:id="@+id/rb_home"         
			style="@style/BottomTab"
            android:text="首页"            
            android:drawableTop="@drawable/btn_tab_home_selector"
            />
        <RadioButton        
            android:id="@+id/rb_news"    
			style="@style/BottomTab"
            android:text="新闻中心"	
            android:drawableTop="@drawable/btn_tab_news_selcetor"
           />
        <RadioButton         
            android:id="@+id/rb_smart"   
			style="@style/BottomTab"
            android:text="智慧服务"	
            android:drawableTop="@drawable/btn_tab_smart_selector"
           />
        <RadioButton          
            android:id="@+id/rb_gov"  
			style="@style/BottomTab"
            android:text="政	务"	
            android:drawableTop="@drawable/btn_tab_gov_selector"
           />
        <RadioButton  
            android:id="@+id/rb_setting"          
			style="@style/BottomTab"
            android:text="设置"	
            android:drawableTop="@drawable/btn_tab_setting_selector"
           />
    </RadioGroup>
    
</LinearLayout>

可以看出是实现了ViewPager和RadioGroup.

下面的XML布局方式是对ViewPager内容进行填充布局，这里可以把ViewPager看做一个底板，在ViewPager上进行不同布局的添加。

<?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:text="智慧北京"
            android:textColor="#fff"
            android:textSize="22sp"
            
             />

        <ImageButton
            android:id="@+id/btn_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@null"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="5dp"
            android:src="@drawable/img_menu" />

    </RelativeLayout>
    
    <FrameLayout 
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"  
        >
    </FrameLayout>

</LinearLayout>

2 公共属性布局实现

首先创建一个继承Fragment类的BaseFragment类，用于实现Fragment的依赖的创建以及其他的初始化接口：

public abstract class BaseFragment extends Fragment{

	public Activity mActivity;
	//fragment创建
	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		mActivity=getActivity(); //得到当前的Activity即MainActivity
	}

	//处理fragment布局
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return initViews();
	}

	//依赖的Activity创建完成
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
		initData();
	}
	
	//子类必须实现初始化方法
	public abstract View initViews();
	
	//初始化
	public void initData(){};

}

在创建一个ContentFragment类，继承BaseFragment, 用来填充数据和更改页面内容：

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

	@ViewInject(R.id.rg_group) //xUtils注解方式查找控件
	private RadioGroup rgGroup;
	
	@ViewInject(R.id.vp_content)//得到Viewpager
	private ViewPager viewpager;
		
	private ArrayList<BasePager> mPagerList;
	
	@Override
	public View initViews() {
		/*
		 * 将XML布局进行实例化
		 */
		View view= View.inflate(mActivity, R.layout.fragment_content_menu, null);
		//rgGroup=(RadioGroup) view.findViewById(R.id.rg_group); //在view中寻找别控件
		ViewUtils.inject(this,view);//注解View事件
		
		return view;
	}
	@Override
	public void initData() {
		
		rgGroup.check(R.id.rb_home);		
		
		mPagerList=new ArrayList<BasePager>();
		

		/*
		 * 
		 * 他们都继承了Basepager(自定义)，向mPagerList添加用于显示不同页面的布局对象
		 * 在适配器（ContentAdapter）中,通过不同布局对象获得最终的布局实例mRootView
		 */
		mPagerList.add(new Homepager(mActivity));		
		mPagerList.add(new NewsCenterPager(mActivity));
		mPagerList.add(new SmartServicePager(mActivity));
		mPagerList.add(new GovAffairPager(mActivity));
		mPagerList.add(new SettingPager(mActivity));
		viewpager.setAdapter(new ContentAdapter());
		
		
		/*
		 * 设置监听RadioGroup事件
		 */
		rgGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {

				switch (checkedId) {
				case R.id.rb_home:
					viewpager.setCurrentItem(0, false);  //用于选中显示哪一个viewpager
					break;
				case R.id.rb_news:
					viewpager.setCurrentItem(1, false);
					break;
				case R.id.rb_smart:
					viewpager.setCurrentItem(2, false);
					break;
				case R.id.rb_gov:
					viewpager.setCurrentItem(3, false);
					break;
				case R.id.rb_setting:
					viewpager.setCurrentItem(4, false);
					break;

				default:
					break;
				}
				
			}
		});
		
		mPagerList.get(0).initData(); //在未被选中时，对第一个页面进行初始化
		
		/*
		 * 监听ViewPager改变事件，用于监听哪一个页面被选中，并进行数据初始化
		 */
		viewpager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				
				mPagerList.get(arg0).initData(); //对于每一个选中的viewpager进行数据初始化
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
	}
	
	/*
	 * 继承PagerAdapter的适配器，用于ViewPager的设置与显示
	 */
	class ContentAdapter extends PagerAdapter{



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

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0==arg1;
		}
		
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View) object);//销毁view
			
		}


		@Override		
		public Object instantiateItem(ViewGroup container, int position) {
			
			BasePager pager=mPagerList.get(position);			
			container.addView(pager.mRootView);//获得View	，添加进入的是由falter对R.layout.base_pager实例化的对象		
			return pager.mRootView; //用于销毁View
		}
		
	}

}

3 数据区域布局实现

数据内容的实现：

/*
 * 主页下五个子页的基类
 * 
 */
public class BasePager {

	public Activity mAcitivty;
	public View mRootView; //布局对象
	
	public TextView tvTitle; //标题
	public FrameLayout flcontent; //内容
	
	public ImageButton btnMenu;
	
	
	public BasePager(Activity activity)
	{
		mAcitivty=activity;
		initViews(); //初始化布局
	}
	
	/*
	 * 布局初始化
	 */
	public void initViews(){
		 mRootView=View.inflate(mAcitivty, R.layout.base_pager, null);	//获得数据布局XML实例
		 btnMenu=(ImageButton)mRootView.findViewById(R.id.btn_menu);
		 tvTitle=(TextView) mRootView.findViewById(R.id.tv_title);
		 flcontent=(FrameLayout) mRootView.findViewById(R.id.fl_content);		  
	}
	
	/*
	 * 数据初始化
	 */
	public void initData(){
		
	}
	
	public void setSlidingMenuEnable(boolean enable)
	{
		MainActivity MainUi= (MainActivity)mAcitivty;
		SlidingMenu slidingmenu = MainUi.getSlidingMenu();
		
		
		if(enable)
		{
			slidingmenu.setTouchModeAbove(slidingmenu.TOUCHMODE_FULLSCREEN);
		}
		else
		{
			slidingmenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
		}
	}
}

/*
 * 首页(五个子页面之一)
 */
public class Homepager extends BasePager {

	public Homepager(Activity activity) {
		super(activity);
		
	} 
	@Override
	public void initData() {		
		tvTitle.setText("智慧北京");
		
		setSlidingMenuEnable(false);
		//向flcontent动态加载数据
		TextView text=new TextView(mAcitivty);
		text.setText("首页");
		text.setTextColor(Color.RED);
		text.setTextSize(25);
		text.setGravity(Gravity.CENTER);
		flcontent.addView(text);

	}
}