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

最新推荐文章于 2024-04-06 03:40:23 发布
最新推荐文章于 2024-04-06 03:40:23 发布
阅读量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
    评论
专栏目录
仿微信界底部面导航栏（Android）
weixin_47024334的博客
03-02 827
手把手教你复刻微信底部导航栏
如何用android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
最新发布
qq_73830179的博客
06-07 1365
大家好，我是 波士顿木木，今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述，希望你们喜欢。
Android_fragment实现微信底部导航栏
01-22
Android_fragment实现微信底部导航栏
android studio——设计简单微信界面超详细教程
m0_73786116的博客
10-16 7660
android studio设计微信界面以及可能遇到的问题
BottomNavigationView与Navigation使用
魏亚笛的博客
01-28 3154
目录 1 as自动生成 2 xml代码 如果要修改底部的图标和文字需要去bottom_nav_menu修改 如果你要修改默认点击颜色需要去主题颜色修改 如果你要修改底部背景颜色可以在BottomNavigationView 的背景颜色修改 如果你要 自定义点击 图标和文字 颜色可以自定义一个选择器修改 3 MainActivity 代码 如果不想想使用ActionBar 可以把注释掉这句代码 1 as自动生成 2 xml代码 <?xml versio...
Android - 实现微信的底部导航功能（第五次作业）
WeiComp
10-28 495
利用fragment和ViewPager实现类似微信的底部导航功能。上传模拟器运行截图及代码截图。
微信小程序实战之仿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开发之微信底部菜单栏实现的几种方法汇总
01-20
实现方式 实现的方式有很多种 这里总结最常见的几种方式，以后再添加其他的。 viewPager + RadioGroup viewPager + FragmentTabHost viewpager +TabLayout viewPager+RadioGroup 感觉这是最简单的一个了，我也就不贴代码 说说我理解的思路吧 通过给pager 和RadioGroup 添加监听，监听两个控件的变化 实现联动 当viewPager的显示pager改变就会触发监听 ，在监听中选中对应的RadioButton即可 当RadioGroup发生 选中改变时也会触发监听 ，在选中改变后 设置显示对应的
Android仿微信底部导航栏.zip
03-23
android 仿微信客户端的底部导航栏 左右滑动渐变字体颜色 滑动效果等等
Android开发——底部导航栏设计
weixin_46560512的博客
10-10 3023
其实,常见的Android和微信小程序一样，通常最下面一排需要有一排导航栏，可以通过点击导航栏图标和滑动实现页面跳转，具体实现使用的是Android的。下面详细说一下Fragment的实现，直接继承Android自带的FragmentList，详细原理可以参考。补充关于按钮的点亮和未点亮状态设计，在Android的可选按钮中设计。标记当前正在访问的页面，当修改了页面就将当前正在访问的页面设置成。，其实就是为了把底部导航栏分成多个等分，图标加上导航页的名字，使用。使得各个导航栏中的内容居中。
Android UI—仿微信底部导航栏布局(1)，四面阿里Android开发岗
2401_84149875的博客
04-06 582
都说三年是程序员的一个坎，能否晋升或者提高自己的核心竞争力，这几年就十分关键。技术发展的这么快，从哪些方面开始学习，才能达到高级工程师水平，最后进阶到Android架构师/技术专家？我总结了这 5大块；我搜集整理过这几年阿里，以及腾讯，字节跳动，华为，小米等公司的面试题，把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 Xmind（实际上比预期多花了不少精力），包含知识脉络 + 分支细节。
微信 设置底部导航栏
weixin_43077063的博客
08-27 1万+
转 微信小程序设置底部导航栏目方法 2...
Android仿微信底部菜单栏+今日头条顶部导航栏
热门推荐
海阔天空
09-12 2万+
背景 Android应用几乎都会用到底部菜单栏，在Material Design还没有出来之前，TabHost等技术一直占主流，现在Google新sdk中提供了TabLayout类可以便捷的做出底部菜单栏效果。 本节我们实现两种主要的Tab效果： 1. 仿微信底部菜单 2. 仿今日头条顶部导航条 效果预览： 底部菜单 Tab一般与Activity或Fragment配合使用，以达到...
Android 类似微信底部导航条的简单实现
qq_43611861的博客
06-30 210
Android 类似微信底部导航条的简单实现 微信底部图片是这样的可以使用4个textview直接实现 主要是用drawableTop(上),drawableButtom(下),drawableLeft(左),drawableRight(右)四个属性来控制图片对于文字的位置 1 xml代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk
Android仿微信底部导航栏,Viewpager动效+仿微信底部导航栏
weixin_30995967的博客
05-26 214
Viewpager动效+仿微信底部导航栏简介：本文内容适用于 想要编写 首次进入项目的欢迎引导页面、底部导航栏、以及轮播图添加动效。主要代码提示：估值器 - ArgbEvaluator(针对Color属性)设置控件属性 ViewCompat.setAlpha(控件, float类型，百分比); (渐变)viewPager.setPageTransformer(true ,PageTransform...
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、付费专栏及课程。

余额充值