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

Posted 十壹、

tags:

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

仿微信底部导航栏

要做一个类似微信底部导航栏要用到 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="23dpAndroid实战项目 仿微信底部导航栏


 Android底部导航栏


 Android ActionBar应用实战，高仿微信主界面的设计


 Android仿微信底部菜单栏+顶部菜单栏


 Android 仿微信调用第三方应用导航(百度，高德腾讯)


 Android仿微信调用第三方地图应用导航（高德百度腾讯）