安卓实现首页底部导航菜单中间图标凸起效果

效果图1，Activity代码如下：public class ThirdActivity extends BaseActivity {@BindView(R.id.fl_layout)FrameLayout flLayout;@BindView(R.id.radioGroup)RadioGroup radioGroup;@BindView(...

智玲君

2634人浏览 · 2020-05-06 10:55:27

智玲君 · 2020-05-06 10:55:27 发布

效果图
1，Activity代码如下：

public class ThirdActivity extends BaseActivity {

    @BindView(R.id.fl_layout)
    FrameLayout flLayout;
    @BindView(R.id.radioGroup)
    RadioGroup radioGroup;

    @BindView(R.id.rb_home)
    RadioButton rbHome;
    @BindView(R.id.rb_pond)
    RadioButton rbPond;
    @BindView(R.id.rbAdd)
    ImageView rbAdd;  // 中间凸起的图标
    @BindView(R.id.rb_message)
    RadioButton rbMessage;
    @BindView(R.id.rb_me)
    RadioButton rbMe;

    @Override
    protected int setLayout() {
        return R.layout.activity_third;
    }

    @Override
    protected void initView() {

        initTabIcon();
        // 设置默认选中首页
        rbHome.setChecked(true);

    }


    @Override
    protected void setListener() {
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {

                switch (checkedId){
                    // 闲鱼
                    case R.id.rb_home:
                        break;
                    // 鱼塘
                    case R.id.rb_pond:
                        break;
                    // 消息
                    case R.id.rb_message:
                        break;
                    // 我的
                    case R.id.rb_me:
                        break;
                    default:
                        break;
                }
            }
        });

        // 中间凸起图标的点击
        rbAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtil.ToastShow("点击了中间按钮");
            }
        });
    }


    private void initTabIcon() {

        // 使用radioButton时，会遇到无法设置drawable大小的问题，xml没法解决，那么我们可以通过java代码来动态的设置

        Drawable dbHome = getResources().getDrawable(R.drawable.selector_home);
        // 这个四参数指的是drawable将在被绘制在canvas的哪个矩形区域内,
        // 下面的代码会将drawable绘制在canvas内部(0, 0, 40, 40)表示的矩形区内（这个矩形区域的坐标是以canvas左上角为坐标原点的）
        // 单位为像素px
        dbHome.setBounds(0, 0, DensityUtil.dp2px(20), DensityUtil.dp2px(20));
        rbHome.setCompoundDrawables(null, dbHome, null, null);

        Drawable dbPond = getResources().getDrawable(R.drawable.selector_pond);
        dbPond.setBounds(0, 0, DensityUtil.dp2px(20), DensityUtil.dp2px(20));
        rbPond.setCompoundDrawables(null, dbPond, null, null);

        Drawable dbMsg = getResources().getDrawable(R.drawable.selector_message);
        dbMsg.setBounds(0, 0, DensityUtil.dp2px(20), DensityUtil.dp2px(20));
        rbMessage.setCompoundDrawables(null, dbMsg, null, null);

        Drawable dbMe = getResources().getDrawable(R.drawable.selector_person);
        dbMe.setBounds(0, 0, DensityUtil.dp2px(20), DensityUtil.dp2px(20));
        rbMe.setCompoundDrawables(null, dbMe, null, null);
    }
}

2，布局文件：

<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:clipChildren="false"
    android:orientation="vertical"
    tools:context=".mvp.activity.ThirdActivity">

    <FrameLayout
        android:id="@+id/fl_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.3dp"
        android:background="#33666666" />

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom|center"
        android:background="#eee"
        android:clipChildren="false"
        android:gravity="center"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/rb_home"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawablePadding="6dp"
            android:gravity="center"
            android:padding="5dp"
            android:text="闲鱼"
            android:textSize="13sp"
            android:textColor="@drawable/navigator_color_selector" />

        <RadioButton
            android:id="@+id/rb_pond"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawablePadding="6dp"
            android:gravity="center"
            android:padding="5dp"
            android:text="鱼塘"
            android:textSize="13sp"
            android:textColor="@drawable/navigator_color_selector" />

        <!-- 这里直接给其设置高度 让其超过父亲布局的56dp-->
        <LinearLayout
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="110dp">
            <ImageView
                android:id="@+id/rbAdd"
                android:layout_width="55dp"
                android:layout_height="55dp"
                android:src="@drawable/comui_tab_post" />
            <TextView
                android:textColor="@color/black"
                android:text="发布"
                android:padding="5dp"
                android:textSize="13sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>


        <RadioButton
            android:id="@+id/rb_message"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawablePadding="6dp"
            android:gravity="center"
            android:padding="5dp"
            android:text="消息"
            android:textSize="13sp"
            android:textColor="@drawable/navigator_color_selector" />

        <RadioButton
            android:id="@+id/rb_me"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawablePadding="6dp"
            android:gravity="center"
            android:padding="5dp"
            android:text="我的"
            android:textSize="13sp"
            android:textColor="@drawable/navigator_color_selector" />
    </RadioGroup>
</LinearLayout>

以上效果适用于点击了首页中间图标弹出菜单项以及跳转页面的场景，如果是需要实现和其他Tab一样的功能，即点击在当前页面切换到对应的子页面的话，就不是很适合了。

效果图
1，布局文件

<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:clipChildren="false"
    android:orientation="vertical"
    tools:context=".mvp.activity.ThirdActivity">

    <FrameLayout
        android:id="@+id/fl_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.3dp"
        android:background="#33666666" />
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:orientation="horizontal"
        android:background="#eee"
        android:gravity="center"
        >

        <LinearLayout
            android:id="@+id/ll_tab_one"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">
            
            <ImageView
                android:id="@+id/iv_tab_one"
                android:layout_width="23dp"
                android:layout_height="23dp"
                android:src="@drawable/comui_tab_home"/>

            <TextView
                android:id="@+id/tv_tab_one"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000"
                android:textSize="13sp"
                android:padding="5dp"
                android:text="闲鱼"
                />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_tab_two"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

            <ImageView
                android:id="@+id/iv_tab_two"
                android:layout_width="23dp"
                android:layout_height="23dp"
                android:src="@drawable/comui_tab_pond"/>

            <TextView
                android:id="@+id/tv_tab_two"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000"
                android:textSize="13sp"
                android:padding="5dp"
                android:text="鱼塘"
                />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_tab_three"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="110dp">
            <ImageView
                android:id="@+id/iv_tab_three"
                android:layout_width="55dp"
                android:layout_height="55dp"
                android:src="@drawable/comui_tab_post2" />
            <TextView
                android:id="@+id/tv_tab_three"
                android:text="发布"
                android:padding="5dp"
                android:textSize="13sp"
                android:textColor="#000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_tab_four"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

            <ImageView
                android:id="@+id/iv_tab_four"
                android:layout_width="23dp"
                android:layout_height="23dp"
                android:src="@drawable/comui_tab_message"/>

            <TextView
                android:id="@+id/tv_tab_four"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000"
                android:textSize="13sp"
                android:padding="5dp"
                android:text="消息"
                />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_tab_five"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

            <ImageView
                android:id="@+id/iv_tab_five"
                android:layout_width="23dp"
                android:layout_height="23dp"
                android:src="@drawable/comui_tab_person"/>

            <TextView
                android:id="@+id/tv_tab_five"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000"
                android:textSize="13sp"
                android:padding="5dp"
                android:text="我的"
                />

        </LinearLayout>


    </LinearLayout>

</LinearLayout>

android:clipChildren="false"属性允许子视图超出父视图的范围，但是别忘记设置在父视图中（上述高度为52的布局）设置android:gravity=“center”，防止设置了却不生效。

2，Activity的代码：

public class ThirdActivity extends BaseActivity {

    @BindView(R.id.fl_layout)
    FrameLayout flLayout;
    @BindView(R.id.iv_tab_one)
    ImageView ivTabOne;
    @BindView(R.id.tv_tab_one)
    TextView tvTabOne;
    @BindView(R.id.iv_tab_two)
    ImageView ivTabTwo;
    @BindView(R.id.tv_tab_two)
    TextView tvTabTwo;
    @BindView(R.id.iv_tab_three)
    ImageView ivTabThree;
    @BindView(R.id.tv_tab_three)
    TextView tvTabThree;
    @BindView(R.id.iv_tab_four)
    ImageView ivTabFour;
    @BindView(R.id.tv_tab_four)
    TextView tvTabFour;
    @BindView(R.id.iv_tab_five)
    ImageView ivTabFive;
    @BindView(R.id.tv_tab_five)
    TextView tvTabFive;


    private ArrayList<Fragment> fragments;
    private FragmentTabAdapter tabAdapter;

    @Override
    protected int setLayout() {
        return R.layout.activity_third;
    }

    @Override
    protected void initView() {
        fragments = new ArrayList<>();
        fragments.add(new Afragment());
        fragments.add(new Bfragment());
        fragments.add(new Cfragment());
        fragments.add(new Dfragment());
        fragments.add(new Efragment());
        tabAdapter = new FragmentTabAdapter(this, fragments, R.id.fl_layout);
        // 默认选中首页
        tvTabOne.setTextColor(getResources().getColor(R.color.colorPrimary));
        ivTabOne.setImageResource(R.drawable.comui_tab_home_selected);
    }


    @OnClick({R.id.ll_tab_one,R.id.ll_tab_two, R.id.ll_tab_three, R.id.ll_tab_four, R.id.ll_tab_five})
    public void onClicked(View view) {
        switch (view.getId()) {
            case R.id.ll_tab_one:
                tabAdapter.setCurrentFragment(0);
                break;
            case R.id.ll_tab_two:
                tabAdapter.setCurrentFragment(1);
                break;
            case R.id.ll_tab_three:
                tabAdapter.setCurrentFragment(2);
                break;
            case R.id.ll_tab_four:
                tabAdapter.setCurrentFragment(3);
                break;
            case R.id.ll_tab_five:
                tabAdapter.setCurrentFragment(4);
                break;
        }
    }

    @Override
    protected void setListener() {
        tabAdapter.setOnTabChangeListener(new FragmentTabAdapter.OnTabChangeListener() {
            @Override
            public void OnTabChanged(int index) {

                tvTabOne.setTextColor(getResources().getColor(R.color.black));
                tvTabTwo.setTextColor(getResources().getColor(R.color.black));
                tvTabThree.setTextColor(getResources().getColor(R.color.black));
                tvTabFour.setTextColor(getResources().getColor(R.color.black));
                tvTabFive.setTextColor(getResources().getColor(R.color.black));

                ivTabOne.setImageResource(R.drawable.comui_tab_home);
                ivTabTwo.setImageResource(R.drawable.comui_tab_pond);
                ivTabThree.setImageResource(R.drawable.comui_tab_post2);
                ivTabFour.setImageResource(R.drawable.comui_tab_message);
                ivTabFive.setImageResource(R.drawable.comui_tab_person);
                switch (index) {
                    case 0:
                        tvTabOne.setTextColor(getResources().getColor(R.color.colorPrimary));
                        ivTabOne.setImageResource(R.drawable.comui_tab_home_selected);
                        break;
                    case 1:
                        tvTabTwo.setTextColor(getResources().getColor(R.color.colorPrimary));
                        ivTabTwo.setImageResource(R.drawable.comui_tab_pond_selected);
                        break;
                    case 2:
                        tvTabThree.setTextColor(getResources().getColor(R.color.colorPrimary));
                        ivTabThree.setImageResource(R.drawable.comui_tab_post);
                        break;
                    case 3:
                        tvTabFour.setTextColor(getResources().getColor(R.color.colorPrimary));
                        ivTabFour.setImageResource(R.drawable.comui_tab_message_selected);
                        break;
                    case 4:
                        tvTabFive.setTextColor(getResources().getColor(R.color.colorPrimary));
                        ivTabFive.setImageResource(R.drawable.comui_tab_person_selected);
                        break;
                }
            }
        });
    }

}