Android底部导航栏+消息提醒

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36091581/article/details/80423738

Android底部导航栏+消息提醒

最近想在网上找一些Android底部导航栏切换并能提供消息提醒的案例，虽然有很多案例但都不是我想要的。我就开始自己瞎研究了，废话不多说了，直接上代码。

1.先创建一个layout XML文件
这个文件包含三个部分：ViewPage、RadioGroup、BadgeView的Layout。
1.1 ViewPage

<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="56dp"
        android:overScrollMode="never"/>

ViewPage是基于android-support-v4.jar的，这个类我们应该已经很熟悉了，不清楚的话可以问度娘哈！

1.2 RadioGroup
这是一个单选按钮集合，假设我们有四个tab需要切换，我们就需要设置四个RadioButton来实现。

<RadioGroup
        android:id="@+id/main_radio_group"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:gravity="center_vertical"
        android:paddingTop="10dp"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radio_btn_home"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            android:checked="true"
            android:button="@null"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/bottombar_tab_home_selector"
            android:gravity="center_horizontal"
            android:text="首页"
            android:textColor="@drawable/bottombar_btn_text_selector"
            android:textSize="@dimen/dimen_10_sp"
            android:layout_weight="1" />

        <RadioButton
            android:id="@+id/radio_btn_find"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:checked="false"
            android:button="@null"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/bottombar_tab_find_selector"
            android:gravity="center_horizontal"
            android:text="发现"
            android:textColor="@drawable/bottombar_btn_text_selector"
            android:textSize="@dimen/dimen_10_sp"/>

        <RadioButton
            android:id="@+id/radio_btn_order"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:checked="false"
            android:button="@null"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/bottombar_tab_order_selector"
            android:gravity="center_horizontal"
            android:text="订单"
            android:textColor="@drawable/bottombar_btn_text_selector"
            android:textSize="@dimen/dimen_10_sp"/>

        <RadioButton
            android:id="@+id/radio_btn_my"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:checked="false"
            android:button="@null"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/bottombar_tab_my_selector"
            android:gravity="center_horizontal"
            android:text="我的"
            android:textColor="@drawable/bottombar_btn_text_selector"
            android:textSize="@dimen/dimen_10_sp"/>

    </RadioGroup>

按钮样式我设置成了透明，就是@null，你可以自己设置。
这里我要重要讲两个地方：
android:drawableTop：按钮未选中/选中情况下选择不同的Icon图形来显示，例如：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/my1" android:state_checked="true"/>
    <item android:drawable="@mipmap/my" android:state_checked="false"/>
</selector>

android:textColor： 按钮未选中/选中情况下选择不同的文字颜色来显示，例如：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/MainColor" android:state_checked="true"/>
    <item android:color="@color/text_bottom_bar_color" android:state_checked="false"/>
</selector>

1.3 BadgeView的Layout
BadgeView是什么？
在做聊天应用时，处理用户新消息时主流的聊天软件都会在消息的左上角或者右上角有一个小红点，并且里面有消息数量的提示，给人很好的交互体检，最近项目在移植聊天功能，感觉这个需求还是有必要加进项目中的，从github上发现一个比较好用的开源框架，简单易用，而且效果也挺好，所以推荐给大家使用。

使用的是Github上面的一个开源的自定义控件。 
Github地址：https://github.com/stefanjauker/BadgeView

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="#00000000"
        android:orientation="horizontal">

        <Button
            android:id="@+id/bottom_btn_home"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:visibility="invisible" />

        <Button
            android:id="@+id/bottom_btn_find"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:visibility="invisible" />

        <Button
            android:id="@+id/bottom_btn_order"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00000000"
            android:visibility="invisible" />
        <Button
            android:id="@+id/bottom_btn_my"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00000000"
            android:visibility="invisible" />
    </LinearLayout>

我们在上面设置了几个RadioButton，那么Button我们就需要设置相同数量，前后要对应起来。

---

2.创建一个Activity文件

我们需要继承Activity类，同时调用接口RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener。

public class TabActivity extends Activity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener{}

2.1 声明变量

 // bottombar.
    private RadioGroup mRadioGroup;
    private List<Integer> lstRadioButton = Arrays.asList(
            R.id.radio_btn_home,
            R.id.radio_btn_find,
            R.id.radio_btn_order,
            R.id.radio_btn_my
    );
    // content_frame_pager.
    private ViewPager viewPager;
    List<View> viewList  = new ArrayList<>();

在这里我们声明了RadioGroup， lstRadioButton，ViewPage 和 List变量。

2.2 创建onCreate方法

super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setOnPageChangeListener(this);

        mRadioGroup = (RadioGroup) findViewById(R.id.main_radio_group);
        mRadioGroup.setOnCheckedChangeListener(this);

        //添加未读消息提醒数量
        //覆盖在RadioGroup之上LinearLayout的第五个占位子布局
        Button btnHome = (Button) findViewById(R.id.bottom_btn_home);
        remind(btnHome);

        // 添加页面
        for(int i=0; i<4;i++){
            View view = LayoutInflater.from(this).inflate(R.layout.fragment, null);
            TextView textView = (TextView) view.findViewById(R.id.text);
            textView.setText(i+"");
            textView.setTextSize(18);
            textView.setTextColor(Color.BLACK);
            viewList.add(view);
        }
        viewPager.setAdapter(new PagerAdapter() {

            // 页面数量
            @Override
            public int getCount() {
                return viewList.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
            //页面实例化
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));
                return viewList.get(position);
            }
            // 页面销毁时
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(viewList.get(position));
            }
        });

    }

onCreate的前半部分我相信你可以看得懂的，我着重讲一下ViewPage左右滑动监听事件。
viewPager.setAdapter setAdapter() 设置适配器
PagerAdapter PagerAdapter主要是viewpager的适配器

PagerAdapter：

startUpdate()  Viewpager显示的页面数据有所改变的回调
finishUpdate() 页面数据改变的处理结束后的回调方法
instantiateItem() 初始化一个item数据的时候的回调
destroyItem() 销毁一个item数据的时候会回调
setPrimaryItem()设置好当前显示item后的回调
isViewFromObject()  View 是否和 Object有关联关系
getItemPosition() 获取当前数据对应的位置
getPageTitle() 获取当前页面对应的标题
getCount() 获取总的item数量
getPageWidth() 获取item页面相对于ViewPager宽度

3.BadgeView

我是把github上的源码copy下来放在了本地的类中，你可以看自己的业务需求。

private void remind(View view) { //BadgeView的具体使用
        BadgeView badge1 = new BadgeView(this, view);// 创建一个BadgeView对象，view为你需要显示提醒的控件
        badge1.setText("12"); // 需要显示的提醒类容
        badge1.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);// 显示的位置.右上角,BadgeView.POSITION_BOTTOM_LEFT,下左，还有其他几个属性
        badge1.setTextColor(Color.WHITE); // 文本颜色
        badge1.setBadgeBackgroundColor(Color.RED); // 提醒信息的背景颜色，自己设置
        //badge1.setBackgroundResource(R.mipmap.icon_message_png); //设置背景图片
        badge1.setTextSize(8); // 文本大小
        badge1.setBadgeMargin(55,10); // 水平和竖直方向的间距
//        badge1.setBadgeMargin(10); //各边间隔
        // badge1.toggle(); //显示效果，如果已经显示，则影藏，如果影藏，则显示
        badge1.show();// 只有显示
        // badge1.hide();//影藏显示
    }

setTargetView(View) 
设置控件
setBadgeCount(int) 
设置显示的数字
setBadgeGravity(Gravity) 
设置显示的位置
setBackgroundColor() 
设置背景色
setBackgroundResource() 
设置背景图片
setTypeface() 
设置显示字体
setShadowLayer() 
设置字体阴影

我只做了首页的提示，具体其他样式你可以自己根据业务需求来设定。

下面将展示完整代码：

activity_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="56dp"
        android:overScrollMode="never"/>
    <RadioGroup
        android:id="@+id/main_radio_group"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:gravity="center_vertical"
        android:paddingTop="10dp"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radio_btn_home"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            android:checked="true"
            android:button="@null"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/bottombar_tab_home_selector"
            android:gravity="center_horizontal"
            android:text="首页"
            android:textColor="@drawable/bottombar_btn_text_selector"
            android:textSize="@dimen/dimen_10_sp"
            android:layout_weight="1" />

        <RadioButton
            android:id="@+id/radio_btn_find"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:checked="false"
            android:button="@null"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/bottombar_tab_find_selector"
            android:gravity="center_horizontal"
            android:text="发现"
            android:textColor="@drawable/bottombar_btn_text_selector"
            android:textSize="@dimen/dimen_10_sp"/>

        <RadioButton
            android:id="@+id/radio_btn_order"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:checked="false"
            android:button="@null"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/bottombar_tab_order_selector"
            android:gravity="center_horizontal"
            android:text="订单"
            android:textColor="@drawable/bottombar_btn_text_selector"
            android:textSize="@dimen/dimen_10_sp"/>

        <RadioButton
            android:id="@+id/radio_btn_my"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:checked="false"
            android:button="@null"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/bottombar_tab_my_selector"
            android:gravity="center_horizontal"
            android:text="我的"
            android:textColor="@drawable/bottombar_btn_text_selector"
            android:textSize="@dimen/dimen_10_sp"/>

    </RadioGroup>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="#00000000"
        android:orientation="horizontal">

        <Button
            android:id="@+id/bottom_btn_home"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:visibility="invisible" />

        <Button
            android:id="@+id/bottom_btn_find"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:visibility="invisible" />

        <Button
            android:id="@+id/bottom_btn_order"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00000000"
            android:visibility="invisible" />
        <Button
            android:id="@+id/bottom_btn_my"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00000000"
            android:visibility="invisible" />
    </LinearLayout>

</RelativeLayout>

TabActivity.class

package com.ele.XXX.XXX.Activity;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RadioGroup;
import android.widget.TextView;

import com.ele.divi.ele.R;
import com.ele.divi.ele.Utils.BadgeView;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class TabActivity extends Activity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener{

    // bottombar.
    private RadioGroup mRadioGroup;
    private List<Integer> lstRadioButton = Arrays.asList(
            R.id.radio_btn_home,
            R.id.radio_btn_find,
            R.id.radio_btn_order,
            R.id.radio_btn_my
    );
    // content_frame_pager.
    private ViewPager viewPager;
    List<View> viewList  = new ArrayList<>();

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

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setOnPageChangeListener(this);

        mRadioGroup = (RadioGroup) findViewById(R.id.main_radio_group);
        mRadioGroup.setOnCheckedChangeListener(this);

        //添加未读消息提醒数量
        //覆盖在RadioGroup之上LinearLayout的第五个占位子布局
        Button btnHome = (Button) findViewById(R.id.bottom_btn_home);
        remind(btnHome);

        // 添加页面
        for(int i=0; i<4;i++){
            View view = LayoutInflater.from(this).inflate(R.layout.fragment, null);
            TextView textView = (TextView) view.findViewById(R.id.text);
            textView.setText(i+"");
            textView.setTextSize(18);
            textView.setTextColor(Color.BLACK);
            viewList.add(view);
        }
        viewPager.setAdapter(new PagerAdapter() {

            // 页面数量
            @Override
            public int getCount() {
                return viewList.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
            //页面实例化
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));
                return viewList.get(position);
            }
            // 页面销毁时
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(viewList.get(position));
            }
        });

    }

    private void remind(View view) { //BadgeView的具体使用
        BadgeView badge1 = new BadgeView(this, view);// 创建一个BadgeView对象，view为你需要显示提醒的控件
        badge1.setText("12"); // 需要显示的提醒类容
        badge1.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);// 显示的位置.右上角,BadgeView.POSITION_BOTTOM_LEFT,下左，还有其他几个属性
        badge1.setTextColor(Color.WHITE); // 文本颜色
        badge1.setBadgeBackgroundColor(Color.RED); // 提醒信息的背景颜色，自己设置
        //badge1.setBackgroundResource(R.mipmap.icon_message_png); //设置背景图片
        badge1.setTextSize(8); // 文本大小
        badge1.setBadgeMargin(55,10); // 水平和竖直方向的间距
//        badge1.setBadgeMargin(10); //各边间隔
        // badge1.toggle(); //显示效果，如果已经显示，则影藏，如果影藏，则显示
        badge1.show();// 只有显示
        // badge1.hide();//影藏显示
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        int pos = lstRadioButton.indexOf(checkedId);
        viewPager.setCurrentItem(pos);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        Log.e("onPageSelected","-----------------"+position);
        mRadioGroup.check(lstRadioButton.get(position));
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

最后不要忘记去AndroidManifest.xml注册页面哦！

效果图：