Android实战项目(一) 仿微信底部导航栏

最新推荐文章于 2024-06-07 17:51:58 发布
最新推荐文章于 2024-06-07 17:51:58 发布
阅读量1.6k 收藏 15
点赞数
分类专栏： Android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hazardhhh/article/details/119846621
版权

仿微信底部导航栏

要做一个类似微信底部导航栏要用到 MaterialDesign系列之 BottomNavigationView，找图片的话推荐一个很好用的网站https://www.iconfont.cn。
实现效果:页面跳转，触摸图标颜色变化。顶部Toolbar设置，
退出效果。
项目源码下面会有，持续更新中。
在这里插入图片描述

  1. 添加依赖
	//BottomNavigationView
    implementation 'com.google.android.material:material:1.2.1'
  1. xml布局 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.activity.MainActivity">

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

    <com.example.client.widget.NormalRefreshView
        android:id="@+id/refreshableView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:visibility="visible">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:layout_alignParentBottom="true"
            app:itemIconTint="@drawable/bottom_navigation_item_selector"
            app:itemTextColor="@drawable/bottom_navigation_item_selector"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/main_bottom_navigation" />
    </com.example.client.widget.NormalRefreshView>
</LinearLayout>
  1. 主界面设置 MainActivity.java
public class MainActivity extends BaseActivity implements View.OnClickListener{

    private List<Fragment> mFragments = new ArrayList<>();

    @BindView(R.id.bottomNavigationView)
    BottomNavigationView mNavigationView;
    @BindView(R.id.view_pager)
    ViewPager viewPager;
    @BindView(R.id.message)
    TextView text_message;

    private RelativeLayout layout_message;
    private RelativeLayout layout_contacts;
    private RelativeLayout layout_find;
    private RelativeLayout layout_mine;

    /**
     * 退出时间
     */
    private long exitTime;

    @Override
    protected int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initData(Bundle savedInstanceState) {
        super.initData(savedInstanceState);
        mFragments.add(new MessageFragment());
        mFragments.add(new ContactsFragment());
        mFragments.add(new FindFragment());
        mFragments.add(new MineFragment());

    @Override
    protected void initWidget() {
        super.initWidget();
        layout_message=findViewById(R.id.layout_message);
        layout_contacts=findViewById(R.id.layout_contacts);
        layout_find=findViewById(R.id.layout_find);
        layout_mine=findViewById(R.id.layout_mine);


        // 初始化页卡
        initPager();
        //设置当前界面
//        viewPager.setCurrentItem(2);
    }

    @SuppressLint("HandlerLeak")
    Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            switch (msg.what) {
                case SUCCESS:
//                    refreshableView.finishRefresh(true);
                    normalRefreshView.finishRefresh(true);
                    text_message.setText("信息");
                    break;
                case FAILED:
//                    refreshableView.finishRefresh(false);
                    normalRefreshView.finishRefresh(false);
                    break;
                default:
                    break;
            }
        };
    };

    private void initPager() {
        FragmentAdapter adapter = new FragmentAdapter(mFragments, getSupportFragmentManager());
        viewPager.setAdapter(adapter);

        //BottomNavigationView 点击事件监听
        mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                int menuId = menuItem.getItemId();
                // 跳转指定页面：Fragment
                switch (menuId) {
                    case R.id.menu_message:
                        viewPager.setCurrentItem(0,false);
                        break;
                    case R.id.menu_contacts:
                        viewPager.setCurrentItem(1,false);
                        break;
                    case R.id.menu_find:
                        viewPager.setCurrentItem(2,false);
                        break;
                    case R.id.menu_mine:
                        viewPager.setCurrentItem(3,false);
                        break;
                }
                return false;
            }
        });

        // ViewPager 滑动事件监听
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //将滑动到的页面对应的 menu 设置为选中状态
                mNavigationView.getMenu().getItem(position).setChecked(true);
                if(position==0){
                    layout_message.setVisibility(View.VISIBLE);
                    layout_contacts.setVisibility(View.GONE);
                    layout_find.setVisibility(View.GONE);
                    layout_mine.setVisibility(View.GONE);
                }if(position==1){
                    layout_message.setVisibility(View.GONE);
                    layout_contacts.setVisibility(View.VISIBLE);
                    layout_find.setVisibility(View.GONE);
                    layout_mine.setVisibility(View.GONE);
                } if(position==2){
                    layout_message.setVisibility(View.GONE);
                    layout_contacts.setVisibility(View.GONE);
                    layout_find.setVisibility(View.VISIBLE);
                    layout_mine.setVisibility(View.GONE);
                }if(position==3) {
                    layout_message.setVisibility(View.GONE);
                    layout_contacts.setVisibility(View.GONE);
                    layout_find.setVisibility(View.GONE);
                    layout_mine.setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onPageScrollStateChanged(int position) {

            }
        });

    }
    
    //退出功能
    @Override
    public boolean dispatchKeyEvent(KeyEvent event) {
        if (event.getKeyCode() == KeyEvent.KEYCODE_BACK
                && event.getAction() == KeyEvent.ACTION_DOWN
                && event.getRepeatCount() == 0) {
            // 重写键盘事件分发，onKeyDown方法某些情况下捕获不到，只能在这里写
            if ((System.currentTimeMillis() - exitTime) > 2000) {
                Snackbar snackbar = Snackbar.make(viewPager, "再按一次退出程序", Snackbar.LENGTH_SHORT);
                snackbar.getView().setBackgroundResource(R.color.colorPrimary);
                snackbar.show();
                exitTime = System.currentTimeMillis();
            } else {
                finish();
            }
            return true;
        }
        return super.dispatchKeyEvent(event);
    }
    
}
  1. 添加4个碎片 大体一样这里列举其中一个
    MessageFragment
public class MessageFragment extends BaseFragment {
    @Override
    protected int getLayoutId() {
        return R.layout.message_fragement;
    }
}

message_fragement.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:background="@color/white"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="消息"
        android:textColor="@color/black"
        android:textSize="16sp"
        android:layout_marginTop="300dp"
        android:layout_gravity="center" />
</LinearLayout>
  1. 要在res文件，新建一个menu文件夹
    新建main_bottom_navigation
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_message"
        android:enabled="true"
        android:icon="@mipmap/sel_message"
        android:title="消息"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/menu_contacts"
        android:enabled="true"
        android:icon="@mipmap/sel_contacts"
        android:title="通讯录"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/menu_find"
        android:enabled="true"
        android:icon="@mipmap/sel_find"
        android:title="发现"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/menu_mine"
        android:enabled="true"
        android:icon="@mipmap/sel_mine"
        android:title="我"
        app:showAsAction="ifRoom" />
</menu>
  1. Toolbar这里我是自定义的 列举其中一个

新建一个toolbar_layout.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:background="@color/black"
    android:layout_height="wrap_content">

    <include layout="@layout/message_toolbar"
        android:visibility="visible"/>

    <include layout="@layout/contacts_toolbar"
        android:visibility="gone"/>

    <include layout="@layout/find_toolbar"
        android:visibility="gone"/>

    <include layout="@layout/mine_toolbar"
        android:visibility="gone"/>

</LinearLayout>

新建一个message_toolbar文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_message"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="15dp"
        android:text="消息"
        android:gravity="center_vertical"
        android:minHeight="45dp"
        android:textSize="17sp"
        android:textColor="@color/white"/>

    <ImageView
        android:id="@+id/message_add"
        android:layout_width="23dp"
        android:layout_height="23dp"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:src="@mipmap/find_add"
        android:layout_marginRight="15dp"/>
</RelativeLayout>
  1. 触摸图标时候颜色变化
    在drawable新建bottom_navigation_item_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_focused" android:state_checked="true" />
    <item android:color="@color/color_un_focused" android:state_checked="false" />
</selector>

在之前主界面activity_main中添加，app:labelVisibilityMode="labeled"图标超过3个显示文字，不然会隐藏。

		app:itemIconTint="@drawable/bottom_navigation_item_selector"
        app:itemTextColor="@drawable/bottom_navigation_item_selector"
        app:labelVisibilityMode="labeled"
  1. 项目地址

下面是我的项目源码地址，持续更新。
https://github.com/hazardhhh/Myclient.git

十壹、
关注
  • 0
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
3分钟教你实现仿微信底部导航栏效果（BottomNavigationView + ViewPager）
Android_小黑
05-19 2126
微信你肯定有，那你想不想知道微信的界面是怎么实现的呢？来，跟着我一探究竟！咱们动手做一个！
微信 设置底部导航栏
weixin_43077063的博客
08-27 1万+
转 微信小程序设置底部导航栏目方法 2...
如何用android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
最新发布
qq_73830179的博客
06-07 1305
大家好，我是 波士顿木木，今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述，希望你们喜欢。
Android仿微信底部菜单栏+顶部菜单栏
热门推荐
wk843620202的专栏
03-15 2万+
本文要实现仿微信微信底部菜单栏+顶部菜单栏，采用ViewPage来做，每一个page对应一个XML，当手指在ViewPage左右滑动时，就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮，同时如果点击底部菜单按钮，左右滑动page(其实就是xml)并且改变相应按钮的亮度。 最终效果：源码免费下载 一、布局 1、顶部菜单布局，命名为t
Android UI-仿微信底部导航栏布局
weixin_34198762的博客
12-11 166
 现在App基本的标配除了侧滑菜单，还有一个就是底部导航栏，常见的聊天工具QQ，微信，购物App都有底部导航栏，用户可以随便切换看不同的内容，说是情怀也好，用户体验也罢。我们开发的主要的还是讲的是如何如何实现其功能，网上实现的方式无外乎两种,一种是使用tabhost进行切换，一种是直接使用Fragment进行切换，底部导航栏的布局有的使用的是线性布局，有的是使用的RadioGroup，本文中是使用...
微信小程序实战之仿android fragment可滑动底部导航栏（4）
08-30
在本篇微信小程序实战教程中，我们将探讨如何实现仿安卓Fragment可滑动的底部导航栏。这个功能在移动应用设计中非常常见，可以提供灵活的界面切换和用户体验。微信小程序虽然提供了内置的底部导航栏组件，但其功能...
Android ActionBar应用实战，高仿微信主界面的设计实例完整源码
07-02
对于Tab栏，我们可以使用`android.support.design.widget.BottomNavigationView`，这是一个自Android Design Support Library引入的组件，它提供了底部导航栏的功能。 在提供的WeChatSample源码中，开发者可以看到...
Android实战—微信首页（一）
01-03
点击底部导航栏切换相应内容 app:srcCompat=@drawable/tab_find_frd_normal /> 4. LinearLayout触发点击事件问题 //LinearLayout中的元素都添加禁止点击事件 android:clickable=false 作者：lonely喆
仿微信android APP
05-24
【标题】"仿微信android APP" 是一个专为Android平台设计的应用程序开发项目，旨在为初学者提供一个学习和实践的机会，让他们能够了解并掌握如何创建类似微信的用户界面。这个项目的重点在于实现微信的外观和基本...
基于Android的微信主界面
jk_szl的博客
10-09 2310
实现APP门户界面框架设计 门户界面要求：根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换； 主要步骤 一、设计一个自己喜欢的布局 在设计自己最想要的界面布局之前先要考虑好准备使用哪些布局控件，这里我们可以参考微信里面的实际主题布局，我很喜欢微信那种简介轻松的主题风味所以我的界面设置的很简单 上面这张界面图中分为三个层次，分别是顶部微信标题布局、中间内容展示布局和底部的界面选择栏布局。 关于顶部布局 1.顶部布局我使用了一个LinearLayout作为主控件附加一
Android实现仿微信底部导航栏
09-16
使用ViewPager+RadioGroup实现仿微信底部导航栏,注释很全,了解更多请参考：http://www.cnblogs.com/Fill/p/7530655.html
安卓仿微信底部菜单源码
04-09
仿照微信底部菜单的源码，包括图片切换，文字变色以及activity跳转
模仿微信导航页效果源码
09-13
模仿微信导航页效果源码，希望对大家有很大的帮助，绝对实用的资源，希望大家可以提意见。
android高仿微信底部导航栏
qq_33408235的博客
05-08 7102
这几天在公司没什么工作,闲来没事写了一下关于微信底部渐变的导航,textview 是利用 ArgbEvaluator 实现颜色渐变的效果,图片渐变是自定义imageview 来设置透明度进行渐变的本代码与其他实现的优越性: 代码简单 容易看懂,对新手来说不是问题 直接可以copy到自己的项目中使用 首先看一下效果图先了解一下ArgbEvaluator的使用,ArgbEvaluator俗称颜色计算器,
Android高仿qq及微信底部菜单的几种实现方式
想你依然心痛的博客
12-15 2万+
最近项目没那么忙，想着开发app的话，有很多都是重复，既然是重复的，那就没有必要每次都去写，所以就想着写一个app通用的基本框架，这里说的框架不是什么MVC,MVP,MVVM这种，而是app开发的通用模式，一般的app都是底部有几个菜单按钮，类似qq这样的，只不过个数不一样而已，设计上说底部的按钮以三到五个为最佳，多或少都会很难看。本来想着自己闲着没事写一下的，不过后来去网上看了看，基本上都有了，自
仿微信移动端的底部导航切换，显示高亮文字和图片
皮卡丘の开发之路
08-23 9310
在实现移动手机端的操作时，难免会需要用到切换icon 高亮的操作，下面就来说说切换这点事。因为之前没写过这养分开切换显示的操作，只写过针对当前对象进行切换，但是，其实原理和思路很简单：就是点击选中当前元素，改变当前元素的显示效果，当切换另一个元素的时候，移除当前元素的状态，将切换后的元素加上高亮的显示效果。我首先想到的就是使用javascript的removecClass和addClass来进行操作
Android实现微信底部导航条
辣m;精彩
12-24 929
简单微信导航条
android tabhost底部导航栏,Android学习笔记---使用TabHost实现微信底部导航栏效果(示例代码)...
weixin_30294759的博客
05-26 312
一. TabHost介绍TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计;1. TabHost常用组件TabWidget: 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡;TabSpec: 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中;--创建选项卡: newTabSpec(String tag), 创...
android dialog 实现微信底部状态栏
11-24
要在 Android 中实现类似微信底部状态栏的效果，可以通过使用 Dialog 来实现。下面是一个简单的示例： 1. 首先，在布局文件中创建一个包含底部状态栏的自定义布局（例如在底部有几个按钮和文本显示的布局）。 2. 在代码中创建一个自定义的 Dialog，使用上述布局。 3. 设置 Dialog 的样式，使其显示在屏幕的底部。 4. 使用 Dialog 的 show() 方法显示对话框。 例如： 1. 创建一个名为 dialog_bottom_status.xml 的布局文件，包含底部状态栏的按钮和文本。 ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" android:orientation="vertical"> <Button android:id="@+id/btn_status" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="状态按钮" /> <TextView android:id="@+id/text_status" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="状态文本" /> </LinearLayout> ``` 2. 创建一个名为 BottomStatusDialog 的类来实现自定义 Dialog。 ```java public class BottomStatusDialog extends Dialog { public BottomStatusDialog(Context context) { super(context); setContentView(R.layout.dialog_bottom_status); Button btnStatus = findViewById(R.id.btn_status); TextView textStatus = findViewById(R.id.text_status); // 在这里可以设置底部按钮和文本的点击事件和内容 // 设置对话框样式为底部显示 Window window = getWindow(); if (window != null) { window.setGravity(Gravity.BOTTOM); window.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); } } } ``` 3. 在需要显示底部状态栏的地方调用 BottomStatusDialog 的 show() 方法来显示对话框。 ```java BottomStatusDialog dialog = new BottomStatusDialog(this); dialog.show(); ``` 通过上述步骤，就可以实现一个类似微信底部状态栏的 Dialog。根据实际需求，你可以在布局文件和对话框类中添加其他的按钮和功能以满足你的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十壹、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值