增加老师端首页tab动画

BaseLibrary/src/main/java/com/cooleshow/base/widgets/TabAnimationView.java

@@ -0,0 +1,70 @@
+package com.cooleshow.base.widgets;
+
+import android.content.Context;
+import android.util.AttributeSet;
+import android.widget.Checkable;
+
+import com.airbnb.lottie.LottieAnimationView;
+
+/**
+ * Author by pq, Date on 2022/8/2.
+ */
+public class TabAnimationView extends LottieAnimationView implements Checkable {
+    private boolean checked;
+
+    public TabAnimationView(Context context) {
+        this(context, null);
+    }
+
+    public TabAnimationView(Context context, AttributeSet attrs) {
+        this(context, attrs, -1);
+    }
+
+    public TabAnimationView(Context context, AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        init();
+    }
+
+    private void init() {
+
+    }
+
+    @Override
+    public boolean isChecked() {
+        return this.checked;
+    }
+
+    @Override
+    public void setChecked(boolean checked) {
+
+        try {
+            if (this.checked != checked) {
+                this.checked = checked;
+                if (isAnimating()) {
+                    cancelAnimation();
+                }
+                if (checked) {
+                    playAnimation();
+//                    if (getSpeed() < 0.0F) {
+//                        reverseAnimationSpeed();
+//                        playAnimation();
+//                    }
+                } else {
+                    setFrame(0);
+                    setProgress(0);
+//                    if (getSpeed() > 0.0F) {
+//                        reverseAnimationSpeed();
+//                    }
+                }
+//                playAnimation();
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+
+    @Override
+    public void toggle() {
+        setChecked(!this.checked);
+    }
+}

student/src/main/java/com/cooleshow/student/ui/main/MainActivity.java

@@ -3,6 +3,7 @@ package com.cooleshow.student.ui.main;
 import android.Manifest;
 import android.content.Context;
 import android.content.Intent;
+import android.graphics.Typeface;
 import android.os.Bundle;
 import android.text.TextUtils;
 import android.view.KeyEvent;
@@ -31,6 +32,7 @@ import com.cooleshow.base.utils.ToastUtil;
 import com.cooleshow.base.utils.helper.MidiFileHelper;
 import com.cooleshow.base.utils.helper.QMUIStatusBarHelper;
 import com.cooleshow.base.utils.helper.UpdateAppHelper;
+import com.cooleshow.base.widgets.TabAnimationView;
 import com.cooleshow.student.App;
 import com.cooleshow.student.R;
 import com.cooleshow.student.adapter.HomePageAdapter;
@@ -151,6 +153,8 @@ public class MainActivity extends BaseMVPActivity<ActivityMainBinding, MainPrese
         View badge = LayoutInflater.from(this).inflate(com.cooleshow.base.R.layout.im_badge, menuView, false);
         tvMsgCount = badge.findViewById(com.cooleshow.base.R.id.tv_msg_count);
         messageTab.addView(badge);
+        //默认选中第一个
+//        onTabClick(viewBinding.viewHome);
 
         HomePageAdapter homePageAdapter = new HomePageAdapter(this);
         mHomeFragment = new HomeFragment();
@@ -191,7 +195,21 @@ public class MainActivity extends BaseMVPActivity<ActivityMainBinding, MainPrese
 
     public void setPositionItem(int position) {
         getViewBinding().navigation.setSelectedItemId(getViewBinding().navigation.getMenu().getItem(position).getItemId());
-
+//        if (position == 0) {
+//            onTabClick(viewBinding.viewHome);
+//        }
+//        if (position == 1) {
+//            onTabClick(viewBinding.viewCourse);
+//        }
+//        if (position == 2) {
+//            onTabClick(viewBinding.viewChat);
+//        }
+//        if (position == 3) {
+//            onTabClick(viewBinding.viewMall);
+//        }
+//        if (position == 4) {
+//            onTabClick(viewBinding.viewMine);
+//        }
     }
 
     public void clickBackPressed() {
@@ -245,6 +263,64 @@ public class MainActivity extends BaseMVPActivity<ActivityMainBinding, MainPrese
         }
     }
 
+    private TabAnimationView lastSelectTab;
+    private TextView lastSelectText;
+    /*
+   上一次的tab位置
+    */
+
+    public void onTabClick(View view) {
+        int id = view.getId();
+        if (id == R.id.view_home) {
+            getViewBinding().viewPager.setCurrentItem(0, false);
+            handleTabAnim(viewBinding.tabHome);
+            setTabTextStyle(viewBinding.tvHome);
+            return;
+        }
+        if (id == R.id.view_course) {
+            getViewBinding().viewPager.setCurrentItem(1, false);
+            handleTabAnim(viewBinding.tabCourse);
+            setTabTextStyle(viewBinding.tvCourse);
+            return;
+        }
+        if (id == R.id.view_chat) {
+            getViewBinding().viewPager.setCurrentItem(2, false);
+            handleTabAnim(viewBinding.tabChat);
+            setTabTextStyle(viewBinding.tvChat);
+            return;
+        }
+        if (id == R.id.view_mall) {
+            getViewBinding().viewPager.setCurrentItem(3, false);
+            handleTabAnim(viewBinding.tabMall);
+            setTabTextStyle(viewBinding.tvMall);
+            return;
+        }
+        if (id == R.id.view_mine) {
+            getViewBinding().viewPager.setCurrentItem(4, false);
+            handleTabAnim(viewBinding.tabMine);
+            setTabTextStyle(viewBinding.tvMine);
+            return;
+        }
+    }
+
+    private void setTabTextStyle(TextView textView) {
+        if (lastSelectText != null) {
+            lastSelectText.setTextColor(getResources().getColor(com.cooleshow.base.R.color.color_999999));
+            lastSelectText.setTypeface(Typeface.DEFAULT);
+        }
+        lastSelectText = textView;
+        lastSelectText.setTextColor(getResources().getColor(com.cooleshow.base.R.color.color_333333));
+        lastSelectText.setTypeface(Typeface.DEFAULT_BOLD);
+    }
+
+    private void handleTabAnim(TabAnimationView view) {
+        if (lastSelectTab != null) {
+            lastSelectTab.toggle();
+        }
+        lastSelectTab = view;
+        lastSelectTab.setChecked(true);
+    }
+
 
     private boolean onTabClick(int viewId) {
         if (viewId == R.id.menu_home) {

student/src/main/res/layout/activity_main.xml

@@ -18,6 +18,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:background="@color/white"
+        android:visibility="visible"
         app:itemBackground="@null"
         app:itemIconSize="24dp"
         app:itemTextAppearanceActive="@style/bottom_tab_title_active_stu"
@@ -27,4 +28,215 @@
         app:layout_constraintTop_toBottomOf="@+id/view_pager"
         app:menu="@menu/bottom_nav_item"
         tools:ignore="MissingConstraints" />
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/cs_bottom"
+        android:visibility="gone"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="@color/white"
+        android:elevation="5dp"
+        android:orientation="vertical"
+        android:paddingBottom="10dp"
+        app:layout_constraintBottom_toBottomOf="parent">
+
+        <com.cooleshow.base.widgets.TabAnimationView
+            android:id="@+id/tab_home"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_marginStart="27dp"
+            android:layout_marginTop="10dp"
+            app:layout_constraintHorizontal_chainStyle="spread_inside"
+            app:layout_constraintLeft_toLeftOf="parent"
+            app:layout_constraintRight_toLeftOf="@+id/tab_course"
+            app:layout_constraintTop_toTopOf="parent"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/shouye" />
+
+        <com.cooleshow.base.widgets.TabAnimationView
+            android:id="@+id/tab_course"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            app:layout_constraintLeft_toRightOf="@+id/tab_home"
+            app:layout_constraintRight_toLeftOf="@+id/tab_chat"
+            app:layout_constraintTop_toTopOf="@+id/tab_home"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/kebiao" />
+
+        <com.cooleshow.base.widgets.TabAnimationView
+            android:id="@+id/tab_chat"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            app:layout_constraintLeft_toRightOf="@+id/tab_course"
+            app:layout_constraintRight_toLeftOf="@+id/tab_mall"
+            app:layout_constraintTop_toTopOf="@+id/tab_home"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/liaotian" />
+
+        <com.cooleshow.base.widgets.UnreadCountTextView
+            android:id="@+id/tv_msg_count"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:paddingStart="@dimen/dp_4"
+            android:paddingEnd="@dimen/dp_4"
+            android:text=""
+            android:textColor="@color/white"
+            android:textSize="@dimen/sp_12"
+            android:visibility="gone"
+            app:layout_constraintCircle="@+id/tab_chat"
+            app:layout_constraintCircleAngle="45"
+            app:layout_constraintCircleRadius="12dp" />
+
+        <com.cooleshow.base.widgets.TabAnimationView
+            android:id="@+id/tab_mall"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            app:layout_constraintLeft_toRightOf="@+id/tab_chat"
+            app:layout_constraintRight_toLeftOf="@+id/tab_mine"
+            app:layout_constraintTop_toTopOf="@+id/tab_home"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/shangcheng" />
+
+        <com.cooleshow.base.widgets.TabAnimationView
+            android:id="@+id/tab_mine"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_marginEnd="27dp"
+            app:layout_constraintLeft_toRightOf="@+id/tab_mall"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toTopOf="@+id/tab_home"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/wode" />
+
+
+        <TextView
+            android:id="@+id/tv_home"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:paddingTop="4dp"
+            android:text="首页"
+            android:textColor="@color/color_999999"
+            android:textSize="@dimen/sp_10"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toLeftOf="@+id/tab_home"
+            app:layout_constraintRight_toRightOf="@+id/tab_home"
+            app:layout_constraintTop_toBottomOf="@+id/tab_home" />
+
+        <TextView
+            android:id="@+id/tv_course"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:text="课表"
+            android:textColor="@color/color_999999"
+            android:textSize="@dimen/sp_10"
+            app:layout_constraintBottom_toBottomOf="@+id/tv_home"
+            app:layout_constraintLeft_toLeftOf="@+id/tab_course"
+            app:layout_constraintRight_toRightOf="@+id/tab_course"
+            app:layout_constraintTop_toTopOf="@+id/tv_home" />
+
+        <TextView
+            android:id="@+id/tv_chat"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:text="聊天"
+            android:textColor="@color/color_999999"
+            android:textSize="@dimen/sp_10"
+            app:layout_constraintBottom_toBottomOf="@+id/tv_home"
+            app:layout_constraintLeft_toLeftOf="@+id/tab_chat"
+            app:layout_constraintRight_toRightOf="@+id/tab_chat"
+            app:layout_constraintTop_toTopOf="@+id/tv_home" />
+
+        <TextView
+            android:id="@+id/tv_mall"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:text="商城"
+            android:textColor="@color/color_999999"
+            android:textSize="@dimen/sp_10"
+            app:layout_constraintBottom_toBottomOf="@+id/tv_home"
+            app:layout_constraintLeft_toLeftOf="@+id/tab_mall"
+            app:layout_constraintRight_toRightOf="@+id/tab_mall"
+            app:layout_constraintTop_toTopOf="@+id/tv_home" />
+
+        <TextView
+            android:id="@+id/tv_mine"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:text="我的"
+            android:textColor="@color/color_999999"
+            android:textSize="@dimen/sp_10"
+            app:layout_constraintBottom_toBottomOf="@+id/tv_home"
+            app:layout_constraintLeft_toLeftOf="@+id/tab_mine"
+            app:layout_constraintRight_toRightOf="@+id/tab_mine"
+            app:layout_constraintTop_toTopOf="@+id/tv_home" />
+
+        <View
+            android:id="@+id/view_home"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:onClick="onTabClick"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toLeftOf="parent"
+            app:layout_constraintRight_toLeftOf="@+id/view_course"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <View
+            android:id="@+id/view_course"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:onClick="onTabClick"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toRightOf="@+id/view_home"
+            app:layout_constraintRight_toLeftOf="@+id/view_chat"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <View
+            android:id="@+id/view_chat"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:onClick="onTabClick"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toRightOf="@+id/view_course"
+            app:layout_constraintRight_toLeftOf="@+id/view_mall"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <View
+            android:id="@+id/view_mall"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:onClick="onTabClick"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toRightOf="@+id/view_chat"
+            app:layout_constraintRight_toLeftOf="@+id/view_mine"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <View
+            android:id="@+id/view_mine"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:onClick="onTabClick"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toRightOf="@+id/view_mall"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>

teacher/src/main/java/com/cooleshow/teacher/ui/main/MainActivity.java

@@ -3,6 +3,7 @@ package com.cooleshow.teacher.ui.main;
 import android.Manifest;
 import android.content.Context;
 import android.content.Intent;
+import android.graphics.Typeface;
 import android.os.Bundle;
 import android.text.TextUtils;
 import android.view.KeyEvent;
@@ -27,6 +28,7 @@ import com.cooleshow.base.utils.ToastUtil;
 import com.cooleshow.base.utils.helper.MidiFileHelper;
 import com.cooleshow.base.utils.helper.QMUIStatusBarHelper;
 import com.cooleshow.base.utils.helper.UpdateAppHelper;
+import com.cooleshow.base.widgets.TabAnimationView;
 import com.cooleshow.teacher.App;
 import com.cooleshow.teacher.R;
 import com.cooleshow.teacher.adapter.HomePageAdapter;
@@ -150,12 +152,8 @@ public class MainActivity extends BaseMVPActivity<ActivityMainBinding, MainPrese
 
     @Override
     protected void initView() {
-        BottomNavigationMenuView menuView = (BottomNavigationMenuView) viewBinding.navigation.getChildAt(0);
-        BottomNavigationItemView messageTab = (BottomNavigationItemView) menuView.getChildAt(2);
-        View badge = LayoutInflater.from(this).inflate(com.cooleshow.base.R.layout.im_badge, menuView, false);
-        tvMsgCount = badge.findViewById(com.cooleshow.base.R.id.tv_msg_count);
-        messageTab.addView(badge);
-
+        onTabClick(viewBinding.viewHome);
+        tvMsgCount = viewBinding.tvMsgCount;
         HomePageAdapter homePageAdapter = new HomePageAdapter(this);
         mHomeFragment = new HomeFragment();
         CourseTableFragment courseTableFragment = new CourseTableFragment();
@@ -171,18 +169,32 @@ public class MainActivity extends BaseMVPActivity<ActivityMainBinding, MainPrese
         getViewBinding().viewPager.setAdapter(homePageAdapter);
         getViewBinding().viewPager.setOffscreenPageLimit(mFragments.size());
         getViewBinding().viewPager.setUserInputEnabled(false);
-        getViewBinding().navigation.setItemIconTintList(null);
-        getViewBinding().navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
-            @Override
-            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
-
-                return onTabClick(item.getItemId());
-            }
-        });
+//        getViewBinding().navigation.setItemIconTintList(null);
+//        getViewBinding().navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
+//            @Override
+//            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
+//
+//                return onTabClick(item.getItemId());
+//            }
+//        });
     }
 
     public void setPositionItem(int position) {
-        viewBinding.navigation.setSelectedItemId(getViewBinding().navigation.getMenu().getItem(position).getItemId());
+        if (position == 0) {
+            onTabClick(viewBinding.viewHome);
+        }
+        if (position == 1) {
+            onTabClick(viewBinding.viewCourse);
+        }
+        if (position == 2) {
+            onTabClick(viewBinding.viewChat);
+        }
+        if (position == 3) {
+            onTabClick(viewBinding.viewMall);
+        }
+        if (position == 4) {
+            onTabClick(viewBinding.viewMine);
+        }
     }
 
     @Override
@@ -250,12 +262,78 @@ public class MainActivity extends BaseMVPActivity<ActivityMainBinding, MainPrese
         }
     }
 
+    private TabAnimationView lastSelectTab;
+    private TextView lastSelectText;
     /*
-    上一次的tab位置
-     */
+   上一次的tab位置
+    */
     private int lastCurrentItemPosition = 0;
 
-    private boolean onTabClick(int viewId) {
+    public void onTabClick(View view) {
+        int id = view.getId();
+        if (id == R.id.view_home) {
+            if (lastCurrentItemPosition != 0) {
+                presenter.getTeacherUserInfo();
+            }
+            lastCurrentItemPosition = 0;
+            getViewBinding().viewPager.setCurrentItem(0, false);
+            handleTabAnim(viewBinding.tabHome);
+            setTabTextStyle(viewBinding.tvHome);
+            return;
+        }
+        if (id == R.id.view_course) {
+            lastCurrentItemPosition = 1;
+            getViewBinding().viewPager.setCurrentItem(1, false);
+            handleTabAnim(viewBinding.tabCourse);
+            setTabTextStyle(viewBinding.tvCourse);
+            return;
+        }
+        if (id == R.id.view_chat) {
+            lastCurrentItemPosition = 2;
+            getViewBinding().viewPager.setCurrentItem(2, false);
+            handleTabAnim(viewBinding.tabChat);
+            setTabTextStyle(viewBinding.tvChat);
+            return;
+        }
+        if (id == R.id.view_mall) {
+            lastCurrentItemPosition = 3;
+            getViewBinding().viewPager.setCurrentItem(3, false);
+            handleTabAnim(viewBinding.tabMall);
+            setTabTextStyle(viewBinding.tvMall);
+            return;
+        }
+        if (id == R.id.view_mine) {
+            if (lastCurrentItemPosition != 4) {
+                presenter.getTeacherUserInfo();
+            }
+            lastCurrentItemPosition = 4;
+            getViewBinding().viewPager.setCurrentItem(4, false);
+            handleTabAnim(viewBinding.tabMine);
+            setTabTextStyle(viewBinding.tvMine);
+            return;
+        }
+    }
+
+    private void setTabTextStyle(TextView textView) {
+        if (lastSelectText != null) {
+            lastSelectText.setTextColor(getResources().getColor(com.cooleshow.base.R.color.color_999999));
+            lastSelectText.setTypeface(Typeface.DEFAULT);
+        }
+        lastSelectText = textView;
+        lastSelectText.setTextColor(getResources().getColor(com.cooleshow.base.R.color.color_333333));
+        lastSelectText.setTypeface(Typeface.DEFAULT_BOLD);
+    }
+
+    private void handleTabAnim(TabAnimationView view) {
+        if (lastSelectTab != null) {
+            lastSelectTab.toggle();
+        }
+        lastSelectTab = view;
+        lastSelectTab.setChecked(true);
+    }
+
+
+    public boolean onTabClick(int viewId) {
         if (viewId == R.id.menu_home) {
             if (lastCurrentItemPosition != 0) {
                 presenter.getTeacherUserInfo();

teacher/src/main/res/layout/activity_main.xml

@@ -10,7 +10,7 @@
         android:id="@+id/view_pager"
         android:layout_width="match_parent"
         android:layout_height="0dp"
-        app:layout_constraintBottom_toTopOf="@+id/navigation"
+        app:layout_constraintBottom_toTopOf="@+id/cs_bottom"
         app:layout_constraintTop_toTopOf="parent" />
 
     <com.google.android.material.bottomnavigation.BottomNavigationView
@@ -18,6 +18,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:background="@color/white"
+        android:visibility="invisible"
         app:itemBackground="@null"
         app:itemIconSize="24dp"
         app:itemTextAppearanceActive="@style/bottom_tab_title_active"
@@ -26,5 +27,217 @@
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/view_pager"
         app:menu="@menu/bottom_nav_item"
-        tools:ignore="MissingConstraints" />
+        tools:ignore="MissingConstraints"
+        tools:visibility="gone" />
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/cs_bottom"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="@color/white"
+        android:elevation="5dp"
+        android:orientation="vertical"
+        android:paddingBottom="10dp"
+        app:layout_constraintBottom_toBottomOf="parent">
+
+        <com.cooleshow.base.widgets.TabAnimationView
+            android:layout_marginTop="10dp"
+            android:id="@+id/tab_home"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_marginStart="27dp"
+            app:layout_constraintHorizontal_chainStyle="spread_inside"
+            app:layout_constraintLeft_toLeftOf="parent"
+            app:layout_constraintRight_toLeftOf="@+id/tab_course"
+            app:layout_constraintTop_toTopOf="parent"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/shouye" />
+
+        <com.cooleshow.base.widgets.TabAnimationView
+            android:id="@+id/tab_course"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            app:layout_constraintLeft_toRightOf="@+id/tab_home"
+            app:layout_constraintRight_toLeftOf="@+id/tab_chat"
+            app:layout_constraintTop_toTopOf="@+id/tab_home"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/kebiao" />
+
+        <com.cooleshow.base.widgets.TabAnimationView
+            android:id="@+id/tab_chat"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            app:layout_constraintLeft_toRightOf="@+id/tab_course"
+            app:layout_constraintRight_toLeftOf="@+id/tab_mall"
+            app:layout_constraintTop_toTopOf="@+id/tab_home"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/liaotian" />
+
+        <com.cooleshow.base.widgets.UnreadCountTextView
+            app:layout_constraintCircleAngle="45"
+            app:layout_constraintCircleRadius="12dp"
+            app:layout_constraintCircle="@+id/tab_chat"
+            android:includeFontPadding="false"
+            android:id="@+id/tv_msg_count"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:gravity="center"
+            android:paddingStart="@dimen/dp_4"
+            android:paddingEnd="@dimen/dp_4"
+            android:text=""
+            android:textColor="@color/white"
+            android:textSize="@dimen/sp_12"
+            android:visibility="gone"
+            />
+
+        <com.cooleshow.base.widgets.TabAnimationView
+            android:id="@+id/tab_mall"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            app:layout_constraintLeft_toRightOf="@+id/tab_chat"
+            app:layout_constraintRight_toLeftOf="@+id/tab_mine"
+            app:layout_constraintTop_toTopOf="@+id/tab_home"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/shangcheng" />
+
+        <com.cooleshow.base.widgets.TabAnimationView
+            android:id="@+id/tab_mine"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_marginEnd="27dp"
+            app:layout_constraintLeft_toRightOf="@+id/tab_mall"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toTopOf="@+id/tab_home"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/wode" />
+
+
+        <TextView
+            android:id="@+id/tv_home"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:paddingTop="4dp"
+            android:text="首页"
+            android:textColor="@color/color_999999"
+            android:textSize="@dimen/sp_10"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toLeftOf="@+id/tab_home"
+            app:layout_constraintRight_toRightOf="@+id/tab_home"
+            app:layout_constraintTop_toBottomOf="@+id/tab_home" />
+
+        <TextView
+            android:id="@+id/tv_course"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:text="课表"
+            android:textColor="@color/color_999999"
+            android:textSize="@dimen/sp_10"
+            app:layout_constraintBottom_toBottomOf="@+id/tv_home"
+            app:layout_constraintLeft_toLeftOf="@+id/tab_course"
+            app:layout_constraintRight_toRightOf="@+id/tab_course"
+            app:layout_constraintTop_toTopOf="@+id/tv_home" />
+
+        <TextView
+            android:id="@+id/tv_chat"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:text="聊天"
+            android:textColor="@color/color_999999"
+            android:textSize="@dimen/sp_10"
+            app:layout_constraintBottom_toBottomOf="@+id/tv_home"
+            app:layout_constraintLeft_toLeftOf="@+id/tab_chat"
+            app:layout_constraintRight_toRightOf="@+id/tab_chat"
+            app:layout_constraintTop_toTopOf="@+id/tv_home" />
+
+        <TextView
+            android:id="@+id/tv_mall"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:text="商城"
+            android:textColor="@color/color_999999"
+            android:textSize="@dimen/sp_10"
+            app:layout_constraintBottom_toBottomOf="@+id/tv_home"
+            app:layout_constraintLeft_toLeftOf="@+id/tab_mall"
+            app:layout_constraintRight_toRightOf="@+id/tab_mall"
+            app:layout_constraintTop_toTopOf="@+id/tv_home" />
+
+        <TextView
+            android:id="@+id/tv_mine"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:text="我的"
+            android:textColor="@color/color_999999"
+            android:textSize="@dimen/sp_10"
+            app:layout_constraintBottom_toBottomOf="@+id/tv_home"
+            app:layout_constraintLeft_toLeftOf="@+id/tab_mine"
+            app:layout_constraintRight_toRightOf="@+id/tab_mine"
+            app:layout_constraintTop_toTopOf="@+id/tv_home" />
+
+        <View
+            android:onClick="onTabClick"
+            android:id="@+id/view_home"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toLeftOf="parent"
+            app:layout_constraintRight_toLeftOf="@+id/view_course"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <View
+            android:onClick="onTabClick"
+            android:id="@+id/view_course"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toRightOf="@+id/view_home"
+            app:layout_constraintRight_toLeftOf="@+id/view_chat"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <View
+            android:onClick="onTabClick"
+            android:id="@+id/view_chat"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toRightOf="@+id/view_course"
+            app:layout_constraintRight_toLeftOf="@+id/view_mall"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <View
+            android:onClick="onTabClick"
+            android:id="@+id/view_mall"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toRightOf="@+id/view_chat"
+            app:layout_constraintRight_toLeftOf="@+id/view_mine"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <View
+            android:onClick="onTabClick"
+            android:id="@+id/view_mine"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toRightOf="@+id/view_mall"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>