Android 仿閒魚底部菜單導航效果

寫在前面

最近工作比較忙，也是好久沒碰Android了，但將實在的依舊是喜歡原生，所以也是利用了平時的時間多去學習積累下效果以及基礎，也是希望自己能夠堅持下來，努力提升自己的代碼實力。不忘初心，砥礪前行，大家加油。

切入正題

本文將模仿鹹魚底部菜單構建簡單頁面，並實現了彈出的動畫。彈出動畫是參考的開源中國，學習的過程中發現透明的活動以及動畫掌握的還是不太好，也是在實踐中發現了不足，並補習了一下。

效果展示

代碼提示

<?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: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" />
  <!-- 出現在這個center這裏...-->
  <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">
  	 .......
      <!-- 這裏直接給其設置高度 讓其超過父親佈局的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: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，往往一些知識點我們都會淡忘，這樣就有必要做一個專題去系統的歸納學習了。

項目地址

項目