安科网

tab布局

anbowing

anbowing

2016-01-15

关注 关注

  为了提高屏幕的复用，摒弃Activity重量级的页面加载，android提供了fragment这种轻量级的控件，她和Activity一样有生命周期，同时又依附于Activity

  下面，主要介绍在一个Activity里加载多个fragment来复用屏幕，实现tab导航栏的效果。
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布局 android fragment

anbowing

anbowing

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

tab布局

为了提高屏幕的复用，摒弃Activity重量级的页面加载，android提供了fragment这种轻量级的控件，她和Activity一样有生命周期，同时又依附于Activity. 下面，主要介绍在一个Activity里加载多个fragment来复用屏幕，实

wangkuifeng0 2016-01-15

Android学习（Week1）

第一周学了了安卓的各种布局结构，有线性布局，这是一种普适性较强，较受欢迎的布局结构，自由度高，可以方便自由的定义控件的位置。结构比较干净不冗余，且适合初学者学习研究。除此之外还介绍了相对布局，这是一种位置感较强的布局，可以较好的把握控件的空间感和位置结构，

hqulyc 2020-02-21

Android常用布局和控件

4、公共属性1) layout_width -宽 fill_parent: 宽度和父元素相同，wrap_content: 宽度随本身的内容所调整，或者指定 px值来设置宽2) layout_height - 高 fill_parent: 高度和父元素相

fengyeezju 2020-02-02

Android 的UI基础布局的学习

　　　　一、　　今天学习了Android 的UI基础布局的部分，绝大多数的布局都在Androidstudio的这个界面里，如下：。　　　　　　UI布局共有三种方法，xml文件进行布局，java编译进行布局，xml+java同时布局；　　　　　　xml文件布

fengyeezju 2020-02-02

Android Studio阶段性学习总结_1

在建立第一个Android studio项目时，我遇到了很大的阻碍，像这种问题ERROR: Cause: unable to find valid certification path to requested target等等，我以为会像安装ecplis

安辉 2020-01-30

android界面布局

layout_width:中的“match_parent”表示要填满他所在的外框，而“wrap_content”表示它的大小只要满足内部所包含的界面组件即可。LinearLayout标签可以想象成一个外框，我们可以在其里面加入另外一个LinearLayou

pengjin 2020-01-28

Android：UI界面设计基础知识总结

大年初一，这里有我。寒假过的很快，转眼间已经荒废了两周的学习时间，现在想来仍然是惭愧不已。但时间已经流逝，我能做的就是抓紧当下，真正地投入到学习，投入到Android的学习中去。现在学习主要是跟着视频教程边看边学，现将学习到的零星知识点总结如下：。Andr

安辉 2020-01-25

Android的四大组件及Activity 的生命周期 及五种布局

Activity： 是Android与用户交互的窗口，Service: 后台服务于Activity , 封装有一个完整的逻辑功能，Content Provider ： 是Android 提供的第三方应用数据的访问方案，创建activity时调用 ， 设置在

fengyeezju 2020-01-11

Android布局管理器-使用LinearLayout实现简单的登录窗口布局

线性布局LinearLayout,分为水平和垂直线性布局。设置其为竖直线型布局。然后添加一个按钮，设置其颜色。

csdnuuu 2020-01-04

Android布局管理器-从实例入手学习相对布局管理器的使用

相对布局只要是要有参照物，即谁在谁下方，谁在谁左边，和谁左对齐，等等。然后再添加一个按钮使其在textView的下方以及在立即更新按钮的左边。android:text="发现新的版本，您想现在更新吗？

magic00 2020-01-04

Android布局属性详解

设置EditText为空时输入框内的提示信息。android:gravity属性是对该view 内容的限定．比如一个button 上面的text. 你可以设置该text 在view的靠左，靠右等位置．以button为例，android:gravity=&q

安辉 2013-07-14

Android界面布局基本知识简述

做Android界面布局有点像写html，要先给Android定框架，然后再在框架里面放控件，Android提供了几种框架,AbsoluteLayout,LinearLayout,RelativeLayout,TableLayout,FrameLayout

冰川孤辰 2013-07-12

Android 众多的布局属性详解

Android功能强大，界面华丽，但是众多的布局属性就害苦了开发者，下面这篇文章结合了网上不少资料，花费本人一个下午搞出来的，希望对其他人有用。EditText的android:hint 设置EditText为空时输入框内的提示信息。** 要注意一点，Dr

Tom天天 2013-07-12

【2013.07.03】界面布局

3.通过include包含进某个布局的局部布局，其中的控件也就相当于在当前的布局中，可在Java代码中通过findViewById直接获取

WangWY 2013-07-03

android 布局中控件居中且向左偏移的写法

第二种方案 不限layout，但是在eclipse预览的时候发现很奇怪的问题，就是虽然view 移动了，但是图形工具里拿鼠标去点那个view的时候发现他还在原来的位置上，不知道这是adt的bug，还是什么原理。但是我有一种预感是，android 界面初始化

Lzn0 2013-09-05

android布局小总结

android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 android:layout_centerInparent 相对于父元素完全居中 android:layout_a

CrazyDavid 2013-09-03

android布局之layout_weight

其值越小，则对应的layout_width或layout_height的优先级就越低，一般横向布局中，决定的是layout_width的优先级；纵向布局中，决定的是layout_height的优先级。举例说明，如果parent长度是10，模式是horizo

tianhui 2013-08-23

Android六大布局详解——GridLayout（网格布局）

本章以一个小的实现示例讲述：

绿豆饼 2019-11-12

Android常见布局控件之LinearLayout和TableLayout

android:gravity:指定控件中内容的基本内容。分别表示水平排列和垂直排列。LinearLayout是线性布局控件，它包含的子控件将以横向或竖向的方式排列，按照相对位置来排列所有的widgets或者其他的containers,超过边界时，某些控件

Rgenxiao 2011-04-06

Android常用布局控件之RelativeLayout

我们使用LinearLayout和TableLayout可以满足开发应用程序界面基本的要求。RelativeLayout是一种相对布局的控件，这个容器内部的子元素们可以使用彼此之间的相对位置或者和容器间的相对位置来进行定位，类似于网页设计中的CSS。在指定

西木 2011-04-06
anbowing

anbowing

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号