简单导航的标题切换

最新推荐文章于 2024-11-18 16:08:43 发布
最新推荐文章于 2024-11-18 16:08:43 发布
阅读量872 收藏
点赞数
分类专栏： AndroidStudio 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lioer_/article/details/108992147
版权

刚学习AndroidStudio，我们先写一个xml界面，然后再实现它的功能

现在我们先实现一个点击切换标题的功能

在activity_main.xml里面写入以下代码，将按钮以及排版设置好

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_body_bar"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_title"
        android:textSize="36sp"
        android:text="标题"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="56dp"/>

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

    </LinearLayout>


        <LinearLayout
            android:id="@+id/bottom_bar"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:background="#F2F2F8"
            android:layout_width="match_parent"
            android:layout_height="50dp">
            <RelativeLayout
                android:id="@+id/bottom_bar_1_btn"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:onClick="onClick"
                android:layout_height="match_parent">
                <TextView
                    android:id="@+id/bottom_bar_text_1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="2dp"
                    android:gravity="center"
                    android:text="课程"
                    android:textColor="#000000"
                    android:textSize="14sp"/>

                <ImageView
                    android:id="@+id/bottom_bar_image_1"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_above="@+id/bottom_bar_text_1"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="0dp"
                    android:layout_marginBottom="2dp"
                    android:src="@mipmap/ic_course" />
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/bottom_bar_2_btn"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:onClick="onClick"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/bottom_bar_text_2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="2dp"
                    android:gravity="center"
                    android:text="习题"
                    android:textColor="#000000"
                    android:textSize="14sp" />

                <ImageView
                    android:id="@+id/bottom_bar_image_2"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="2dp"
                    android:src="@mipmap/ic_exercise" />
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/bottom_bar_3_btn"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:onClick="onClick"
                android:layout_height="match_parent">
                <TextView
                    android:id="@+id/bottom_bar_text_3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="2dp"
                    android:gravity="center"
                    android:text="搜索"
                    android:textColor="#000000"
                    android:textSize="14sp"/>
                <ImageView
                    android:id="@+id/bottom_bar_image_3"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_above="@+id/bottom_bar_text_3"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="2dp"
                    android:src="@mipmap/ic_message"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/bottom_bar_4_btn"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:onClick="onClick"
                android:layout_height="match_parent">
                <TextView
                    android:id="@+id/bottom_bar_text_4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="2dp"
                    android:gravity="center"
                    android:text="我"
                    android:textColor="#000000"
                    android:textSize="14sp"/>
                <ImageView
                    android:id="@+id/bottom_bar_image_4"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_above="@+id/bottom_bar_text_4"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="2dp"
                    android:src="@mipmap/ic_my"/>
            </RelativeLayout>
        </LinearLayout>


</LinearLayout>

写完以上的代码，我们会得到这样一个界面
在这里插入图片描述
然后我们新建一个fragment
在这里插入图片描述
我们给它起个名字testFragment
然后我们就得到一个fragment_test.xml
我们在里面添加一个id android:id="@+id/tv_content" 这样方便我们后面功能的实现

  @Override
    protected void onCreate(Bundle savedInstanceState)  {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        initView();
        initFragment();

        replaceFragment(fragments.get(R.id.bottom_bar_2_btn));


    }
    //实现回调接口
    @Override
    public void setTitle(String title) {
        tvTitle.setText(title);
    }

我们再onCreate方法里面添加两个构造函数，接下来我们实现这几个函数

private void initFragment() {
        fragments = new SparseArray<>();
        fragments.put(R.id.bottom_bar_1_btn,testFragment.newInstance("课程"));
        fragments.put(R.id.bottom_bar_2_btn,testFragment.newInstance("习题"));
        fragments.put(R.id.bottom_bar_3_btn,testFragment.newInstance("搜索"));
        fragments.put(R.id.bottom_bar_4_btn,testFragment.newInstance("我"));

    }
    private void replaceFragment(Fragment fragment){
        FragmentManager manager=getSupportFragmentManager();
        FragmentTransaction transaction=manager.beginTransaction();
        transaction.replace(R.id.main_body,fragment);
        transaction.commit();
    }

    private void initView(){
        tvTitle = findViewById(R.id.tv_title);

        bottom_bar_text_1=findViewById(R.id.bottom_bar_text_1);
        bottom_bar_text_2=findViewById(R.id.bottom_bar_text_2);
        bottom_bar_text_3=findViewById(R.id.bottom_bar_text_3);
        bottom_bar_text_4=findViewById(R.id.bottom_bar_text_4);
        bottom_bar_image_1=findViewById(R.id.bottom_bar_image_1);
        bottom_bar_image_2=findViewById(R.id.bottom_bar_image_2);
        bottom_bar_image_3=findViewById(R.id.bottom_bar_image_3);
        bottom_bar_image_4=findViewById(R.id.bottom_bar_image_4);

        mian_body_bar=findViewById(R.id.main_body_bar);
        bottom_bar_1_btn=findViewById(R.id.bottom_bar_1_btn);
        bottom_bar_2_btn=findViewById(R.id.bottom_bar_2_btn);
        bottom_bar_3_btn=findViewById(R.id.bottom_bar_3_btn);
        bottom_bar_4_btn=findViewById(R.id.bottom_bar_4_btn);

        bottom_bar_1_btn.setOnClickListener(this);
        bottom_bar_2_btn.setOnClickListener(this);
        bottom_bar_3_btn.setOnClickListener(this);
        bottom_bar_4_btn.setOnClickListener(this);

        setSelectStatus(1);//默认选择
    }

在onclick函数中获取事件

 @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.bottom_bar_1_btn:
                setSelectStatus(0);
                break;
            case R.id.bottom_bar_2_btn:
                setSelectStatus(1);
                break;
            case R.id.bottom_bar_3_btn:
                setSelectStatus(2);
                break;
            case R.id.bottom_bar_4_btn:
                setSelectStatus(3);
                break;
        }
        replaceFragment(fragments.get(view.getId()));
    }

点击后变色并跳转

 private  void setSelectStatus(int index){
        switch(index){
            case 0:
                //图片点击选择变换图片，颜色的改变，其他变为原来的颜色，并保持原来的图片
                bottom_bar_image_1.setImageResource(R.mipmap.ic_course_selected);
                bottom_bar_text_1.setTextColor(Color.parseColor("#0097F7"));

                //其他文本和颜色不变
                bottom_bar_image_2.setImageResource(R.mipmap.ic_exercise);
                bottom_bar_text_2.setTextColor(Color.parseColor("#000000"));

                bottom_bar_image_3.setImageResource(R.mipmap.ic_message);
                bottom_bar_text_3.setTextColor(Color.parseColor("#000000"));

                bottom_bar_image_4.setImageResource(R.mipmap.ic_my);
                bottom_bar_text_4.setTextColor(Color.parseColor("#000000"));

                break;


            case 1:
                //图片点击选择变换图片，颜色的改变，其他变为原来的颜色，并保持原来的图片
                bottom_bar_image_2.setImageResource(R.mipmap.ic_exercise_selected);
                bottom_bar_text_2.setTextColor(Color.parseColor("#0097F7"));

                //其他文本和颜色不变
                bottom_bar_image_1.setImageResource(R.mipmap.ic_course);
                bottom_bar_text_1.setTextColor(Color.parseColor("#000000"));

                bottom_bar_image_3.setImageResource(R.mipmap.ic_message);
                bottom_bar_text_3.setTextColor(Color.parseColor("#000000"));

                bottom_bar_image_4.setImageResource(R.mipmap.ic_my);
                bottom_bar_text_4.setTextColor(Color.parseColor("#000000"));

                break;

            case 2:
                //图片点击选择变换图片，颜色的改变，其他变为原来的颜色，并保持原来的图片
                bottom_bar_image_3.setImageResource(R.mipmap.ic_message_selected);
                bottom_bar_text_3.setTextColor(Color.parseColor("#0097F7"));

                //其他文本和颜色不变
                bottom_bar_image_2.setImageResource(R.mipmap.ic_exercise);
                bottom_bar_text_2.setTextColor(Color.parseColor("#000000"));

                bottom_bar_image_1.setImageResource(R.mipmap.ic_course);
                bottom_bar_text_1.setTextColor(Color.parseColor("#000000"));

                bottom_bar_image_4.setImageResource(R.mipmap.ic_my);
                bottom_bar_text_4.setTextColor(Color.parseColor("#000000"));

                break;

            case 3:
                //图片点击选择变换图片，颜色的改变，其他变为原来的颜色，并保持原来的图片
                bottom_bar_image_4.setImageResource(R.mipmap.ic_my_selected);
                bottom_bar_text_4.setTextColor(Color.parseColor("#0097F7"));

                //其他文本和颜色不变
                bottom_bar_image_2.setImageResource(R.mipmap.ic_exercise);
                bottom_bar_text_2.setTextColor(Color.parseColor("#000000"));

                bottom_bar_image_3.setImageResource(R.mipmap.ic_message);
                bottom_bar_text_3.setTextColor(Color.parseColor("#000000"));

                bottom_bar_image_1.setImageResource(R.mipmap.ic_course);
                bottom_bar_text_1.setTextColor(Color.parseColor("#000000"));
                break;
        }
    }

我们到testFragment里onCreate方法中获得Activity中实现好的实例化接口对象
在这里插入图片描述

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
        }
        titleCallback=(MainActivity)getActivity();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view= inflater.inflate(R.layout.fragment_test, container, false);
        TextView tvContent=view.findViewById(R.id.tv_content);
        tvContent.setText(mParam1);
        if (titleCallback!=null){
            titleCallback.setTitle(mParam1);
        }
        return  view;
    }
    //定义回调接口
    private TitleCallback titleCallback;
    public  interface  TitleCallback{
        void setTitle(String title);
    }

到此我们就完成了一个简单的小功能啦(～￣▽￣)～

步骤：
1.在Fragment类中定义一个回调接口
2.在Activity中实现这个回调接口
3.在Fragment的onCreate方法中获得Activity中实现好的实例化接口对象
4.利用接口的对象进行传值

ゆLioer
关注
专栏目录
android安卓 Fragment实现页面标题左右同步切换以及点击标题切换页面
qq_35595164的博客
08-12 1866
效果图：不多说直接上代码，大家请看详细代码注释： productxq.java: package com.example.xh.twostylefragment; import android.content.Intent; import android.graphics.Color; import android.os.Bundle; import android.support.v4.a...
Android中fragment切换标题操作
qixiqinghe的博客
08-18 6010
我这里要介绍这种标题的一种方法，我是用fragment来搭建的，最外层是一个Activity，应该会有更好的方法，大家有什么好办法可以一起来讨论 1.先看布局 xml version="1.0" encoding="utf-8"?> LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
jquery标题切换
沧海一滴水
06-04 341
jquery标题切换 实现标题及涉及到的内容切换 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery的tab切换</title> <script src="https://libs.baidu.com/jquery/1....
切换窗口时改变页面title标题
weixin_43554584的博客
06-27 3545
切换页面时更改title
html 特效 切换页面的显示标题
by zero
05-01 2787
因为工作需要，这次需要一些特效，上网找了下，发现一个不错的网站，推荐下：http://www.sucaihuo.com/ 实现特效：切换页面的显示标题。 js网页标题消息提醒 var newRemindFlag = 1; //启动闪烁
HTML标题切换
Louts.
04-16 675
HTML两个标题的切换 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>z-index</title> <style type="text/css"> *{margin: 0;padding: 0;} #li{/*border:...
jQuery实现的导航条切换可显示隐藏
10-25
在现代的网页设计中，动态的用户交互效果对于提升用户体验至关重要。一个常用的交互效果是导航条的切换显示和隐藏，这...这些技术的应用不仅限于简单的导航条，它们也可以被广泛地应用到各种网页元素的动态交互设计中。
点击导航栏切换页面
03-24
标题“点击导航栏切换页面”暗示我们将探讨如何在Android Studio（AS）项目中实现这一功能。下面将详细介绍三种常见的导航栏切换页面的方法。 1. 使用FragmentTransaction 第一种方法是通过FragmentTransaction来...
简单的导航轮播图切换效果源码下载
11-16
【标题】：“简单的导航轮播图切换效果源码下载”是指提供了一段实现简单导航栏与轮播图无缝切换的代码资源。这种效果通常应用于网站头部，为用户提供一种直观、动态的方式来浏览多个图像或内容板块。 【描述】：...
纯CSS3单页切换导航菜单界面设计的简单实现
09-24
本文将详细探讨如何使用纯CSS3技术实现一个简单但效果炫酷的单页切换导航菜单界面设计。 ### 知识点概述 1. **纯CSS3实现单页切换导航菜单**：该技术仅利用CSS3的特性，不需要JavaScript等脚本语言，实现了一个...
一行代码底部导航--Tab切换栏-demo.rar
08-17
这个"一行代码底部导航--Tab切换栏-demo.rar"压缩包文件应该包含了一个简单的示例项目，展示了如何使用`EasyNavigation`库来快速构建底部导航Tab切换栏。 `EasyNavigation`库是专门为Android开发者设计的，旨在提供...
【js实例】js实现点击标题标签切换显示对应内容
热门推荐
我的米饭
02-13 1万+
标题标签层点击后切换显示对应的内容层<script> //获取所有标题标签层和内容层 var oul = document.getElementById("NewsUl"), oli = oul.getElementsByTagName("li"), art = document.getElementsByTagName("article");
分类标题切换页 TableLayout+ViewPager2+Fragemnt+RecyclerView
weixin_44619313的博客
08-19 807
先上图：已售、已退、已废 为分类标题；预加载数的意思是：例，预加载 1,页，就是“已退”的标题的数据预加载了 思路：在fragment里，再放fragment，通过滑动事件就可以切换fragment里的fragment了。 以下为实现步骤 Step 1：首先准备好fragment 在drawable添加如下文件： 1.bg_order_top.xml：作用：在button上面画一条灰色的线 <?xml version="1.0" encoding="utf-8"?> <layer-lis
点击menu导航切换，显示不同的内容模块
皮卡丘の开发之路
08-23 1万+
点击menu导航切换，显示不同的内容模块。
顶部标题TabLayout点击切换Fragment（可以滑动切换）
jun_tong的博客
06-09 1805
例： 顶部标题TabLayout点击切换Fragment 顶部横向滑动菜单 加依赖：（TabLayout） dependencies { implementation 'com.android.support:design:27.0.2' } //tablayou 可以选这个 implementation 'com.an...
Android U 多任务启动分屏——SystemUI流程（更新中）
最新发布
yimelancholy的博客
11-18 233
前文说到通过接口跨进程调用到了SystemUI进程，我们继续分析分屏在systemui中的实现。
20241114给荣品PRO-RK3566开发板刷Rockchip原厂的Android13下适配RJ45以太网卡
南岭笑笑生之家
11-14 1290
很艰难地得知/根据经验/很容易知道RJ45以太网卡的DTS代码块在这里：rp-gmac1-m0-pro-rk3566.dtsi。实在没有办法，只能将荣品的SDK：rk-android13-20240713.tgz。很艰难地得知/根据经验/很容易知道是显示部分影响了RJ45以太网卡。从中析取最小的DTS，然后拿掉不用的部分，比如LCD/TP等。缘起：使用EVB2的方案，RJ45加进去怎么也不通。于是用荣品的DTS和原厂的EVB2的DTS进行比对。2、iperf3不能连接，原因待查。
android10 Wifi扫描
yang_0323的博客
11-13 888
本文详述了Android中WiFi的扫描过程，从源码层面进行解析
jQuery实现带导航的全屏页面自动切换效果
资源摘要信息:"jQuery带导航全屏页面切换代码" 知识点概述： 本文所述的“jQuery带导航全屏页面切换代码”是一种网页交互技术，它使用jQuery库来实现网页内容的全屏滚动切换以及相应的导航项同步切换效果。这种技术...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值