Android 仿闲鱼底部菜单导航效果

写在前面

最近工作比较忙，也是好久没碰Android了，但讲实在的依旧是喜欢原生，所以也是利用了平时的时间多去学习积累下效果以及基础，也是希望自己能够坚持下来，努力提升自己的代码实力。不忘初心，砥砺前行，大家加油。

切入正题

本文将模仿咸鱼底部菜单构建简单页面，并实现了弹出的动画。弹出动画是参考的开源中国，学习的过程中发现透明的活动以及动画掌握的还是不太好，也是在实践中发现了不足，并补习了一下。

效果展示

代码提示

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:clipChildren="false"
  android:orientation="vertical">
  <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1">
      <TextView
          android:layout_centerInParent="true"
          android:id="@+id/tvDes"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />
  RelativeLayout>
  <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">
  	 .......
      
      <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:layout_width="wrap_content"
              android:layout_height="wrap_content" />
      LinearLayout>
        ......
  RadioGroup>
LinearLayout>

如上代码所示，使用clipChildren:false 可以使得子布局溢出父布局的宽高。做过前端的对overflow属性应该有所了解吧，Android 布局默认可以理解为overflow:hidden。那么我们设置clipChildren:false,那么就是清除了hidden属性。值得一提的是，clipchildren属性应当加在最根布局上面哦。

RadioButton 动态设置drawable大小

我们使用radioButton时，会遇到无法设置drawable大小的问题，xml没法解决，那么我们可以通过java代码来动态的设置。如下代码所示，设置drawable大小，即可实现预期的效果。

        <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:textColor="@color/navigator_color" />

 Drawable dbMsg = getResources().getDrawable(R.drawable.selector_message);
 dbMsg.setBounds(0, 0, 40, 40);
 mRbMsg.setCompoundDrawables(null, dbMsg, null, null);

动画展示的思路

首先应该明确我们这里的动画都是在同一个界面上的，即打开一个灰层的界面执行动画旋转，然后以轨迹设置弹出的选项，然后关闭的时候进行取反操作。这里非常重要的是，我们启动的是一个透明的应用，然后在此基础上我们对界面的背景进行相应效果的设置。

        mBtnPub.animate()
                .rotation(135.0f)
                .setDuration(180)
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                    }
                })
                .start();

小结

其实实现起来不难，我觉得开发是一个积累的过程，往往不会的知识是有些api我们没有接触过。注意点滴，慢慢的会的也就多了，然后就是一个温故知新了。除非一些日常中常用的api，往往一些知识点我们都会淡忘，这样就有必要做一个专题去系统的归纳学习了。

项目地址

项目