ImageView实现APP底部按钮切换页面

一.概述

以前在做项目的时候，底部按钮切换页面是用RadioButton实现的，但是最近有个新的需求，就是在某个按钮上面显示一个消息提示，如图所示：

这时候用radiobutton是会出问题的，通常我们的做法可能是给radiobutton外面嵌套一层布局或者使用第三方的控件完成这个功能，但是当我们实现效果以后，radiobutton的点击切换的效果就会出问题，因为此时这个radiobutton不在是radiogroup中的直接子控件，无法实现点击其他按钮时当前按钮取消选中，非常不好解决，搞了半天没搞好。所以最终想想其他办法，最后终于实现了，那就是底部我们不使用radiobutton，而是采用imageview，在代码中我们控制按钮的显示样式。这种实现方式适用于图片中本身就包含按钮的名字，最重要的是可以解决某个按钮需要消息提示的问题。下面看看如何实现。

二.实现

先看看效果图：

先看主页面布局文件：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.duanzudemo.MainActivity">
    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#9e9e9e"
        >
    </FrameLayout>
    <LinearLayout
        android:id="@+id/group"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="60dp">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="match_parent">
        <ImageView
            android:button="@null"
            android:id="@+id/iv_find"
            android:background="@drawable/navimenu_faxian_nosel"
            android:layout_width="wrap_content"
            android:clickable="true"
            android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="match_parent">
        <ImageView
            android:button="@null"
            android:id="@+id/iv_house"
            android:clickable="true"
            android:background="@drawable/navimenu_fy_nosel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="match_parent">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            <ImageView
                android:button="@null"
                android:clickable="true"
                android:id="@+id/iv_message"
                android:layout_centerInParent="true"
                android:background="@drawable/navimenu_msg_nosel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/message_count"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:background="@drawable/message_count"
                android:text="32"
                android:textSize="8sp"
                android:gravity="center"
                android:layout_alignRight="@+id/iv_message"
                android:layout_marginRight="8dp"
                android:layout_marginTop="3dp"
                />
            </RelativeLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="match_parent">
        <ImageView
            android:button="@null"
            android:clickable="true"
            android:id="@+id/iv_mine"
            android:background="@drawable/navimenu_my_nosel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

整体是一个线性布局，上面是一个显示内容区域的FrameLayout，下面是水平的线性布局，里面平均放着四个子线性布局，其中第三个显示消息的ImageView比较特殊，为了能够显示消息圆点，我们给最外面套了一个相对布局，来控制圆点位置，布局还是比较简单的。其中我们给TextView设置了一个shape作为背景

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <solid android:color="#ff0000"/>
</shape>

是一个红色的圆，很简单

接下来看代码：

public class MainActivity extends AppCompatActivity {
    @Bind(R.id.iv_find)
    ImageView ivFind;
    @Bind(R.id.iv_house)
    ImageView ivHouse;
    @Bind(R.id.iv_message)
    ImageView ivMessage;
    @Bind(R.id.iv_mine)
    ImageView ivMine;
    //存放底部图片的集合
    private List<ImageView> imageList = new ArrayList<>();
    private int curIndex = 0;//当前点击的位置
    //图片选中样式集合
    private int[] noseIds = {R.drawable.navimenu_faxian_nosel, R.drawable.navimenu_fy_nosel,
            R.drawable.navimenu_msg_nosel, R.drawable.navimenu_my_nosel};
    //图片默认样式集合
    private int[] seIds = {R.drawable.navimenu_faxian_sel, R.drawable.navimenu_fy_sel,
            R.drawable.navimenu_msg_sel, R.drawable.navimenu_my_sel};
    private Fragment fragment;//当前fragment
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        imageList.add(ivFind);
        imageList.add(ivHouse);
        imageList.add(ivMessage);
        imageList.add(ivMine);
        getSupportFragmentManager().beginTransaction().replace(R.id.fl_content, new FindFragment()).commit();
    }
        @OnClick({R.id.iv_find,R.id.iv_house,R.id.iv_message,R.id.iv_mine})
        public void a(View v) {
            switch (v.getId()) {
                case R.id.iv_find:
                    curIndex = 0;
                    fragment = new FindFragment();
                    break;
                case R.id.iv_house:
                    curIndex = 1;
                    fragment = new HomeFragment();
                    break;
                case R.id.iv_message:
                    curIndex = 2;
                    fragment = new MessageFragment();
                    break;
                case R.id.iv_mine:
                    curIndex = 3;
                    fragment = new MineFragment();
                    break;
            }
            for (int i = 0; i < imageList.size(); i++) {
                ImageView imageView = imageList.get(i);
                //当前图片选中，并且其他设置为默认样式
                if (i == curIndex) {
                    imageView.setBackgroundResource(seIds[i]);
                    continue;
                }
                imageView.setBackgroundResource(noseIds[i]);
            }
            getSupportFragmentManager().beginTransaction().replace(R.id.fl_content, fragment).commit();
        }
}