`

tab布局

viewpager导航栏androidfragment 
阅读更多

  为了提高屏幕的复用，摒弃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那样滑动，但是每一个导航条的内容是分割开来的，大大地降低了耦合，使得各个模块互不干扰，代码也不是很臃肿

  • 大小: 58 KB
分享到：
| 2015年的总结和2016年的期待
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    android的tab布局简单例子

    在Android应用开发中，Tab布局是一种常见的用户界面设计模式，用于在有限的空间内展示多个相关的视图或页面。TabHost是Android SDK提供的一种组件，它允许开发者创建具有多个Tab的界面，每个Tab代表一个单独的...

    Android Tablayout 自定义Tab布局的使用案例

    Android Tablayout 自定义Tab布局的使用案例 Android Tablayout 是 Android 设计库中的一部分，主要用于实现标签页功能。Tablayout 中的 Tab 可以自定义布局，以满足不同的需求。本文将 introduction 了 Android ...

    底部与顶部Tab布局

    在Android应用开发中，底部与顶部Tab布局是一种常见的界面设计模式，它为用户提供了一种直观且易用的方式来浏览和切换不同的功能模块。这种布局方式在许多应用中都可以看到，尤其在教育、社交、新闻阅读等领域非常...

    垂直Tab布局

    垂直Tab布局是一种常见的界面设计模式，尤其在内容较多、分类清晰的场景下，能够有效地组织信息，提高用户浏览效率。这种布局方式将Tab按钮沿着垂直方向排列，而不是传统的水平排列，从而节省横向空间，让页面看起来...

    jQuery easyui后台管理页面tab布局样式代码

    在本案例中，我们关注的是"jQuery EasyUI后台管理页面的tab布局样式代码"。 Tab布局是jQuery EasyUI中的一个重要特性，它允许在一个页面上展示多个并行的内容区域，每个区域被一个标签页所代表，用户可以通过点击...

    仿新浪微博TAB布局

    在Android应用开发中，"仿新浪微博TAB布局"是一种常见的界面设计模式，用于实现类似微博应用底部导航栏的效果。这种布局通常包含多个可切换的Tab，每个Tab对应一个不同的功能模块，如“首页”、“发现”、“消息”和...

    android底部tab布局

    在Android应用开发中，底部Tab布局是一种常见的设计模式，它用于在多个功能模块间进行切换。本示例是高仿新浪微博的底部Tab布局，通过使用Activity来实现这一功能。我们将探讨如何利用Android的TabHost组件以及相关...

    二种tab布局

    在Android开发中，Tab布局是一种常见的用户界面设计，用于实现多页面切换，为用户提供便捷的导航体验。在“二种tab布局”这个主题中，我们将深入探讨两种主要的Tab实现方式：一是使用Android自带的`TabHost`和`...

    android常见的主界面tab布局的4种实现方式

    封装了4种安卓中常见的tab布局的实现方式。 1：ViewPager实现 2：Fragment实现 3：ViewPager+Fragment实现 4：ViewPager+ViewPagerIndicator实现

    EXT 布局 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...

    Android Design新控件之TabLaout（二），仿微信实现App底部Tab布局

    在Android应用开发中，UI设计和用户体验是至关重要的部分，其中底部Tab布局是常见的导航模式，让用户能够方便地在不同的功能模块之间切换。本篇文章主要探讨如何使用Android Design Support Library中的TabLayout...

    tab布局代码

    在Android应用开发中，Tab布局是一种常见的用户界面设计模式，用于在有限的空间内展示多个页面或功能区域。这种布局方式通常由一个底部的标签栏（Tab Bar）和与之关联的内容区域组成，用户可以通过点击不同的标签来...

    android tab布局

    有关tab布局，实现tab布局，在actvity之间实现跳转

    最常用的主页面布局之一Tab

    Tab布局通常结合ViewPager和Fragment一起使用，提供一个可滑动的页面集合，每个页面都对应一个Tab标签，用户可以通过点击不同的Tab切换到相应的页面。这种设计模式既方便用户导航，又可以有效地展示丰富的信息。 ...

    布局实例漂亮Tab

    在Android中实现Tab布局，主要可以使用以下几种技术： 1. **TabHost**：这是Android早期版本中用于创建Tab布局的方式。TabHost允许开发者创建一个含有多个Tab的容器，并且每个Tab可以关联到一个单独的布局或活动。...

    swing多tab页面板练习

    在Java的Swing库中，开发GUI应用程序时，我们经常需要用到多Tab的界面设计，这可以为用户提供清晰的模块划分，提高交互体验。本练习主要关注如何创建和管理多个Tab，利用`javax.swing.JTabbedPane`组件来实现这一...

    CSS实现Tab布局的简单实例(必看)

    CSS实现Tab布局是指通过CSS来设计网页中用于内容切换的标签页布局方式，这是一种常见的用户界面交互设计，允许用户通过点击不同的标签来显示相应的页面内容。在给出的文档内容中，介绍了两种Tab布局的实现方式：内容...

    一个综合的滑动门及选项卡 TAB 布局实例

    滑动门布局（Sliding Door）和选项卡（Tab）布局是网页设计中常见的两种交互式界面设计技术，尤其在创建动态、响应式网站时，它们能为用户提供友好的导航体验。滑动门布局通常用于按钮或其他需要突出显示的元素，而...

    android布局实例微信界面Tab模仿

    在Android应用开发中，创建一个类似微信界面的Tab布局是一项常见的任务。微信界面以其清晰的组织结构和良好的用户体验而闻名，其中包括多个Tab来区分不同的功能模块，如“聊天”、“发现”、“通讯录”和“我”。在...

    android纵向的tab

    在Android开发中，Tab布局是一种常见的用户界面设计，用于展示多个相互关联的视图或内容区域。传统的Tab布局通常是水平的，但随着设备屏幕尺寸和交互方式的变化，纵向Tab的需求也在逐渐增加。本教程将详细介绍如何...

Magicbox
Global site tag (gtag.js) - Google Analytics