文档章节

Android Fragment —Tab 导航栏的实现

维他ViTa
 维他ViTa
发布于 2016/11/25 16:45
字数 1547
阅读 166
收藏 0

        微信、QQ、微博底部等都有 Tab 标签选项,点击不同的标签可以切换的不同的界面。

步骤

1)描述主界面布局

activity_main.xml 代码如下:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@drawable/header_bg" >

        
        <RelativeLayout
            android:id="@+id/left_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >
                <ImageView
                    android:id="@+id/left_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/left_ico" />   
            </LinearLayout>
        </RelativeLayout>
      
        <RelativeLayout
            android:id="@+id/library_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >
                <ImageView
                    android:id="@+id/library_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/library_ico" />

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/local_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/local_ico" />

            </LinearLayout>
        </RelativeLayout>


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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/news_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/news_ico" />


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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/search_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/search_ico" />
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>
    
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>

</LinearLayout>

说明:代码可能看着有点长,先看下布局之后的 outline 和 可视化编辑区效果:(仿“网易云音乐界面”)

        

  • 主体分为 LinearLayout 和 FrameLayout(id=connect),分别放置 Tab 标签按钮和对应内容
  • LinearLayout 中分 5 个部分(左侧菜单栏left、乐库library、本地音乐local、动态news)
  • (本次实例主要实现中间 3 个 Tab导航即可)

2)设置每个 Fragment 的布局

library_layout.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" 
    android:background="@drawable/library_bg">
</LinearLayout>

说明:放置了一张背景图片 library_bg.png,其他两个布局相似

local_layout.xml 与 news_layout.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" 
    android:background="@drawable/local_bg">
</LinearLayout>
<?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:background="@drawable/news_bg" >
</LinearLayout>

3)创建对应布局的 Fragment 类(继承于 Fragment)

LibraryFragment.java 代码如下:

public class LibraryFragment extends Fragment{
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View libraryLayout =inflater.inflate(R.layout.library_layout, container,false);
		return libraryLayout;
	}
	
}

说明:新建类继承于 Fragment,其他两个类相似

LocalFragmet.java 与 NewsFragment.java 代码如下:

public class LocalFragment extends Fragment{
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View localLayout =inflater.inflate(R.layout.local_layout, container,false);
		return localLayout;
	}
	
}
public class NewsFragment extends Fragment{
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View newsLayout =inflater.inflate(R.layout.news_layout, container,false);
		return newsLayout;
	}
	
}

4)在 MainActivity.java 中添加响应代码

MainActivity.java 代码如下:

public class MainActivity extends Activity implements OnClickListener{	
	/*
     * 用于展示的Fragment 
     */  
    private LibraryFragment libraryFragment;
    private LocalFragment localFragment; 
    private NewsFragment newsFragment; 
    
    
    /* 
     * 界面布局 
     */  
    private View libraryLayout;
    private View localLayout; 
    private View newsLayout; 

    /* 
     * 在Tab布局上显示图标的控件 
     */  
    private ImageView libraryImage;
    private ImageView localImage;
    private ImageView newsImage;
    
    /*
     * 用于对Fragment进行管理 
     */  
    private FragmentManager fragmentManager;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        setContentView(R.layout.activity_main);  
        // 初始化布局元素(方法实现在下面的代码)  
        initViews();  
        fragmentManager = getFragmentManager();  
        // 第一次启动时选中第0个tab(方法实现在下面的代码) 
        setTabSelection(0);  
    }  

    /*
     * 在这里获取到每个需要用到的控件的实例,并给它们设置好必要的点击事件。 
     */  
    private void initViews() {  
        libraryLayout = findViewById(R.id.library_layout);  
        localLayout = findViewById(R.id.local_layout);  
        newsLayout = findViewById(R.id.news_layout);  
         
        libraryImage = (ImageView) findViewById(R.id.library_image);  
        localImage = (ImageView) findViewById(R.id.local_image);  
        newsImage = (ImageView) findViewById(R.id.news_image);  
 
        libraryLayout.setOnClickListener(this);  
        localLayout.setOnClickListener(this);  
        newsLayout.setOnClickListener(this);  
 
    }  

    /*
     * 点击事件的响应代码 
     */ 
    @Override  
    public void onClick(View v) {  
        switch (v.getId()) {  
        case R.id.library_layout:  
            // 当点击了第0个tab时,选中第1个tab  
            setTabSelection(0);  
            break;  
        case R.id.local_layout:  
            // 当点击了第1个tab时,选中第2个tab  
            setTabSelection(1);  
            break;  
        case R.id.news_layout:  
            // 当点击了第2个tab时,选中第3个tab  
            setTabSelection(2);   
            break;  
        default:  
            break;  
        }  
    }  
  
    /** 
     * 根据传入的index参数来设置选中的tab页。 
     *  
     * @param index:每个tab页对应的下标。0表示乐库,1表示本地,2表示动态 
     * 
     *
     */  
    private void setTabSelection(int index) {  
        // 每次选中之前先清楚掉上次的选中状态  
        clearSelection();  
        // 开启一个Fragment事务  
        FragmentTransaction transaction = fragmentManager.beginTransaction();  
        // 先隐藏掉所有的Fragment,以防止有多个Fragment显示在界面上的情况  
        hideFragments(transaction);  
        switch (index) {  
        case 0:  
            // 当点击了乐库tab时,改变控件的图片颜色  
            libraryImage.setImageResource(R.drawable.library_selected);  
           // libraryTitle.setTextColor(Color.RED);  
            if (libraryFragment == null) {  
                // 如果LibraryFragment为空,则创建一个并添加到界面上  
                libraryFragment = new LibraryFragment();  
                transaction.add(R.id.content, libraryFragment);  
            } else {  
                // 如果LibraryFragment不为空,则直接将它显示出来  
                transaction.show(libraryFragment);  
            }  
            break;  
        case 1:  
            // 当点击了本地tab时,改变控件的图片颜色  
            localImage.setImageResource(R.drawable.local_selected);  
           // localTitle.setTextColor(Color.RED);  
            if (localFragment == null) {  
                // 如果LocalFragment为空,则创建一个并添加到界面上  
                localFragment = new LocalFragment();  
                transaction.add(R.id.content, localFragment);  
            } else {  
                // 如果LocalFragment不为空,则直接将它显示出来  
                transaction.show(localFragment);  
            }  
            break;  
        case 2:  
            // 当点击了动态tab时,改变控件的图片颜色  
            newsImage.setImageResource(R.drawable.news_selected);  
           // newsTitle.setTextColor(Color.RED);  
            if (newsFragment == null) {  
                // 如果NewsFragment为空,则创建一个并添加到界面上  
                newsFragment = new NewsFragment();  
                transaction.add(R.id.content, newsFragment);  
            } else {  
                // 如果NewsFragment不为空,则直接将它显示出来  
                transaction.show(newsFragment);  
            }  
            break;  }
     
        transaction.commit();  
    }  
  
    /** 
     * 清除掉所有的选中状态。 
     */  
    private void clearSelection() {  
        libraryImage.setImageResource(R.drawable.library_ico);  

        localImage.setImageResource(R.drawable.local_ico);  

        newsImage.setImageResource(R.drawable.news_ico);  


    }  
  
    /** 
     * 将所有的Fragment都置为隐藏状态。 
     *  
     * @param transaction :用于对Fragment执行操作的事务 
     */  
      private void hideFragments(FragmentTransaction transaction) {  
        if (libraryFragment != null) {  
            transaction.hide(libraryFragment);  
        }  
        if (localFragment != null) {  
            transaction.hide(localFragment);  
        }  
        if (newsFragment != null) {  
            transaction.hide(newsFragment);  
        }    
}  


}

代码有点长,但是注释很详细,简单整理一下

  • initView():获取控件的实例并为其注册点击事件监听器
  • onClick(View v):点击事件的响应代码
  • setTabSelection(int index):根据 index 确定被选中的 Tad
  • clearSelection():清除 Tab 被选中的状态
  • hideFragment():将对应的 Fragment 设置为隐藏状态

说明:监听到点击事件,就响应 onClick() 中相应的代码,即把对应 Tab 状态改变:“未选中”→“选中”,同时显示对应的 Fragment 至 id 为 connect 的 FrameLayout 布局上;但在此之前需要清除之前的选中状态以及隐藏之前显示的 Fragment 。

示例程序

(仿 网易云音乐)点击中间三个图标,切换到各自界面;

 

附:目录结构

 

方法参考: Android Fragment应用实战,使用碎片向ActivityGroup说再见

© 著作权归作者所有

维他ViTa
粉丝 14
博文 145
码字总数 45749
作品 0
深圳
程序员
私信 提问
Android 用户界面---操作栏(Action Bar 四)

创建一个定制的操作提供器 当你想要创建一个有动态行为和在溢出菜单中有默认图标的操作视窗时,,继承ActionProvider类来定义这些行为是一个比好的的方案。创建自己的操作提供器,提供一个有...

长平狐
2012/10/16
325
0
TabLayout实现顶部导航(一)

前言 顶部导航栏,是我们在开发中比较常见的一种显示布局,它的实现可以有多种方式,那么今天我们就来讲讲 TabLayout 对它的实现。 此篇文章参考以下链接 TabLayout轻松实现仿今日头条顶部t...

奔跑的佩恩
01/07
0
0
Android项目开发之--------地铁时光机(一,搭建主框架)

Android项目开发之--------地铁时光机(一,搭建主框架) 一:先看一下框架搭建后的效果图 , 二:框架结构   (1)底部导航栏采用的是: MainActivity(主框架), MsgFragment(首页), ...

SEOwhywhy
06/29
42
0
工作小结,简单的主页框架,可左右滑动,viewpage+fragment,

一款安卓应用,好歹也是一个系统啊,既然称得上是系统,就要考虑系统的稳定性,功能模块的耦合性,复用程度等等,所以一个好的开发模型必然达到事半功倍的效果。 目前(2015年11月),常见的...

Carbenson
2015/11/18
623
0
程序猿媛二:Android底部导航栏(选项卡)

底部导航栏(选项卡) ViewPager+RadioGroup 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。源码请通过应用内下载。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/10
17.8K
3

没有更多内容

加载失败,请刷新页面

加载更多

聊聊rocketmq的TransientStorePool

序 本文主要研究一下rocketmq的TransientStorePool TransientStorePool rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/TransientStorePool.java publi......

go4it
昨天
5
0
笔记

场外借贷, 质押 ,托管, 永续合约. 场外借贷,n签合同. 新功能 证券交易组负责中信证券机构及个人投资交易相关系统,服务机构及个人投资客户, 涉及到两融、期权、 期货、做市等境内境外创新业...

MtrS
昨天
5
0
Pycharm最新激活码2019----亲测可用

今天来讲解下pycharm的激活码使用 其实非常简单 把激活码填入下面的地方即可。如果不知道在哪里,那么就选菜单栏里的help再选Register就会弹出下面的界面 激活码网址里面有 lookdiv.com 里面...

chenhongjiang
昨天
5
0
nginx下请求模拟接口json返回405

修改nginx配置文件,在 server 块中添加以下内容: error_page 405 =200 @405;location @405 { proxy_method GET; proxy_pass http://localhost;# 此处应为你本地的地址} 重启n...

Jacktanger
昨天
3
0
Mybatis之插件分析

前言 Mybatis提供了强大的扩展功能,也就是Mybatis的插件(plugins)功能;MyBatis允许你在已映射语句执行过程中的某一点进行拦截调用,拦截之后可以对已有方法添加一些定制化的功能,比如常...

ksfzhaohui
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部