Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager

于 2024-04-30 18:39:51 发布
阅读量499 收藏 12
点赞数 7
分类专栏： 程序员 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84545747/article/details/138354114
版权

1、传统的ViewPager实现

主要就是ViewPager+ViewAdapter这个还是比较常见的，就不多说了

效果图：

代码：

package com.example.mainframework02;

import java.util.ArrayList;

import java.util.List;

import android.app.Activity;

import android.os.Bundle;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageButton;

import android.widget.ImageView;

import android.widget.LinearLayout;

public class TraditionalViewPagerAcvitity extends Activity

{

/**

  • ViewPager

*/

private ViewPager mViewPager;

/**

  • ViewPager的适配器

*/

private PagerAdapter mAdapter;

private List mViews;

private LayoutInflater mInflater;

private int currentIndex;

/**

  • 底部四个按钮

*/

private LinearLayout mTabBtnWeixin;

private LinearLayout mTabBtnFrd;

private LinearLayout mTabBtnAddress;

private LinearLayout mTabBtnSettings;

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mInflater = LayoutInflater.from(this);

mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

/**

  • 初始化View

*/

initView();

mViewPager.setAdapter(mAdapter);

mViewPager.setOnPageChangeListener(new OnPageChangeListener()

{

@Override

public void onPageSelected(int position)

{

resetTabBtn();

switch (position)

{

case 0:

((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

.setImageResource(R.drawable.tab_weixin_pressed);

break;

case 1:

((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

.setImageResource(R.drawable.tab_find_frd_pressed);

break;

case 2:

((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

.setImageResource(R.drawable.tab_address_pressed);

break;

case 3:

((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

.setImageResource(R.drawable.tab_settings_pressed);

break;

}

currentIndex = position;

}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2)

{

}

@Override

public void onPageScrollStateChanged(int arg0)

{

}

});

}

protected void resetTabBtn()

{

((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

.setImageResource(R.drawable.tab_weixin_normal);

((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

.setImageResource(R.drawable.tab_find_frd_normal);

((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

.setImageResource(R.drawable.tab_address_normal);

((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

.setImageResource(R.drawable.tab_settings_normal);

}

private void initView()

{

mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);

mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);

mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);

mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);

mViews = new ArrayList();

View first = mInflater.inflate(R.layout.main_tab_01, null);

View second = mInflater.inflate(R.layout.main_tab_02, null);

View third = mInflater.inflate(R.layout.main_tab_03, null);

View fourth = mInflater.inflate(R.layout.main_tab_04, null);

mViews.add(first);

mViews.add(second);

mViews.add(third);

mViews.add(fourth);

mAdapter = new PagerAdapter()

{

@Override

public void destroyItem(ViewGroup container, int position, Object object)

{

container.removeView(mViews.get(position));

}

@Override

public Object instantiateItem(ViewGroup container, int position)

{

View view = mViews.get(position);

container.addView(view);

return view;

}

@Override

public boolean isViewFromObject(View arg0, Object arg1)

{

return arg0 == arg1;

}

@Override

public int getCount()

{

return mViews.size();

}

};

}

}

评价：所有的代码都集中在一个Activity中，显得代码比较乱。

2、FragmentManager+Fragment实现

主要利用了Fragment在主内容界面对Fragment的add,hide等事务操作。

效果图：

代码：

主Activity

package com.example.mainframework02.fragment;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.app.FragmentManager;

import android.app.FragmentTransaction;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ImageButton;

import android.widget.LinearLayout;

import com.example.mainframework02.R;

public class FragmentMainActivity extends Activity implements OnClickListener

{

private MainTab02 mTab02;

private MainTab01 mTab01;

private MainTab03 mTab03;

private MainTab04 mTab04;

/**

  • 底部四个按钮

*/

private LinearLayout mTabBtnWeixin;

private LinearLayout mTabBtnFrd;

private LinearLayout mTabBtnAddress;

private LinearLayout mTabBtnSettings;

/**

  • 用于对Fragment进行管理

*/

private FragmentManager fragmentManager;

@SuppressLint(“NewApi”)

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.fragment_main);

initViews();

fragmentManager = getFragmentManager();

setTabSelection(0);

}

private void initViews()

{

mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);

mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);

mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);

mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);

mTabBtnWeixin.setOnClickListener(this);

mTabBtnFrd.setOnClickListener(this);

mTabBtnAddress.setOnClickListener(this);

mTabBtnSettings.setOnClickListener(this);

}

@Override

public void onClick(View v)

{

switch (v.getId())

{

case R.id.id_tab_bottom_weixin:

setTabSelection(0);

break;

case R.id.id_tab_bottom_friend:

setTabSelection(1);

break;

case R.id.id_tab_bottom_contact:

setTabSelection(2);

break;

case R.id.id_tab_bottom_setting:

setTabSelection(3);

break;

default:

break;

}

}

/**

  • 根据传入的index参数来设置选中的tab页。

*/

@SuppressLint(“NewApi”)

private void setTabSelection(int index)

{

// 重置按钮

resetBtn();

// 开启一个Fragment事务

FragmentTransaction transaction = fragmentManager.beginTransaction();

// 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况

hideFragments(transaction);

switch (index)

{

case 0:

// 当点击了消息tab时，改变控件的图片和文字颜色

((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

.setImageResource(R.drawable.tab_weixin_pressed);

if (mTab01 == null)

{

// 如果MessageFragment为空，则创建一个并添加到界面上

mTab01 = new MainTab01();

transaction.add(R.id.id_content, mTab01);

} else

{

// 如果MessageFragment不为空，则直接将它显示出来

transaction.show(mTab01);

}

break;

case 1:

// 当点击了消息tab时，改变控件的图片和文字颜色

((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

.setImageResource(R.drawable.tab_find_frd_pressed);

if (mTab02 == null)

{

// 如果MessageFragment为空，则创建一个并添加到界面上

mTab02 = new MainTab02();

transaction.add(R.id.id_content, mTab02);

} else

{

// 如果MessageFragment不为空，则直接将它显示出来

transaction.show(mTab02);

}

break;

case 2:

// 当点击了动态tab时，改变控件的图片和文字颜色

((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

.setImageResource(R.drawable.tab_address_pressed);

if (mTab03 == null)

{

// 如果NewsFragment为空，则创建一个并添加到界面上

mTab03 = new MainTab03();

transaction.add(R.id.id_content, mTab03);

} else

{

// 如果NewsFragment不为空，则直接将它显示出来

transaction.show(mTab03);

}

break;

case 3:

// 当点击了设置tab时，改变控件的图片和文字颜色

((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

.setImageResource(R.drawable.tab_settings_pressed);

if (mTab04 == null)

{

// 如果SettingFragment为空，则创建一个并添加到界面上

mTab04 = new MainTab04();

transaction.add(R.id.id_content, mTab04);

} else

{

// 如果SettingFragment不为空，则直接将它显示出来

transaction.show(mTab04);

}

break;

}

transaction.commit();

}

/**

  • 清除掉所有的选中状态。

*/

private void resetBtn()

{

((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

.setImageResource(R.drawable.tab_weixin_normal);

((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

.setImageResource(R.drawable.tab_find_frd_normal);

((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

.setImageResource(R.drawable.tab_address_normal);

((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

.setImageResource(R.drawable.tab_settings_normal);

}

/**

  • 将所有的Fragment都置为隐藏状态。

  • @param transaction

  •        用于对Fragment执行操作的事务

*/

@SuppressLint(“NewApi”)

private void hideFragments(FragmentTransaction transaction)

{

if (mTab01 != null)

{

transaction.hide(mTab01);

}

if (mTab02 != null)

{

transaction.hide(mTab02);

}

if (mTab03 != null)

{

transaction.hide(mTab03);

}

if (mTab04 != null)

{

transaction.hide(mTab04);

}

}

}

各个TabFragment，一共四个TabFragment，下面贴出两个，基本都一样。

package com.example.mainframework02.fragment;

import android.annotation.SuppressLint;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

@SuppressLint(“NewApi”)

public class MainTab01 extends Fragment

{

最后

针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！

  • Android前沿技术大纲

  • 全套体系化高级架构视频

Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

@SuppressLint(“NewApi”)

public class MainTab01 extends Fragment

{

最后

针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！

  • Android前沿技术大纲

    [外链图片转存中…(img-rr8F9D1d-1714473580405)]

  • 全套体系化高级架构视频

    [外链图片转存中…(img-uZowFZSV-1714473580405)]

Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84545747
关注
  • 7
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android的Tab方法
03-22
Android中实现多个Tab的多种多样的App主界面Tab实现方法
Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager
weixin_30305735的博客
04-29 285
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/24740977Android现在实现Tab类型的界面方式越来越多，今天就把常见的实现方式给大家来个总结。目前写了：1、传统的ViewPager实现2、FragmentManager+Fragment实现3、ViewPager+FragmentPagerAdapter实现4、Ta...
Android 位于底部的Tab
linghu_java的专栏
08-30 7330
第一步：首先你得了解TabHost和TabWidget， 将TabHost分为两个部分，一个是放内容的，还有一个就是放选项卡的，我们这里选项卡用TabWidget。TabHost的id应该写为 android:id="@android:id/tabhost"，而不是以前的那个加
Android Tab实现
ostracod
06-17 992
Android底部tab实现思路： 1、Viewpager实现底部Tab 思路：      （1）、编写三个布局，底部分类布局（bottom.xml），顶部标题布局(top.xml)，中间内容布局（中间放置                                   Viewpager控件），可以在一个主布局中引入顶部和底部布局使用include layout属性。   
Android Tab导航
Android
10-18 993
demo中实现tab有2中方式：TabPageIndicator和TabLayoutTabPageIndicator实现需要导入com.inkapplications.viewpageindicatorTabLayout实现需要导入com.android.support:designTabPageIndicator和TabLayout的介绍（自我总结）TabPageIndicator和TabLayo
利用fragment+ViewPager实现主界面布局
09-17
在Android应用开发中，...在实际开发中，利用Fragment和ViewPager的组合，可以轻松实现Android主界面的动态布局，适应不同尺寸的屏幕，提供丰富的用户体验。通过合理的设计和优化，可以使应用程序更加高效且功能强大。
Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果
08-26
"Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果" Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果是Android开发中常用的技术之一。本文将对其进行详细介绍，并提供了具体的实现代码。 知识...
IndicaterTab:使用VIewpager+ViewPagerIndicator+Fragment实现的tab主界面
06-08
【标题】"IndicaterTab:使用VIewpager+ViewPagerIndicator+Fragment实现的tab主界面"涉及的关键知识点包括： 1. ViewPager：这是一个Android SDK中的组件，用于在多个视图之间进行平滑滚动，通常用于创建滑动 tabs...
仿网易基本UI架构，Fragment+Viewpager
11-12
在Android应用开发中，"仿网易基本UI架构，Fragment+ViewPager"是一个常见的设计模式，用于构建高效的、可滚动的屏幕视图。这个架构主要用于实现类似网易新闻客户端的多板块滑动浏览效果，允许用户在不同的内容区域...
Android tab的实现
12-05
该源码实现了tab，并且在同一个tab内部实现了多个activity的跳转。
Android实现Tab布局的4种方式（Fragment+TabPageIndicator+ViewPager）
01-04
Android现在实现Tab类型的界面方式越来越多，今天就把常见的实现方式给大家来个总结。目前写了： 1、传统的ViewPager实现 2、FragmentManager+Fragment实现 3、ViewPager+FragmentPagerAdapter实现 4、TabPageIndicator+ViewPager+FragmentPagerAdapter 1、传统的ViewPager实现 主要就是ViewPager+ViewAdapter这个还是比较常见的，就不多说了 效果图： 代码： package com.example.mainframework02; import ja
Android TabLayout(选项卡布局)简单用法实例分析
09-02
主要介绍了Android TabLayout(选项卡布局)简单用法,结合实例形式简单分析了Android选项卡布局的界面布局与功能实现具体相关技巧,需要的朋友可以参考下
android自定义Tab选项卡控件
07-21
android自定义控件，实现选项卡功能。可通过自定义属性设置选项卡样式，且Tab的数目也可通过属性灵活设置，可设置为文本选项卡或图片选项卡，利用回调监听响应各Tab的点击事件，且设置方法和android原生控件设置点击监听的方法基本一致。
android项目Tab标签页大汇总
11-11
android项目Tab标签页大汇总 [注：本内容来自网络，在此分享仅为帮助有需要的网友，如果侵犯了您的权利，麻烦联系我，我会第一时间删除，谢谢您。]
Android的Tab控件（二）
热门推荐
lhp1331的专栏
08-26 1万+
在上一篇Android的Tab控件（一）中，各个tabPage都由独立的Activity来实现。然而TabHost还有另外一种实现方法。接下来就来讲解，在实现的时候我附加了一个功能，就是当tab页太多的时候，默认情况下tab页会缩小挤在一起，我们给TabWidget加一个HorizontalScrollView，就可以实现TabWidget的左右滚动。先来看效果图； Activity代码：
Android Tab简介
linghu_java的专栏
02-11 701
TabHost是tab窗口的容器。一个TabHost对象包含两个子元素：一个对象是tab集合（TabWidget），用户点击它们来选择一个特定的tab项；另一个是FrameLayout对象，展示当前tab的内容。子元素通常是通过TabHost容器对象来控制，而不是直接设置子元素的值。实现方式有继承TabActivity、继承Activity类两种。 1. 从TabActivity中用getT
Android Tab 控件的使用
tomcat的专栏
10-17 950
在桌面应用中Tab控件使用得非常普遍，那么我们经常在Android中也见到以Tab进行布局的客户端。那么Android中的Tab是如何使用的呢？ 1.Activity package com.wicresoft.activity; import com.wicresoft.myandroid.R; import android.app.TabActivity; import android
Android应用主界面设计：Fragment实现经典Tab切换
"本文介绍了如何构建一个经典的Android应用主界面，类似于QQ应用的界面设计，主要由底部tab栏、顶部标题栏以及中间的fragment内容展示组成。文中提到，早期这种设计通常使用tabhost+activitygroup实现，但现在更倾向...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值