Android-实现底部切换标签(fragment)

最新推荐文章于 2024-07-12 20:42:27 发布
最新推荐文章于 2024-07-12 20:42:27 发布
阅读量2k 收藏 6
点赞数 4
分类专栏： android 文章标签： android 标签 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fnzsjt/article/details/50754052
版权

本篇讨论实现底部标签切换
话不多说，先上效果图
标签效果图

具体实现步骤，首先布局文件设计好下方标签，上方标题等内容。需要准备的内容为：图片素材，分2种（点击状态的和未点击状态）。布局代码如下

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

    <RelativeLayout
        android:id="@+id/rl_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <!-- 顶部 -->

        <RelativeLayout
            android:id="@+id/top_tab"
            android:layout_width="match_parent"
            android:layout_height="50dip"
            android:background="@color/topbar_bg" >

            <ImageView
                android:id="@+id/iv_logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:focusable="false"
                android:src="@drawable/zhidao_logo"
                android:contentDescription="@null" />

        </RelativeLayout>

        <!-- 底部tab -->

        <LinearLayout
            android:id="@+id/ll_bottom_tab"
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:layout_alignParentBottom="true"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:baselineAligned="true">

            <RelativeLayout
                android:id="@+id/rl_home"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0" >

                <ImageView
                    android:id="@+id/iv_home"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/index"
                    android:contentDescription="@null"/>

                <TextView
                    android:id="@+id/tv_home"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/iv_home"
                    android:layout_centerHorizontal="true"
                    android:text="@string/bottom_tab_home"
                    android:textColor="@color/bottomtab_normal"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/rl_find"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0" >

                <ImageView
                    android:id="@+id/iv_find"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/nav_find"
                    android:contentDescription="@null" />

                <TextView
                    android:id="@+id/tv_find"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/iv_find"
                    android:layout_centerHorizontal="true"
                    android:text="@string/bottom_tab_find"
                    android:textColor="@color/bottomtab_normal"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/rl_me"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0" >

                <ImageView
                    android:id="@+id/iv_me"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/nav_my"
                    android:contentDescription="@null" />


                <TextView
                    android:id="@+id/tv_me"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/iv_me"
                    android:layout_centerHorizontal="true"
                    android:text="@string/bottom_tab_my"
                    android:textColor="@color/bottomtab_normal"
                    android:textSize="12sp" />
            </RelativeLayout>
        </LinearLayout>

        <!-- 内容部分， fragment切换 -->

        <LinearLayout
            android:id="@+id/content_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/line"
            android:layout_below="@+id/top_tab"
            android:orientation="vertical" >
        </LinearLayout>

        <View
            android:id="@+id/line"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_above="@id/ll_bottom_tab"
            android:background="@color/line" />
    </RelativeLayout>

</FrameLayout>

布局设计好以后，就是实现activity，activity的实现主要是点击的简体OnClickListener，为每个标签加监听，实现标签图片状态的改变，以及显示相应的fragment。代码如下


package com.corn.platform.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.corn.platform.R;
import com.corn.platform.fragment.FindFragment;
import com.corn.platform.fragment.HomePageFragment;
import com.corn.platform.fragment.MeFragment;
import com.corn.platform.lua.RootUtil;

import java.io.DataOutputStream;

public class MainActivity extends FragmentActivity implements View.OnClickListener {

    // 三个tab布局
    private RelativeLayout homeLayout, findLayout, meLayout;

    // 底部标签切换的Fragment
    private Fragment homeFragment, findFragment, meFragment,
            currentFragment;
    // 底部标签图片
    private ImageView homeImg, findImg, meImg;
    // 底部标签的文本
    private TextView homeTv, findTv, meTv;
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUI();
        initTab();

    }


    /**
     * 初始化UI
     */
    private void initUI() {
        homeLayout = (RelativeLayout) findViewById(R.id.rl_home);
        findLayout = (RelativeLayout) findViewById(R.id.rl_find);
        meLayout = (RelativeLayout) findViewById(R.id.rl_me);
        homeLayout.setOnClickListener(this);
        findLayout.setOnClickListener(this);
        meLayout.setOnClickListener(this);

        homeImg = (ImageView) findViewById(R.id.iv_home);
        findImg = (ImageView) findViewById(R.id.iv_find);
        meImg = (ImageView) findViewById(R.id.iv_me);
        homeTv = (TextView) findViewById(R.id.tv_home);
        findTv = (TextView) findViewById(R.id.tv_find);
        meTv = (TextView) findViewById(R.id.tv_me);

    }

    /**
     * 初始化底部标签
     */
    private void initTab() {
        if (homeFragment == null) {
            homeFragment = new HomePageFragment();
        }

        if (!homeFragment.isAdded()) {
            // 提交事务
            getSupportFragmentManager().beginTransaction()
                    .add(R.id.content_layout, homeFragment).commit();

            // 记录当前Fragment
            currentFragment = homeFragment;
            // 设置图片文本的变化
            homeImg.setImageResource(R.drawable.index_hover);
            homeTv.setTextColor(getResources()
                    .getColor(R.color.bottomtab_press));
            findImg.setImageResource(R.drawable.nav_find);
            findTv.setTextColor(getResources().getColor(
                    R.color.bottomtab_normal));
            meImg.setImageResource(R.drawable.nav_my);
            meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));

        }

    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.rl_home: // 知道
                clickTab1Layout();
                break;
            case R.id.rl_find: // 我想知道
                clickTab2Layout();
                break;
            case R.id.rl_me: // 我的
                clickTab3Layout();
                break;
            default:
                break;
        }
    }

    /**
     * 点击第一个tab
     */
    private void clickTab1Layout() {
        if (homeFragment == null) {
            homeFragment = new HomePageFragment();
        }
        addOrShowFragment(getSupportFragmentManager().beginTransaction(), homeFragment);

        // 设置底部tab变化
        homeImg.setImageResource(R.drawable.index_hover);
        homeTv.setTextColor(getResources().getColor(R.color.bottomtab_press));
        findImg.setImageResource(R.drawable.nav_find);
        findTv.setTextColor(getResources().getColor(
                R.color.bottomtab_normal));
        meImg.setImageResource(R.drawable.nav_my);
        meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));
    }

    /**
     * 点击第二个tab
     */
    private void clickTab2Layout() {
        if (findFragment == null) {
            findFragment = new FindFragment();
        }
        addOrShowFragment(getSupportFragmentManager().beginTransaction(), findFragment);

        homeImg.setImageResource(R.drawable.index);
        homeTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));
        findImg.setImageResource(R.drawable.nav_find_hover);
        findTv.setTextColor(getResources().getColor(
                R.color.bottomtab_press));
        meImg.setImageResource(R.drawable.nav_my);
        meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));

    }

    /**
     * 点击第三个tab
     */
    private void clickTab3Layout() {
        if (meFragment == null) {
            meFragment = new MeFragment();
        }

        addOrShowFragment(getSupportFragmentManager().beginTransaction(), meFragment);
        homeImg.setImageResource(R.drawable.index);
        homeTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));
        findImg.setImageResource(R.drawable.nav_find);
        findTv.setTextColor(getResources().getColor(
                R.color.bottomtab_normal));
        meImg.setImageResource(R.drawable.nav_my_hover);
        meTv.setTextColor(getResources().getColor(R.color.bottomtab_press));

    }

    /**
     * 添加或者显示碎片
     *
     * @param transaction
     * @param fragment
     */
    private void addOrShowFragment(android.support.v4.app.FragmentTransaction transaction,
                                   Fragment fragment) {
        if (currentFragment == fragment)
            return;

        if (!fragment.isAdded()) { // 如果当前fragment未被添加，则添加到Fragment管理器中
            transaction.hide(currentFragment)
                    .add(R.id.content_layout, fragment).commit();
        } else {
            transaction.hide(currentFragment).show(fragment).commit();
        }

        currentFragment = fragment;
    }

到此，标签切换就实现了，是不是很简单？

点十八
关注
专栏目录
Android UI-实现底部切换标签（fragment)，安卓客户端开发面试题目
2401_84149845的博客
04-06 868
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。上面分享的腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，上面只是以图片的形式给大家展示一部分。【Android思维脑图（技能树）】知识不体系？
Android实现底部切换标签
03-12
Android实现底部切换标签，切换fragment
Android UI-实现底部切换标签（fragment)
modabobo
03-12 333
Android UI-实现底部切换标签（fragment) 前言 本篇博客要分享的一个UI效果——实现底部切换标签，想必大家在一些应用上面遇到过这种效果了，最典型的就是微信了，可以左右滑动切换页面，也可以点击标签页滑动页面，它们是如何实现的呢，本篇博客为了简单只介绍如何实现点击底部切换标签页。 先来看看我们想实现的效果图： 这样的页面实现起来其实很简单的，首先我们从布局入手： ...
Android 底部切换
u011979273的专栏
04-20 580
高仿京东商城
Android底部菜单切换实现
x284285624的专栏
01-14 1117
这里有几个关键点： 1.用TabHost布局，需要声明id为android:id="@android:id/tabhost" 2.MainActivity需要继承TabActivity 3.实现OnCheckedChangeListener 4.通过getHost方法获取Tabhost 5.通过addTab方法添加选项卡 6.设置Activity跳转需要为每个选
android 标签切换,Android实现底部切换标签
weixin_27006759的博客
05-26 211
本文实例为大家分享了Android实现底部切换标签的具体代码，供大家参考，具体内容如下实现底部通用切换标签 ，嵌套Fragment，方便自定义布局自定义控件：widget_tab_view.xmlandroid:layout_width="match_parent"android:layout_height="match_parent">android:id="@+id/tab_image"...
Android UI实现底部切换标签fragment
08-31
在Android开发中，实现底部切换标签的UI效果是常见的需求，尤其在许多社交应用和资讯类应用中。本文将详细讲解如何使用Fragment来实现这一功能。首先，我们要了解Fragment是Android SDK提供的一种组件，它允许在...
Android实现底部切换标签，切换fragment
09-12
这就是一个简单的Android底部标签切换Fragment的实现。开发者可以根据需要扩展功能，比如添加动画效果、处理Fragment之间的数据传递等。对于新手来说，理解这个过程有助于掌握Android应用的基本架构和组件交互。
Android-单个Activity多个Fragment实现微信Android客户端
08-13
在Android应用开发中，微信Android客户端的实现是一个典型的案例，它展示了如何利用单个Activity和多个Fragment构建一个功能丰富的移动应用。在这个项目中，`WeChatDemo-master`压缩包文件包含了一个模仿微信功能的...
android底部切换标签
07-04
android底部通用切换标签，Fragment嵌套页面，方便自定义
Android实现底部导航栏切换
02-01
1实现安卓底部导航栏切换及一个Activity多个Fragment 2 解决底部导航栏fragment切换时会反复加载网络数据，最终造成网络阻塞甚至崩溃的问题 3 去掉了BottomNavigationMenuView的默认动画效果
底部切换标签(方式二)Activity+Fragment
04-04
Android UI-实现底部切换标签之方式二 ──Activity（底部采用FragmentTabHost）添加5个子Fragment
(1)android标签切换界面(TabHost版本 )
07-13
利用Tabhost + Fragment实现android标签切换界面.
【Android Studio】实现底部导航栏Tab切换（提供Gitee源码）
最新发布
黄团团的个人博客
07-12 1016
​ 前言：本期教学如何使用制作底部导航栏以及用Fragment实现页面切换的完整功能，本篇提供所有源代码，均测试无误，大家可以放心使用。
android底部导航
be_me的博客
06-26 273
效果图 1.先导包，在Gradle 加上这个: compile ‘com.roughike:bottom-bar:2.0.2’ 2.menu下button_menu.xml
android开发 底部导航,Android 实现底部导航切换的几种方式
weixin_42491664的博客
05-26 478
BottomBar + fragmentLinearLayout + TextViewRadioGroup + RadioButtonBottomNavigationBarFragmentTableHost+fragmentFragmentTabhostUtils1. BottomBar + fragment2. LinearLayout + TextView以下为本人在项目中的实现效果 因为涉及...
android fragment 底部菜单栏,安卓开发-底部导航栏切换Fragment进行显示
weixin_29053695的博客
05-26 477
内容纲要底部导航栏切换Fragment进行显示创建Fragment对象通常会有多个Fragment用于切换用Fragment[] fragments保存为集合private FrameLayout frame_home;private Fragment[] fragments;private HomeFragment homeFragment;private int lastfragment = ...
Android中的多标签切换的实现
丿一朵遗憾的博客
09-03 3074
类似于京东主页几个按钮对应的几个模块，微信主页的四个按钮对应的四个界面的实现//这个坑下次有空了填利用TableHost、TableWidget、FrameLayout实现利用ViewPager、RaidoGroup、Fragment实现利用TableBar 、Fragment实现
点击textview切换Fragment减少手机消耗
liu_qunfeng的博客
05-13 443
package com.daydayup.zhoukao1.acitivities;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentTransaction;import android.support.v7.app.AppCompatActivity;import android...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值