为了提高屏幕的复用,摒弃Activity重量级的页面加载,android提供了fragment这种轻量级的控件,她和Activity一样有生命周期,同时又依附于Activity
下面,主要介绍在一个Activity里加载多个fragment来复用屏幕,实现tab导航栏的效果。
点击下面的位置,物品,时间会切换到不同的搜索页面,就这这个效果。
一个Activity加上了三个fragment
上代码:
<?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" > <include layout="@layout/head2_item"/> <FrameLayout android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" android:id="@+id/id_viewPager" /> <include layout="@layout/bottom"/> </LinearLayout>
在activity_search.xml文件中,head2_item是导入的一个标题栏文件,bottom是底部的菜单栏,剩下的屏幕控件由一个FrameLayout布局实现。
head2_item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/light_blue" android:orientation="horizontal" > <ImageView android:id="@+id/backBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="0dp" android:layout_marginRight="0dp" android:background="@drawable/back_btn" android:onClick="exit" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:src="@drawable/base_action_bar_back_divider" /> <TextView android:id="@+id/headTV" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="4dp" android:layout_weight="1" android:text="" android:textColor="@color/white" android:textSize="21sp" android:textStyle="bold" android:maxLines="1" android:gravity="center" > </TextView> <ProgressBar android:id="@+id/progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:visibility="gone" /> <ImageView android:id="@+id/comment" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:src="@drawable/comment_btn" /> </LinearLayout>
bottom.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="45dp" android:orientation="horizontal" android:background="@color/bg_gray" > <LinearLayout android:layout_height="fill_parent" android:layout_width="0dp" android:layout_weight="1" android:orientation="vertical" android:id="@+id/linear01" > <TextView android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/tvSelect1" android:text="位置" android:gravity="center" android:textColor="@color/txt_orange" android:textSize="20sp" /> </LinearLayout> <LinearLayout android:layout_height="fill_parent" android:layout_width="0dp" android:layout_weight="1" android:orientation="vertical" android:id="@+id/linear02" > <TextView android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/tvSelect2" android:text="物品" android:gravity="center" android:textColor="@color/txt_orange" android:textSize="20sp" /> </LinearLayout> <LinearLayout android:layout_height="fill_parent" android:layout_width="0dp" android:layout_weight="1" android:orientation="vertical" android:id="@+id/linear03" > <TextView android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/tvSelect3" android:text="时间" android:gravity="center" android:textColor="@color/txt_orange" android:textSize="20sp" /> </LinearLayout> </LinearLayout>
以上就是主Activity的xml文件。
三个fragment文件都是再onCreateView方法里,记载各个fragment的视图,
最主要的Activity的代码
package com.suijianlab.cupboard; import java.util.List; import android.content.res.Resources; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.view.View; import android.view.View.OnClickListener; import android.widget.LinearLayout; import android.widget.TextView; import com.lin.fragment.AdressFragment; import com.lin.fragment.GoodsFragment; import com.lin.fragment.TimeFragment; import com.lin.pojo.BarCode; import com.lin.utils.MyApplication; import com.lin.utils.UsualUtil; public class SearchActivity extends FragmentActivity implements OnClickListener{ //三个linearlayout是三个底部导航的各个模块 private LinearLayout mTabAddress; private LinearLayout mTabGoods; private LinearLayout mTabTime; //三个fragment是替换Activity中间的FrameLayout使用的 private Fragment mtab01; private Fragment mtab02; private Fragment mtab03; //把图片资源的引用作为成员变量 private Resources res; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); UsualUtil.hintTitles(this);//这个是我工具类的一个方法,用于隐藏标题栏 setContentView(R.layout.activity_search); MyApplication.getInstance().addActivity(this);//收集Activity TextView textViewTitle =(TextView)findViewById(R.id.headTV); textViewTitle.setText("查询"); initView(); initEvents(); setSelect(0); } private void setSelect(int i) { // TODO Auto-generated method stub FragmentManager fm=getSupportFragmentManager(); FragmentTransaction transaction=fm.beginTransaction();拿事务 hideFragment(transaction); switch (i) { case 0:{ mTabAddress.setBackgroundColor(res.getColor(R.color.black_pressed));//点亮 if(mtab01==null){ mtab01=new AdressFragment(); transaction.add(R.id.id_viewPager,mtab01);//添加到//framelayout中 }else{ transaction.show(mtab01);//显示 } break; } case 1:{ mTabGoods.setBackgroundColor(res.getColor(R.color.black_pressed)); if(mtab02==null){ mtab02=new GoodsFragment(); transaction.add(R.id.id_viewPager, mtab02); }else{ transaction.show(mtab02); } break; } case 2:{ mTabTime.setBackgroundColor(res.getColor(R.color.black_pressed)); if(mtab03==null){ mtab03=new TimeFragment(); transaction.add(R.id.id_viewPager, mtab03); }else{ transaction.show(mtab03); } break; } default: break; } transaction.commit(); } private void hideFragment(FragmentTransaction transaction) { // TODO Auto-generated method stub if(mtab01!=null){ transaction.hide(mtab01); } if(mtab02!=null){ transaction.hide(mtab02); } if(mtab03!=null){ transaction.hide(mtab03); } } private void initEvents() { // TODO Auto-generated method stub mTabAddress.setOnClickListener(this); mTabGoods.setOnClickListener(this); mTabTime.setOnClickListener(this); } private void initView() { // TODO Auto-generated method stub mTabAddress=(LinearLayout) findViewById(R.id.linear01); mTabGoods=(LinearLayout) findViewById(R.id.linear02); mTabTime=(LinearLayout) findViewById(R.id.linear03); res=getResources(); } //linearlayout的点击事件 @Override public void onClick(View v) { // TODO Auto-generated method stub reset();//先是重置三个按钮的颜色 switch (v.getId()){ case R.id.linear01: setSelect(0);//调用方法,显示相应的fragment,把底部设为选中 break; case R.id.linear02: setSelect(1); break; case R.id.linear03: setSelect(2); break; default: break; } } private void reset(){ mTabAddress.setBackgroundColor(res.getColor(R.color.bg_gray)); mTabGoods.setBackgroundColor(res.getColor(R.color.bg_gray)); mTabTime.setBackgroundColor(res.getColor(R.color.bg_gray)); } public void exit(View view){ finish(); } }
这种方式的弊端是不能向Viewpager那样滑动,但是每一个导航条的内容是分割开来的,大大地降低了耦合,使得各个模块互不干扰,代码也不是很臃肿
相关推荐
主要介绍了Android Tablayout 自定义Tab布局的使用案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
模仿考试应用的底部+顶部Tab布局,适合新手学习布局之用,GB编码
封装了4种安卓中常见的tab布局的实现方式。 1:ViewPager实现 2:Fragment实现 3:ViewPager+Fragment实现 4:ViewPager+ViewPagerIndicator实现
android手机开发中tab控件的一个简单的运用例子
4.mainPage.html为tab布局,右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-test.html为tree...
高仿新浪微博的底部Tab布局,基于Activity实现
jQuery easyui后台管理页面tab布局样式代码
完美仿新浪微博TAB布局
垂直Tab布局.这里有4个Tab选项 2013.10.27
一个综合的滑动门及选项卡 TAB 布局实例
有关tab布局,实现tab布局,在actvity之间实现跳转
下面小编就为大家带来一篇CSS实现Tab布局的简单实例(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
android tab分页布局 wmq's program
学习使用tab布局,tabhost实现底部的菜单。仿飞信。
用于实现上tab选项卡的html 代码资源 ,初学者学参考。
Android现在实现Tab类型的界面方式越来越多,本文详细介绍了Android实现Tab布局的4种方式,具有一定的参考价值,有兴趣的可以了解一下。
你可以学习下在Android开发中,tablelayout 与viewpager如何关联,如何创建每个tag标签对应的Fragment,本源码中是创建5个标题并加入布局中,实际应用中,你可以根据需要添加或减少对应的TAb布局数量。 编译时请...
博客地址:http://blog.csdn.net/qq_20785431/article/details/52325683
jQuery tab选项卡切换和新闻资讯列表布局代码.zip
4.mainPage.html为tab布局,右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-test.html为tree节点...