Fragment实现Tab

最新推荐文章于 2019-03-03 20:25:40 发布
最新推荐文章于 2019-03-03 20:25:40 发布
阅读量179 收藏 1
点赞数
分类专栏： Android常用控件 文章标签： Android常用控件 Tap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amoscxy/article/details/80155970
版权

转载请注明出处amoscxy的博客：https://mp.csdn.net/mdeditor/80155970

转载请注明出处amoscxy的博客：https://mp.csdn.net/mdeditor/80155970

Fragment实现Tab

1.1 效果

这里写图片描述
只使用Fragment无法滑动界面

1.2 目录

这里写图片描述

1.3 素材

  • bottom_bar9.png
    这里写图片描述
    • tab_address_normal.png
      这里写图片描述
    • tab_address_pressed.png
      这里写图片描述
    • tab_bg2.png
      这里写图片描述
    • tab_find_frd_normal.png
      这里写图片描述
    • tab_find_frd_pressed.png
      这里写图片描述
    • tab_settings_normal.png
      这里写图片描述
    • tab_settings_pressed.png
      这里写图片描述
    • tab_weixin_normal.png
      这里写图片描述
    • tab_weixin_pressed.png
      这里写图片描述
    • title_bar9.png
      这里写图片描述

1.4 顶部提示栏top.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:background="@drawable/title_bar9"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>
  • 视图：
    这里写图片描述

1.5 底部标签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="55dp"
    android:background="@drawable/bottom_bar9"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_weixin_pressed" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_find_frd_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_address_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_settings"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_settings_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_settings_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#ffffff" />
    </LinearLayout>

</LinearLayout>
  • 视图：
    这里写图片描述

1.6 activity_main.xml

<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="match_parent"
    android:orientation="vertical" >

    <include layout="@layout/top" />

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

    <include layout="@layout/bottom" />

</LinearLayout>
  • 视图：
    这里写图片描述

1.7 四个切换界面

1.7.1 tab01.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" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Weixin Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示：
    这里写图片描述

1.7.2 tab02.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" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Frd Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示：
    这里写图片描述

1.7.3 tab03.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" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Address Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示：
    这里写图片描述

1.7.4 tab04.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" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Settings Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示：
    这里写图片描述

1.8 四个自定义Fragment

1.8.1 WeixinFragment

public class WeixinFragment extends Fragment {


    public WeixinFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab01,container,false);
    }

}

1.8.2 FrdFragment

public class FrdFragment extends Fragment {


    public FrdFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab02,container,false);
    }

}

1.8.3 AddressFragment

public class AddressFragment extends Fragment {


    public AddressFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab03,container,false);
    }

}

1.8.4 SettingFragment

public class SettingFragment extends Fragment {


    public SettingFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab04,container,false);
    }

}

1.9 MainActivity

package com.example.cxy.testtap;

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.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener
{
    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;

    private Fragment mTab01;
    private Fragment mTab02;
    private Fragment mTab03;
    private Fragment mTab04;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
        initEvents();
        setSelect(0);
    }

    private void setSelect(int i) {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                if(mTab01 == null){
                    mTab01 = new WeixinFragment();
                    transaction.add(R.id.id_content,mTab01);
                }else{
                    transaction.show(mTab01);
                }
                mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                if(mTab02 == null){
                    mTab02 = new FrdFragment();
                    transaction.add(R.id.id_content,mTab02);
                }else{
                    transaction.show(mTab02);
                }
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                if(mTab03 == null){
                    mTab03 = new AddressFragment();
                    transaction.add(R.id.id_content,mTab03);
                }else{
                    transaction.show(mTab03);
                }
                mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                if(mTab04 == null){
                    mTab04 = new SettingFragment();
                    transaction.add(R.id.id_content,mTab04);
                }else{
                    transaction.show(mTab04);
                }
                mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

    private void hideFragment(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);
        }
    }

    private void initEvents()
    {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

    private void initView()
    {
        // tabs
        mTabWeixin = findViewById(R.id.id_tab_weixin);
        mTabFrd = findViewById(R.id.id_tab_frd);
        mTabAddress = findViewById(R.id.id_tab_address);
        mTabSetting = findViewById(R.id.id_tab_settings);
        // ImageButton
        mWeixinImg = findViewById(R.id.id_tab_weixin_img);
        mFrdImg = findViewById(R.id.id_tab_frd_img);
        mAddressImg = findViewById(R.id.id_tab_address_img);
        mSettingImg = findViewById(R.id.id_tab_settings_img);
    }

    /**
     * 底部四个ImageButton都置为normal
     */
    private void resetImg()
    {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingImg.setImageResource(R.drawable.tab_settings_normal);
    }

    @Override
    public void onClick(View v) {
        resetImg();
        switch (v.getId()){
            case R.id.id_tab_weixin:
                setSelect(0);
                break;
            case R.id.id_tab_frd:
                setSelect(1);
                break;
            case R.id.id_tab_address:
                setSelect(2);
                break;
            case R.id.id_tab_settings:
                setSelect(3);
                break;
            default:
                break;
        }
    }
}
  • 源码解析：
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;

都要使用v4包中的Fragment

public class MainActivity extends FragmentActivity implements OnClickListener
{ }

必须继承FragmentActivity

private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;

private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;

private Fragment mTab01;
private Fragment mTab02;
private Fragment mTab03;
private Fragment mTab04;

private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;
是底部四个tabs的LinearLayout布局

private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;
是底部的四个tabs布局中的ImageButton

private Fragment mTab01;
private Fragment mTab02;
private Fragment mTab03;
private Fragment mTab04;
是四个自定义Fragment

private void initView()
{
    // tabs
    mTabWeixin = findViewById(R.id.id_tab_weixin);
    mTabFrd = findViewById(R.id.id_tab_frd);
    mTabAddress = findViewById(R.id.id_tab_address);
    mTabSetting = findViewById(R.id.id_tab_settings);
    // ImageButton
    mWeixinImg = findViewById(R.id.id_tab_weixin_img);
    mFrdImg = findViewById(R.id.id_tab_frd_img);
    mAddressImg = findViewById(R.id.id_tab_address_img);
    mSettingImg = findViewById(R.id.id_tab_settings_img);
}

初始化控件

private void initEvents()
{
    mTabWeixin.setOnClickListener(this);
    mTabFrd.setOnClickListener(this);
    mTabAddress.setOnClickListener(this);
    mTabSetting.setOnClickListener(this);
}

设置点击监听事件

private void setSelect(int i) {
    FragmentManager fm = getSupportFragmentManager();
    FragmentTransaction transaction = fm.beginTransaction();
    hideFragment(transaction);
    switch (i){
        case 0:
            if(mTab01 == null){
                mTab01 = new WeixinFragment();
                transaction.add(R.id.id_content,mTab01);
            }else{
                transaction.show(mTab01);
            }
            mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case 1:
            if(mTab02 == null){
                mTab02 = new FrdFragment();
                transaction.add(R.id.id_content,mTab02);
            }else{
                transaction.show(mTab02);
            }
            mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case 2:
            if(mTab03 == null){
                mTab03 = new AddressFragment();
                transaction.add(R.id.id_content,mTab03);
            }else{
                transaction.show(mTab03);
            }
            mAddressImg.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 3:
            if(mTab04 == null){
                mTab04 = new SettingFragment();
                transaction.add(R.id.id_content,mTab04);
            }else{
                transaction.show(mTab04);
            }
            mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
            break;
        default:
            break;
    }
    transaction.commit();
}

点击底部的四个LinearLayout组件后四个自定义Fragment会跟随变化

private void resetImg()
{
    mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
    mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
    mAddressImg.setImageResource(R.drawable.tab_address_normal);
    mSettingImg.setImageResource(R.drawable.tab_settings_normal);
}

底部四个ImageButton都置为normal状态

1.10 使用Fragment的好处

可以通过各自的Fragment来控制自己的布局和逻辑，不会是代码都冗余在activity里面，activity只作为一个调度器，来显示和隐藏对应的Fragment，这样便于后期的维护和复用

转载请注明出处amoscxy的博客：https://mp.csdn.net/mdeditor/80155970

amoshcxy
关注
专栏目录
Fragment嵌套Fragment实现多tab页面
03-16
原来做的一个练手的项目，里面主要是Fragment的嵌套，需要的朋友可以看下，如果遇到不能运行的状况可酌量删除些代码。
用Fragment实现Tab页面切换效果初步总结
duyang的专栏
07-17 1542
前言： 最近在Android项目中需要在活动中实现多页面切换的功能，第一次是实现的过程中，是让Activity同时去加载三个界面的，通过点击tab按钮对页面设置隐藏和显示，实现页面切换效果，但是后面发现这种实现方式其实存在很多问题： 首先，同时去加载三个页面，切换Activity的速度会变慢，尤其是布局中如果有很多ImageView，ImageButton等使用到图片资源的控件时，切换效果
Fragment实现tab功能
Android学习之旅
10-24 1829
http://download.csdn.net/detail/yuanzeyao2008/6447163 在以后的开发过程中，Fragment肯定越来越受欢迎，在此我在网上搜集了一些资料，然后经过整理实现了使用Fragment实现tab功能，代码我已经提供了下载地址，希望对大家有帮助。下载地址FragmentDemo
fragment实现Tab效果
God Liao On The Way
10-04 304
使用下面两句代码获取对fragment的事务处理： FragmentManager fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction();使用FrameLayout来显示fragment, 通过transaction.add（int framelayou
安卓Android源码——Fragment实现tab实例代码.zip
10-11
以上就是使用Fragment实现tab实例的基本步骤。这个实例不仅教你如何创建和管理Fragment，还展示了如何在不同页面间进行导航。理解并掌握这部分知识对任何Android开发者来说都是至关重要的，因为它能帮助你构建更加...
Android的Fragment实现Tab切换
11-28
本教程将详细介绍如何使用Fragment实现Tab切换功能，以便于创建更加动态和交互丰富的应用界面。 首先，我们需要理解Fragment的基本概念。Fragment是Activity的一部分，可以独立存在，也可以与Activity中的其他...
安卓FragmentTab选项卡相关-Fragment实现tab切换不坑自用.zip
07-29
在这个"安卓FragmentTab选项卡相关-Fragment实现tab切换不坑自用.zip"压缩包中，我们可以看到一个关于如何使用Fragment实现Tab切换的实例。 首先，我们要理解FragmentTab的基本原理。通常，我们会使用ActionBar或者...
Android利用Fragment实现Tab选项卡效果
09-01
总结来说，利用Fragment实现Tab选项卡效果主要涉及以下几个步骤： 1. 创建一个适配器类（如`FragmentTabAdapter`）来管理Fragment和Tab的切换。 2. 使用RadioGroup作为用户界面元素，监听用户的选择。 3. 在用户切换...
使用Fragment实现Tab切换（高仿微信）
07-07
使用Activity+Fragment实现Tab切换效果，常见使用场景是应用的主界面，高仿微信。
Fragment实现Tab功能
10-24
由于Google官方不推荐使用TabActivity，所以这里使用Fragment来实现这以功能，希望能对大家有用。
Fragment&Tab选项卡
11-24
例子源码中的Fragment&Tab选项卡
FragmentTabHost+Fragment+ViewPager（选中当前页面加载布局。）
04-19
绝对物有所值。所以大都会用到ViewPager+Fragment，但是Fragment有个不好或者太好的地方。例如你在ViewPager中添加了三个Fragment，当加载ViewPager中第一个Fragment时，它会默认帮你预先加载了第二个Fragment，当你加载第二个Fragment时，它会帮你加载第三个Fragment。这样虽然有时很好，但是用户只需看一个Fragment时，我们就做了一些多余工作加载了第二个Fragment。在这只需要取消Fragment的预加载即可，只有当用户切换到某个Fragment才加载..
fragment实现Tab功能
03-23
利用fragment实现仿微信的Tab功能
在fragment中实现仿tab效果
weixin_30436101的博客
04-10 80
最近由于项目需要在fragment中实现一个tab支持click监听和page滑动。 现在主流的都是使用viewPager+fragmentadapter来实现，但是他们都是在activity中实现。 如果直接把这一套直接搬进到fragment中fragment会显示不出来，界面一团黑启动不起来。 最后在网上找到该博主的解决方案，链接：http://blog...
使用Fragment实现Tab效果
bai8005的博客
09-30 193
在上一篇中，我们将了使用ViewPager实现Tab效果。如果没有阅读过，可以点击下面的地址： http://www.cnblogs.com/fuly550871915/p/4849893.html 在这一篇中我们讲一下使用Fragment实现Tab效果，而这种实现方式也是推荐的方式。与用ViewPager实现的效果有一点不同。 一、效果展示 ...
多种多样的App主界面Tab实现方法——单独利用Fragment实现Tab
Just follow myself heart.
03-10 1013
视频地址：http://www.imooc.com/video/5903 在单独利用Fragment实现Tab
fragment里的tab
weixin_43241892的博客
03-03 131
package com.bawei.week3.fragment; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.view.View; import com...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值