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

Posted 2021-09-07 十壹、

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android实战项目仿微信底部导航栏相关的知识，希望对你有一定的参考价值。

仿微信底部导航栏

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

添加依赖

	//BottomNavigationView
    implementation 'com.google.android.material:material:1.2.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>

主界面设置 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);
    }
    
}

添加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>

要在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>

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实战项目 仿微信底部导航栏
 Android底部导航栏
 Android ActionBar应用实战，高仿微信主界面的设计
 Android仿微信底部菜单栏+顶部菜单栏
 带有片段和底部导航栏的 Android FloatingActionButton
 Flutter微信项目实战05 通讯录界面搭建(上)

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

仿微信底部导航栏

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