Fragment 实现底部导航栏的切换（Kotlin语言）

最新推荐文章于 2024-07-25 11:52:08 发布
最新推荐文章于 2024-07-25 11:52:08 发布
阅读量1.5k 收藏 23
点赞数 5
分类专栏： android（kotlin） 文章标签： html kotlin android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaolong446/article/details/121645941
版权

整个过程

1、整体结构图与效果图

（1）整体结构图
整体结构图

（2）页面效果图
效果图

2、引入Kotlin扩展插件

在根目录下的build.gradle添加kotlin-android-extensions插件

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-android-extensions'
}

3、创建各页面布局文件

（1）底端导航栏

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:baselineAligned="false">

    <LinearLayout
        android:id="@+id/id_info_tab"
        android:layout_width="136dp"
        android:layout_height="200px"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_info_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:clickable="false"
            android:scaleType="fitCenter"
            app:srcCompat="@drawable/message_selected"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:clickable="false"
            android:saveEnabled="false"
            android:text="消息"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_contact_tab"
        android:layout_width="136dp"
        android:layout_height="200px"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:clickable="false"
            android:id="@+id/id_contact_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:scaleType="fitCenter"
            app:srcCompat="@drawable/friend_unselected" />

        <TextView
            android:clickable="false"
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:saveEnabled="false"
            android:text="朋友"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_my_tab"
        android:layout_width="136dp"
        android:layout_height="200px"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:clickable="false"
            android:id="@+id/id_my_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:scaleType="fitCenter"
            app:srcCompat="@drawable/myinfo_unselected" />

        <TextView
            android:clickable="false"
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:saveEnabled="false"
            android:text="我的" />

    </LinearLayout>
</LinearLayout>

（2）信息，联系人，个人信息界面

① 信息页面布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F0F8FF">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:background="#009FCC"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/textView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:gravity="center_horizontal"
                    android:text="消息"
                    android:textColor="#ffffff"
                    android:textFontWeight="30"
                    android:textSize="25dp" />
            </LinearLayout>
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="消息界面"
                />
        </RelativeLayout>
    </LinearLayout>
</FrameLayout>

② 联系人界面布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F0F8FF">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:background="#009FCC"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/textView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:gravity="center_horizontal"
                    android:text="联系人"
                    android:textColor="#ffffff"
                    android:textFontWeight="30"
                    android:textSize="25dp" />
            </LinearLayout>
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="联系人界面"
                />
        </RelativeLayout>
    </LinearLayout>
</FrameLayout>

③个人信息界面布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F0F8FF">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:background="#009FCC"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/textView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:gravity="center_horizontal"
                    android:text="个人信息"
                    android:textColor="#ffffff"
                    android:textFontWeight="30"
                    android:textSize="25dp" />
            </LinearLayout>
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="个人信息界面"
                />
        </RelativeLayout>
    </LinearLayout>
</FrameLayout>

（3）activity_main.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">

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


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

</LinearLayout>

4、编写Java文件代码

（1）信息，联系人，个人信息kotlin文件

①message.kt文件

package com.example.we_chatting

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup


class message : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_message, container, false)
    }

}

②contact.kt文件

package com.example.we_chatting

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup


class contact : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_contact, container, false)
    }
}

③myinfo.kt

package com.example.we_chatting

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup


class myinfo : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_myinfo, container, false)
    }

}

（2）MainActivity.kt文件

package com.example.we_chatting


import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentTransaction
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity
import android.util.Log;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;

class MainActivity : AppCompatActivity(), View.OnClickListener {
    private val mTab01: Fragment = message()
    private val mTab02: Fragment = contact()
    private val mTab03: Fragment = myinfo()

    private var mTabInfo: LinearLayout? = null
    private var mTabContact: LinearLayout? = null
    private var mTabMy: LinearLayout? = null

    private var mImgInfo: ImageButton? = null
    private var mImgContact: ImageButton? = null
    private var mImgMy: ImageButton? = null
    private var fm: FragmentManager? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        if (supportActionBar != null) {
            supportActionBar!!.hide()
        }
        setContentView(R.layout.activity_main)

        initFragment()
        initView()
        initEvent()
        selectFragment(0)

    }

    //添加界面
    private fun initFragment() {
        var fm = supportFragmentManager
        val transaction: FragmentTransaction = fm.beginTransaction()
        transaction.add(R.id.content, mTab01)
        transaction.add(R.id.content, mTab02)
        transaction.add(R.id.content, mTab03)
        transaction.commit()
    }

    private fun resetImgs() {
        mImgInfo!!.setImageResource(R.drawable.message_unselected)
        mImgContact!!.setImageResource(R.drawable.friend_unselected)
        mImgMy!!.setImageResource(R.drawable.myinfo_unselected)
    }

    private fun initView() {
        mTabInfo = findViewById<View>(R.id.id_info_tab) as LinearLayout
        mTabContact = findViewById<View>(R.id.id_contact_tab) as LinearLayout
        mTabMy = findViewById<View>(R.id.id_my_tab) as LinearLayout

        mImgInfo = findViewById<View>(R.id.id_info_img) as ImageButton
        mImgContact = findViewById<View>(R.id.id_contact_img) as ImageButton
        mImgMy = findViewById<View>(R.id.id_my_img) as ImageButton
    }

    private fun selectFragment(i: Int) {
        var fm = supportFragmentManager
        val transaction: FragmentTransaction = fm.beginTransaction()
        hideFragment(transaction)
        when (i) {
            0 -> {
                Log.d("setSelect", "1")
                transaction.show(mTab01)
                mImgInfo!!.setImageResource(R.drawable.message_selected)
            }
            1 -> {
                transaction.show(mTab02)
                mImgContact!!.setImageResource(R.drawable.friend_selected)
            }
            2 -> {
                transaction.show(mTab03)
                mImgMy!!.setImageResource(R.drawable.myinfo_selected)
            }
            else -> {
            }
        }
        transaction.commit()
    }

    private fun initEvent() {
        mTabInfo!!.setOnClickListener(this)
        mTabContact!!.setOnClickListener(this)
        mTabMy!!.setOnClickListener(this)
    }

    private fun hideFragment(transaction: FragmentTransaction) {
        transaction.hide(mTab01)
        transaction.hide(mTab02)
        transaction.hide(mTab03)
    }

    override fun onClick(v: View) {
        Log.d("onClick", "1")
        resetImgs()
        when (v.id) {
            R.id.id_info_tab -> {
                Log.d("onClick", "2")
                selectFragment(0)
            }
            R.id.id_contact_tab -> selectFragment(1)
            R.id.id_my_tab -> selectFragment(2)
            else -> {
            }
        }
    }
}

5、 小提示

（1）创建fragment文件通过下图方法创建，创建完的kotlin文件中可删除多余方法，只留下onCreateView方法
在这里插入图片描述在这里插入图片描述（2）图标的下载可在阿里巴巴矢量图标库下载

子龍同学
关注
  • 5
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
kotlin 实现安卓底部导航栏（点击变换图标和文字）+Fragment切换
tonystk123的博客
02-24 1347
布局逻辑 布局代码 .kt代码实现点击后图标和文字变换 实现点击后Fragment切换 效果图 一、布局逻辑 二、布局XML代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:t.
TextView+Fragment实现底部导航栏
09-08
总结起来，使用TextView+Fragment实现底部导航栏主要是通过创建多个Fragment，设置底部导航栏的布局，处理点击事件并动态替换Fragment来完成。这种方式灵活且易于维护，适合于小型项目。然而，对于大型应用，更推荐...
kotlin实现底部导航栏
Chongchong's Home
09-02 1997
最近在学习kotlin，因为基本语法和基本用法大概了解了一下，但是古话说的好，实践是检验真理的唯一标准，所以，我觉得还是一边写，一边了解更为深刻，吃过亏就会印象更深刻，首先给大家看下我的界面: 不要在意我的数据，这篇博客主要讲的是这个框架的实现，效果看完了，现在看看这个布局的实现吧！ <?xml version="1.0" encoding="utf-8"?> <Relati...
Kotlin创建底部导航栏
q327192368的博客
09-15 569
整个项目结构 1.修改main_activity.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
如何用android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
qq_73830179的博客
06-07 1390
大家好，我是 波士顿木木，今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述，希望你们喜欢。
RadioGroup和Fragment实现底部导航栏(Kotlin)
mayday_sanshui的博客
08-09 623
RadioGroup和Fragment实现底部导航栏
Android kotlin实现底部导航栏
meixi_android的博客
05-28 2947
1、实现效果，可点击或者滑动切换fragment 点击 滑动 实现方法： 1、创建三个fragment.kt 2、创建fragmentAdapter clas...
Android 中使用RadioGroup+Fragment实现底部导航栏的功能
路宇的博客
06-06 2071
先看效果图 步骤一： 完成对主界面main.xml的创建： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/to
fragment实现底部导航栏不刷新切换
WenZhengshi的博客
06-06 732
安卓自带的底部导航栏每次切换fragment都会刷新数据，用户体验会很不好，所以自己做了个不会刷新的fragment切换的底部导航栏先看效果，我上传一个录屏，请看效果（首页时c站的一个链接）：捂脸，上传审核，于是我把录屏转成gif图片，请看 可以看到web view并没有重新绘制MainActivity+HomeFragment+Notificationfragment+Minefragment1.MainActivity代码 activity_main.xml HomeFragment fra
kotlin 仿微信 底部导航栏 动态切换效果
GuZhC的博客
06-21 1243
文章目录效果实现思路具体实现结语 效果 可以看到，当页面切换时 下方图标以及文字跟着动态改变 实现思路 思路还是很简单的关键步骤如下 页面的搭建 采用Activity+viewPager+fragment 这种写法其实是有很多隐藏坑，如果有兴趣可以在看看我的另一篇小文章ViewPager+Fragment+Activit构建页面值得注意的点 动画效果 图标动画效果：两张相同大小不同颜色图标，...
Android开发（三）：BottomNavigationView+Fragment实现底部导航栏和页面的切换
一世纤华的博客
12-05 3197
创建新项目，选择Empty Activity,点击Next 填写相关信息，点击finish 创建四个类和对应的布局文件 在res下创建menu目录和navigation目录 在menu目录下创建menu_bottom_nav.xml文件 在navigation目录下创建nav_bottom_nav.xml文件 回到创建的四个类中，继承Fragment,并重写onCreateView方法，并绑定布局文件 OneFragment.kt package edu.nju..
kotlin--利用TabLayout、ViewPager、Fragment实现滑动切换页面
02-15
接下来，我们来详细讲解如何用Kotlin实现这个功能： 1. **添加依赖** 在项目的build.gradle模块文件中，添加对`design`库和`fragment`库的依赖，以使用TabLayout和Fragment： ```gradle dependencies { ...
使用ViewPager和Fragment实现底部导航滑动Demo
04-23
现在，当用户点击底部导航栏的按钮时，`ViewPager`会自动切换到对应的`Fragment`，并且`TabLayout`会更新当前选中的标签。 在实际开发中，`BaiDuPager`可能是一个已经封装好的库或者示例项目，它可能包含了上述功能...
kotlin顶部导航栏（TabLayout+viewpager）.zip
06-13
本项目以“Kotlin顶部导航栏（TabLayout+ViewPager）”为主题，提供了实现这一功能的示例代码，旨在帮助开发者理解和实践这种布局。 首先，我们来探讨“顶部导航栏”。在Android应用中，顶部导航栏通常指的是位于...
Kotlin中使用BottomNavigationView实现底部导航
05-14
本文将深入探讨如何在Kotlin中利用BottomNavigationView来实现底部导航，并结合小红点消息提示功能，提升用户体验。 首先，我们需要在布局XML文件中添加BottomNavigationView。在`activity_main.xml`中，添加如下...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3336
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
【HTML】iframe
小秀的博客
07-24 363
标签是 HTML 中的⼀个元素，⽤于在当前 HTML ⽂档中嵌⼊另⼀个 HTML ⽂档。它可以在⼀个 HTML ⻚⾯中嵌⼊另⼀个 HTML ⻚⾯或其他类型的⽂档，⽐如 PDF ⽂件或视频⽂件。其中 src 属性指定要嵌⼊的⽂档的 URL，可以是⼀个 HTML ⻚⾯、⼀个 PDF ⽂件或⼀个视频⽂件等等。通过设置 width 和 height 属性可以指定。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 1033
iframe 预览邮件 + 打印邮件 + 模拟滚动条
用fragment实现底部导航栏，用kotlin实现
04-21
Sure, 我可以回答您的问题。使用Fragment实现底部导航栏，可以将每个选项卡作为一个fragment实现，然后将这些fragment添加到Activity中并在底部导航栏中显示。Kotlin是一种基于JVM的编程语言，可以与Android生态系统无缝集成，您可以使用Kotlin语言编写Android应用程序并实现底部导航栏。如果您需要更具体的实现细节，请告诉我。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值