Tab实现之Fragment（二）

最新推荐文章于 2019-03-03 20:25:40 发布
最新推荐文章于 2019-03-03 20:25:40 发布
阅读量356 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo_ha/article/details/51281912
版权

在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:gravity="center"
    android:background="#080808"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="25sp"
        android:textStyle="bold"/>
</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="wrap_content"
    android:background="#0d0d0d"
    android:orientation="horizontal">

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

        <ImageView
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@mipmap/ic_launcher" />

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

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

        <ImageView
            android:id="@+id/id_tab_friend_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@drawable/android32" />

        <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="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@drawable/android32" />

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

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

        <ImageView
            android:id="@+id/id_tab_setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@drawable/android32" />

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


</LinearLayout>

 

 

在activity_main.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="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"
    ></FrameLayout>

    //布局底部的四个Tab
    <include layout="@layout/bottom"/>
</LinearLayout>

 

 

以下是四个滑动页面的布局

在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="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:textSize="40dp"
        android:text="这是微信 TAB"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="点击"
        android:id="@+id/tab01_button"/>
</LinearLayout>

 

 

在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="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40dp"
        android:text="这是朋友TAB"/>
</LinearLayout>

 

 

 

在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="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40dp"
        android:text="这是通讯录TAB"/>
</LinearLayout>

 

 

在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="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40dp"
        android:text="这是设置TAB"/>
</LinearLayout>

 

 

 

 

在MainActivity.class文件中

package com.example.yuxue.learntab_fragment;

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.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

//此处的需要继承V4下的  FragmentActivity
public class MainActivity extends FragmentActivity implements View.OnClickListener {

    //  TAB
    private LinearLayout tab_weixin;
    private LinearLayout tab_friend;
    private LinearLayout tab_address;
    private LinearLayout tab_setting;
    //    IMG
    private ImageView tab_weixin_img;
    private ImageView tab_friend_img;
    private ImageView tab_address_img;
    private ImageView tab_setting_img;
    //  Fragment
    private Fragment fragment01;
    private Fragment fragment02;
    private Fragment fragment03;
    private Fragment fragment04;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvents();
        setSlects(0);//第一次显示第一个Fragment
    }

    private void initView() {
        //  Tab
        tab_weixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        tab_friend = (LinearLayout) findViewById(R.id.id_tab_friend);
        tab_address = (LinearLayout) findViewById(R.id.id_tab_address);
        tab_setting = (LinearLayout) findViewById(R.id.id_tab_setting);
        // IMG
        tab_weixin_img = (ImageView) findViewById(R.id.id_tab_weixin_img);
        tab_friend_img = (ImageView) findViewById(R.id.id_tab_friend_img);
        tab_address_img = (ImageView) findViewById(R.id.id_tab_address_img);
        tab_setting_img = (ImageView) findViewById(R.id.id_tab_setting_img);
    }

    private void initEvents() {
        tab_weixin.setOnClickListener(this);
        tab_friend.setOnClickListener(this);
        tab_address.setOnClickListener(this);
        tab_setting.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        set_Img();//  先将所有的图片设置为暗色
        switch (v.getId()) {
            //  TAB 的点击事件
            case R.id.id_tab_weixin:
                //将相应图片设置为亮色    切换到相应的内容区域
                setSlects(0);
                break;
            case R.id.id_tab_friend:
                setSlects(1);
                break;
            case R.id.id_tab_address:
                setSlects(2);
                break;
            case R.id.id_tab_setting:
                setSlects(3);
                break;


        }
    }

    private void setSlects(int index) {
        FragmentManager fragmentManager = getSupportFragmentManager();//拿到Fragment的管理器
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();// 为Fragment创建一个事务
        hideAllFragment(fragmentTransaction);//   隐藏所有的  Fragment
        //选中相应地的选项卡，将相应图片设置为亮色 并   切换到相应的内容区域
        switch (index) {
            case 0:
                //判断Fragment是否为空  为空创建、添加并显示，否则就显示
                if (fragment01 == null) {
                    fragment01 = new WeixinFragemnt();
                    fragmentTransaction.add(R.id.id_content,fragment01);
                    fragmentTransaction.show(fragment01);
                } else {
                    fragmentTransaction.show(fragment01);
                }
                tab_weixin_img.setImageResource(R.mipmap.ic_launcher);
                break;
            case 1:
                if (fragment02 == null) {
                    fragment02 = new FriendFragemnt();
                    fragmentTransaction.add(R.id.id_content,fragment02);
                    fragmentTransaction.show(fragment02);
                } else {
                    fragmentTransaction.show(fragment02);
                }
                tab_friend_img.setImageResource(R.mipmap.ic_launcher);
                break;
            case 2:
                if (fragment03 == null) {
                    fragment03 = new AddressFragemnt();
                    fragmentTransaction.add(R.id.id_content,fragment03);
                    fragmentTransaction.show(fragment03);
                } else {
                    fragmentTransaction.show(fragment03);
                }
                tab_address_img.setImageResource(R.mipmap.ic_launcher);
                break;
            case 3:
                if (fragment04 == null) {
                    fragment04 = new SettingFragemnt();
                    fragmentTransaction.add(R.id.id_content,fragment04);
                    fragmentTransaction.show(fragment04);
                } else {
                    fragmentTransaction.show(fragment04);
                }
                tab_setting_img.setImageResource(R.mipmap.ic_launcher);
                break;
        }
        fragmentTransaction.commit();

    }

    private void hideAllFragment(FragmentTransaction transaction) {
        //  隐藏所有的  Fragment
        if (fragment01 != null) {
            transaction.hide(fragment01);
        }
        if (fragment02 != null) {
            transaction.hide(fragment02);
        }
        if (fragment03 != null) {
            transaction.hide(fragment03);
        }
        if (fragment04 != null) {
            transaction.hide(fragment04);
        }

    }

    private void set_Img() {
        //  将所有的图片设置为暗色
        tab_weixin_img.setImageResource(R.drawable.android32);
        tab_friend_img.setImageResource(R.drawable.android32);
        tab_address_img.setImageResource(R.drawable.android32);
        tab_setting_img.setImageResource(R.drawable.android32);
    }
}

 

在WeixinFragemnt.class文件中

 

package com.example.yuxue.learntab_fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

/**
 * Created by yuxue on 2016/4/29.
 */
public class WeixinFragemnt extends Fragment {

    private Button button;

    @Override
    //  创建Fragment  时调用
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    //  绘制Fragment时调用   常用的方法就是三个：  onCreate（） 、  onCreateView（）、  onPause( )
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab01, container, false);
        button = (Button) view.findViewById(R.id.tab01_button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "123456", Toast.LENGTH_SHORT).show();
            }
        });
        return view;
    }

}

 

在代码下成长
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
底部Tab页与Fragment结合用法
枫
06-22 518
之前就一直想写有关于这方面的东西，因为这些还是算比较基础的知识，对于这些一定得掌握好，才有利于以后的发展。 那么下面就进入今天的正题吧。 首先来看看效果图吧： 实现这样一种效果，其实很简单： 1、底部tab页 的实现方法，其实这里有很多种方法，比如说RadioButton之类的，我这里就直接用的ImageView和TextView 2、如何将Fragment和底部的Tab页关联起
Android的Fragment实现Tab切换
11-28
本教程将详细介绍如何使用Fragment实现Tab切换功能，以便于创建更加动态和交互丰富的应用界面。 首先，我们需要理解Fragment的基本概念。Fragment是Activity的一部分，可以独立存在，也可以与Activity中的其他...
TabFragment
03-17
TabLayout ViewPager Fragment 实现底部按钮菜单 Fragment 实现懒加载
tab + fragment
zy233762的博客
02-08 309
Tab+Fragment
weixin_30247307的博客
08-28 83
MainActivity.java package com.example.tabhostdemo; import java.util.ArrayList; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android...
tab+fragment实现主页
05-11
使用tabhost和fragment实现主页显示界面
Tab+Viewpage+Fragment实现导航
10-20
在Android应用开发中，"Tab+ViewPager+Fragment"是一种常见的实现导航的方式，它允许用户在多个页面间平滑切换，...总的来说，理解和掌握`Tab+ViewPager+Fragment`的使用是成为一名优秀的Android开发者必备的技能之一。
使用Fragment实现Tab效果
07-25
当我们需要实现类似Tab的效果时，`Fragment`和`TabLayout`结合使用是一个常见且实用的方法。下面我们将详细介绍如何利用`Fragment`来实现Tab效果。 首先，理解`Fragment`的基本概念。`Fragment`代表了Activity中的...
Fragment嵌套Fragment实现多tab页面
03-16
"Fragment嵌套Fragment实现多tab页面"这个项目就是利用了这一特性来构建一个具有多个选项卡的应用。 在Android中，TabLayout通常与ViewPager结合使用来创建滑动选项卡，每个选项卡对应一个Fragment。Fragment嵌套则...
Fragment实现Tab源码
12-11
在这个例子中，`Tab1Fragment`和`Tab2Fragment`是你需要自定义的`Fragment`类，分别实现各自Tab的逻辑和UI。 需要注意的是，随着Android设计风格的变化，现在更多地推荐使用`TabLayout`结合`ViewPager`来实现Tab...
Android Tab（TabLayout+Fragment）实现源码
01-21
Android Tab（TabLayout+Fragment）实现源码
Tab+Viewpage+Fragment实现导航.rar
12-17
源码参考，欢迎下载
Fragment实现Tab功能
10-24
由于Google官方不推荐使用TabActivity，所以这里使用Fragment来实现这以功能，希望能对大家有用。
Android 简单的tab fragment的demo
07-30
一个简单的android tab demo
Android--Fragment的使用（二）-TabFragment的使用
似水流年
04-23 509
AndroidStudio提供一个TabFragment的模板。
tab+Fragment管理最佳实践
u013168615的专栏
04-27 5085
现在的app视图中tab+fragment是最常用的一种布局，但是如果使用才是更简洁更有效的呢？下面通过一个demo的分类测试来分析下：add remove replace detach attach hide show这些方法的使用对Fragment生命周期的影响分析： 顺便分析下Fragment所依赖的Activity的生命周期；测试代码如下： MainActivity的代码如下：packa
fragment里的tab
weixin_43241892的博客
03-03 128
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...
andorid之tab+fragment的使用及结合viewpager，滑动时候重新oncreateView的优化
小钟的专栏
11-05 747
一、tab+fragment的show（）、hide()的使用         /** * 所有帮 * * @author zhongwr * */ public class AllBangTabAct extends BaseActivity implements LmbRequestCallBack, JoinOrExitBangLister { /** 当前选中的t
tab_fragment(Man)
Yang_Liu_1的博客
07-20 119
package com.bwei.fragment; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.design.widget.TabLayout; import andr...
Android应用主界面设计：Fragment实现经典Tab切换
"本文介绍了如何构建一个经典的Android应用主界面，...通过封装底部tab和使用fragment，可以实现高效且易于维护的代码结构。虽然文中没有详细展示所有代码，但通过提及的参考链接，开发者可以找到更具体的实现细节。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值