亲宝软件园·资讯

展开

Android水波纹底部导航

写的都是BUG 人气:0

今天给大家带来一个自定义的底部导航,我不会做动图,只能搞一张图片给大家看看,大家见谅

这个就是自定义的tablayout底部搞好的样式了

TabLayout提供了一个水平布局用于展示tabs,继承自HorizontalScrollView。一般与Viewpager结合使用实现页面和标签联动的效果,是时下APP中非常常用的一个控件

首先我们需要创建一个类或者是模块都可以

package com.example.map.tab;
import android.content.Context;
import android.os.Bundle;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.core.content.ContextCompat;
import androidx.fragment.app.FragmentTabHost;
import com.example.map.R;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by long on 2022/5/10.
 * 扩展TabHost
 */
public class XFragmentTabHost extends FragmentTabHost {
    private Context mContext;
    private List<View> mTabViews;
    private List<TabItem> mTabItems;
    // 字体激活颜色
    private int mTextActiveColor;
    private int mTextInactiveColor;
    // 字体激活大小
    private float mTextActiveSize;
    private float mTextInactiveSize;
    // 视图激活对顶部的偏移
    private int mViewActivePaddingTop;
    private int mViewInactivePaddingTop;
    // 波纹模式的前景颜色和后景颜色
    private int mFrontColor;
    private int mBehindColor;
    // TabHost模式
    private TabMode mTabMode;
    public XFragmentTabHost(Context context) {
        super(context);
        _init(context);
    }
    public XFragmentTabHost(Context context, AttributeSet attrs) {
        super(context, attrs);
        _init(context);
    }
    private void _init(Context context) {
        mTabViews = new ArrayList<>();
        mTabItems = new ArrayList<>();
        mContext = context;
        mTextActiveColor = ContextCompat.getColor(mContext, R.color.colorActive);
        mTextInactiveColor = ContextCompat.getColor(mContext, R.color.colorInactive);
        mFrontColor = ContextCompat.getColor(mContext, R.color.colorFront);
        mBehindColor = ContextCompat.getColor(mContext, R.color.colorBehind);
        mTextActiveSize = getResources().getDimension(R.dimen.tab_text_size_active);
        mTextInactiveSize = getResources().getDimension(R.dimen.tab_text_size_inactive);
        mViewActivePaddingTop = (int) getResources().getDimension(R.dimen.tab_padding_top_active);
        mViewInactivePaddingTop = (int) getResources().getDimension(R.dimen.tab_padding_top_inactive);
        mTabMode = TabMode.MoveToTop;
    }
    /**
     * 覆写父类接口,并在这里做些动画特效
     * @param index 当前选中的Tab项
     */
    @Override
    public void setCurrentTab(int index) {
        // 获取之前选中的index
        int lastIndex = getCurrentTab();
        super.setCurrentTab(index);
        // 选中不同的Tab项才做切换处理
        if (lastIndex != index) {
            _switchTab(lastIndex, index);
        }
    }
    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        // 部分机型TabHost带有分割线,同一将分割线设为透明
        getTabWidget().setDividerDrawable(android.R.color.transparent);
    }
    /**
     * 添加TabItem
     * @param item  TabItem
     * @param fragClass fragment类名
     * @param bundle 传给fragment的参数
     */
    public void addTabItem(TabItem item, Class<?> fragClass, Bundle bundle) {
        mTabItems.add(item);
        View view = _getIndicator(item);
        mTabViews.add(view);
        this.addTab(newTabSpec(item.getTitle()).setIndicator(view), fragClass, bundle);
    }
    /**
     * 获取TabItem视图
     * @param item TabItem
     * @return
     */
    private View _getIndicator(TabItem item) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.tab_indicator, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.tab_icon);
        TextView title = (TextView) view.findViewById(R.id.tab_title);
        imageView.setImageResource(item.getImageRes());
        title.setText(item.getTitle());
        title.setTextColor(mTextInactiveColor);
        return view;
    }
    /**
     * 切换Tab
     * @param lastIndex 上一个选中索引
     * @param nextIndex 下一个选中索引
     */
    private void _switchTab(int lastIndex, int nextIndex) {
        for (int i = 0; i < mTabViews.size(); i++) {
            if (i == lastIndex) {
                _switchView(i, false);
            } else if (i == nextIndex) {
                _switchView(i, true);
            }
        }
    }
    /**
     * 切换视图
     * @param index 索引
     * @param isActivated 是否激活
     */
    private void _switchView(int index, boolean isActivated) {
        switch (mTabMode) {
            case MoveToTop:
                _doMoveToTop(index, isActivated);
                break;
            case ClipDrawable:
                _doClipDrawable(index, isActivated);
                break;
            case Ripple:
                _doRipple(index, isActivated);
                break;
        }
    }
    /**
     * 背景展开处理
     * @param index 索引
     * @param isActivated 是否激活
     */
    private void _doClipDrawable(int index, boolean isActivated) {
        View view = mTabViews.get(index);
        View tabView = view.findViewById(R.id.tab_layout);
        if (isActivated) {
            TabAnimHelper.clipDrawable(tabView, mTabItems.get(index).getDrawable(), true);
        } else {
            TabAnimHelper.clipDrawable(tabView, mTabItems.get(index).getDrawable(), false);
        }
    }
    /**
     * 波纹处理
     * @param index 索引
     * @param isActivated 是否激活
     */
    private void _doRipple(int index, boolean isActivated) {
        View view = mTabViews.get(index);
        View tabView = view.findViewById(R.id.tab_layout);
        TextView title = (TextView) view.findViewById(R.id.tab_title);
        if (index == 0) {
            TabAnimHelper.rippleDrawable(tabView, mFrontColor, mBehindColor, RippleDrawable.MODE_LEFT, isActivated);
        } else if (index == (mTabViews.size() - 1)){
            TabAnimHelper.rippleDrawable(tabView, mFrontColor, mBehindColor, RippleDrawable.MODE_RIGHT, isActivated);
        } else {
            TabAnimHelper.rippleDrawable(tabView, mFrontColor, mBehindColor, RippleDrawable.MODE_MIDDLE, isActivated);
        }
        if (isActivated) {
            title.setTextColor(mTextActiveColor);
        } else {
            title.setTextColor(mTextInactiveColor);
        }
    }
    /**
     * 上移动画处理
     * @param index 索引
     * @param isActivated 是否激活
     */
    private void _doMoveToTop(int index, boolean isActivated) {
        View view = mTabViews.get(index);
        TextView title = (TextView) view.findViewById(R.id.tab_title);
        ImageView icon = (ImageView) view.findViewById(R.id.tab_icon);
        if (isActivated) {
            TabAnimHelper.changeTextColor(title, mTextInactiveColor, mTextActiveColor);
            TabAnimHelper.changeTextSize(title, mTextInactiveSize, mTextActiveSize);
            TabAnimHelper.changeTopPadding(view, mViewInactivePaddingTop, mViewActivePaddingTop);
            TabAnimHelper.changeImageSize(icon, 1.0f, 1.1f);
        } else {
            TabAnimHelper.changeTextColor(title, mTextActiveColor, mTextInactiveColor);
            TabAnimHelper.changeTextSize(title, mTextActiveSize, mTextInactiveSize);
            TabAnimHelper.changeTopPadding(view, mViewActivePaddingTop, mViewInactivePaddingTop);
            TabAnimHelper.changeImageSize(icon, 1.1f, 1.0f);
        }
    }
    /**
     * 属性设置
     * @return
     */
    public int getTextActiveColor() {
        return mTextActiveColor;
    }
    public void setTextActiveColor(int textActiveColor) {
        mTextActiveColor = textActiveColor;
    }
    public int getTextInactiveColor() {
        return mTextInactiveColor;
    }
    public void setTextInactiveColor(int textInactiveColor) {
        mTextInactiveColor = textInactiveColor;
    }
    public int getFrontColor() {
        return mFrontColor;
    }
    public void setFrontColor(int frontColor) {
        mFrontColor = frontColor;
    }
    public int getBehindColor() {
        return mBehindColor;
    }
    public void setBehindColor(int behindColor) {
        mBehindColor = behindColor;
    }
    public TabMode getTabMode() {
        return mTabMode;
    }
    public void setTabMode(TabMode tabMode) {
        mTabMode = tabMode;
    }
    /**
     * Tab的模式
     * MoveToTop:向上偏移
     * Ripple:波纹
     * ClipDrawable:逐步展示背景
     */
    public enum TabMode {
        MoveToTop(1),
        Ripple(2),
        ClipDrawable(3);
        private int tabMode;
        TabMode(int tabMode) {
            this.tabMode = tabMode;
        }
        public int getTabMode() {
            return tabMode;
        }
    }
}

然后在res下的value中的color中加入以下颜色

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="black">#000000</color>
    <color name="white">#FFFFFF</color>
    <color name="custcolor">#FBD794</color>
    <color name="translate">#00000000</color>
    <color name="trans">#70000000</color>
    <color name="white_trans">#99ffffff</color>
    <color name="ef">#efefef</color>
    <color name="c4">#333333</color>
    <color name="c9">#999999</color>
    <color name="coloritem">#cccccc</color>
    <color name="black_bg">#66333333</color>
    <color name="c1">#111111</color>
    <color name="c6">#666666</color>
    <color name="c5">#eeeeee</color>
    <color name="c2">#ff6700</color>
    <color name="cfcc">#cccccc</color>
    <color name="app_color_f6">#f6f6f6</color>
    <color name="btn_not_click_color">#a8a8a8</color>
    <color name="btn_click_color">#dc5900</color>
    <color name="c7">#171717</color>
    <color name="c3">#cccccc</color>
    <color name="c33">#333333</color>
    <color name="test_blue">#338BFF</color>
    <color name="red1">#f94244</color>
    <color name="green1">#45cdd5</color>
    <color name="blue">#5e8cef</color>
    <color name="blue1">#4980f6</color>
    <color name="c_c1e4ff">#c1e4ff</color>
    <color name="c_eff4f8">#eff4f8</color>
    <color name="e5">#e5e5e5</color>
    <color name="f6">#f6f6f6</color>
    <color name="red_normal">#FF0000</color>
    <color name="red_pressed">#FF6666</color>
    <color name="blue_bg">#e6fffe</color>
    <color name="blue_text">#00e8df</color>
    <color name="org_bg">#ffefe5</color>
    <color name="green_bg">#e6fff2</color>
    <color name="green_text">#01e48c</color>
    <color name="red_bg">#ffeeee</color>
    <color name="red_text">#ff1901</color>
    <color name="org1">#fff4ea</color>
    <color name="org2">#ffa96e</color>
    <color name="org3">#ff8430</color>
    <color name="org4">#ff9d5c</color>
    <color name="org5">#ff802c</color>
    <color name="org6">#f2c279</color>
    <color name="org7">#fcf1ea</color>
    <color name="org8">#fed2c0</color>
    <color name="org9">#ffece5</color>
    <color name="green2">#68ffc4</color>
    <color name="green">#31c088</color>
    <color name="blue2_trans">#587ed6ff</color>
    <color name="blue2">#7ed6ff</color>
    <color name="blue3">#75fff7</color>
    <color name="blue5">#2d9ef5</color>
    <color name="photopicker_background">#181819</color>
    <color name="color1">#00a6b6</color>
    <color name="c99">#282e35</color>
    <!-- QR_Code -->
    <color name="viewfinder_mask">#60000000</color>
    <color name="result_view">#b0000000</color>
    <color name="possible_result_points">#c0ffff00</color>
    <color name="result_image_border">#ffffffff</color>
    <color name="result_minor_text">#ffc0c0c0</color>
    <color name="result_points">#c000ff00</color>
    <color name="system_bar_color">#fed952</color>
    <color name="red">#eb2127</color>
    <color name="c_red">#ff4200</color>
    <color name="red3">#f03030</color>
    <color name="c_f8">#f8f8f8</color>
    <color name="c_yellow">#daba7f</color>
    <color name="c_85">#858585</color>
    <color name="c_b2">#b2b2b2</color>
    <color name="c_light_purple">#58ffc8d1</color>
    <color name="c_purple">#ff6e6b</color>
    <color name="c_agent_position">#97a8bc</color>
    <color name="c_agent_name">#143660</color>
    <color name="c_44db09">#44db09</color>
    <color name="c_75">#757575</color>
    <color name="c_f5">#f5f5f5</color>
    <color name="c_76">#767676</color>
    <color name="c_d1">#d1d1d1</color>
    <color name="c_d2">#d2d2d2</color>
    <color name="c_d3">#d3d3d3</color>
    <color name="c_yellow3">#ffba16</color>
    <color name="c_mei_red">#f73954</color>
    <color name="yellow">#ffbd0a</color>
    <color name="org">#ff6600</color>
    <color name="org_trans">#fff6f3</color>
    <color name="c_d">#dddddd</color>
    <color name="c_e0">#e0e0e0</color>
    <color name="red7">#f70c38</color>
    <color name="green7">#47b81b</color>
    <color name="deal_bg">#38c595</color>
    <color name="f1">#f1f1f1</color>
    <color name="f5">#f5f5f5</color>
    <color name="c_3c5c8c">#3c5c8c</color>
    <color name="cus_phone_color">#094691</color>
    <color name="cus_follow_record_item_name_color">#002553</color>
    <color name="praise_item_default">#333333</color>
    <color name="praise_item_selector_default">#cccccc</color>
    <color name="default_clickable_color">#cccccc</color>
    <color name="praise_item">#8290AF</color>
    <color name="im_font_color_text_hint">#abb1b6</color>
    <color name="ffd1c0">#ffd1c0</color>
    <color name="fdf0eb">#fdf0eb</color>
    <color name="e4e9ec">#e4e9ec</color>
    <color name="d3">#d3d3d3</color>
    <color name="ffae00">#ffae00</color>
    <color name="e9eef3">#e9eef3</color>
    <color name="ecf0f4">#ECF0F4</color>
    <color name="ac677">#1ac677</color>
    <color name="ecf1f7">#ECF1F7</color>
    <color name="cace6">#3cace6</color>
    <color name="d282">#35d282</color>
    <color name="ff2a00">#ff2a00</color>
    <!-- 其它背景色或分割线相关 -->
    <color name="bg_content">#f3f3f3</color>
    <color name="divider_line">#d9d9d9</color>
    <!-- 字体色 -->
    <color name="text_title">#1b1b1b</color>
    <color name="text_content">#818181</color>
    <color name="text_sub">#919191</color>
    <color name="text_hint">#c7c7c7</color>
    <color name="text_black">#404040</color>
    <color name="main_tab_bg">#fcfcfc</color>
    <color name="black_need">#333333</color>
    <color name="orange_need">#f0420c</color>
    <color name="gray_need">#BEC0C1</color>
    <color name="dialog_content_textcolor">#909090</color>
    <color name="reply_text_color">#666666</color>
    <color name="contents_text">#ff000000</color>
    <color name="encode_view">#ffffffff</color>
    <color name="help_button_view">#ffcccccc</color>
    <color name="help_view">#ff404040</color>
    <color name="result_text">#ffffffff</color>
    <color name="sbc_header_text">#ff808080</color>
    <color name="sbc_header_view">#ffffffff</color>
    <color name="sbc_list_item">#fffff0e0</color>
    <color name="sbc_layout_view">#ffffffff</color>
    <color name="sbc_page_number_text">#ff000000</color>
    <color name="sbc_snippet_text">#ff4b4b4b</color>
    <color name="share_text">#ff000000</color>
    <color name="share_view">#ffffffff</color>
    <color name="status_view">#50000000</color>
    <color name="status_text">#ffffffff</color>
    <color name="transparent">#00000000</color>
    <color name="viewfinder_frame">#ff000000</color>
    <color name="viewfinder_laser">#ffff0000</color>
    <!-- 画TextView横线颜色 -->
    <color name="draw_line_color">#D4D4D4</color>
    <!-- 侧边仿通讯录26字母列表颜色 -->
    <color name="addresslist_textcolor">#A9A9A9</color>
    <color name="car_select_second_child">#999999</color>
    <color name="car_select_second_group_child_bg">#e1e1e1</color>
    <color name="map_poi_list_bg">#d3d3d3</color>
    <!-- 下拉PopupWindow -->
    <color name="pulldown_popupwindow_bg">#5191F2</color>
    <color name="butten_green">#1AAC19</color>
    <color name="check_butten_green">#19ad19</color>
    <color name="title1">#4a4a4a</color>
    <color name="title2">#a2a2a2</color>
    <color name="line">#d1d1d1</color>
    <color name="c_00c679">#00c679</color>
    <color name="F5F6F8">#F5F6F8</color>
    <color name="c65">#656565</color>
    <color name="fff0e5">#FFF0E5</color>
    <color name="f0f1f2">#F0F1F2</color>
    <color name="c7c9d1">#C7C9D1</color>
    <color name="f5f6f8">#f5f6f8</color>
    <color name="fd3341">#fd3341</color>
    <color name="dce1e5">#dce1e5</color>
    <color name="c_9498a4">#9498a4</color>
    <color name="c_202741">#202741</color>
    <color name="c_444861">#444861</color>
    <color name="c_e8">#e8e8e8</color>
    <color name="ff8963">#FF8963</color>
    <color name="c_2a3038">#2a3038</color>
    <color name="c_939">#9398AE</color>
    <color name="c_00a">#00A7FF</color>
    <color name="c_5c6166">#5c6166</color>
    <color name="c_e4e5e6">#e4e5e6</color>
    <color name="c_ffb452">#ffb452</color>
    <color name="c_ff7252">#ff7252</color>
    <color name="c8898A6">#8898A6</color>
    <color name="acb0b9">#ACB0B9</color>
    <color name="caccd0">#CACCD0</color>
    <color name="c_f0f1f3">#f0f1f3</color>
    <color name="eda95b40">#eda95b40</color>
    <color name="c_3257c5">#3257c5</color>
    <color name="c_9d9da3">#9d9da3</color>
    <color name="c_d7d8dc">#d7d8dc</color>
    <color name="c4c6cc">#c4c6cc</color>
    <color name="cdcfd5">#cdcfd5</color>
    <color name="d2d4d9">#d2d4d9</color>
    <color name="c_939499">#939499</color>
    <color name="c_616366">#616366</color>
    <color name="dc">#dcdcdc</color>
    <color name="cc0042ff">#cc0042ff</color>
    <color name="c_97a0ab">#97a0ab</color>
    <color name="ebba8f">#ebba8f</color>
    <color name="a86010">#a86010</color>
    <color name="colorActive">#00BCD4</color>
    <color name="colorInactive">#d2d0d1</color>
    <color name="colorFront">#4db6ac</color>
    <color name="colorBehind">#84ffff</color>
</resources>

然后是我们的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/tab_height"
    android:minWidth="@dimen/tab_min_width"
    android:paddingTop="@dimen/tab_padding_top_inactive"
    android:paddingBottom="@dimen/tab_padding_bottom"
    android:background="?selectableItemBackgroundBorderless">
    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="@dimen/tab_icon"
        android:layout_height="@dimen/tab_icon"
        android:layout_gravity="center_horizontal"/>
    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:lines="1"
        android:text="首页"
        android:textColor="@color/colorInactive"
        android:textSize="@dimen/tab_text_size_inactive"/>
</LinearLayout>

布局中呢会有一些图片这个图片的话就自己搞吧然后在res文件下创建一个dimen

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="tab_elevation">8dp</dimen>
    <dimen name="tab_shadow_height">3dp</dimen>
    <dimen name="tab_shadow_height_without_colored_background">4dp</dimen>
    <dimen name="tab_min_width">104dp</dimen>
    <dimen name="tab_max_width">168dp</dimen>
    <dimen name="tab_height">56dp</dimen>
    <dimen name="tab_line_width">1dp</dimen>
    <dimen name="tab_icon">24dp</dimen>
    <dimen name="tab_padding_top_active">3dp</dimen>
    <dimen name="tab_padding_top_inactive">6dp</dimen>
    <dimen name="tab_padding_top_inactive_without_text">16dp</dimen>
    <dimen name="tab_padding_bottom">3dp</dimen>
    <dimen name="tab_padding_left">12dp</dimen>
    <dimen name="tab_padding_right">12dp</dimen>
    <dimen name="tab_text_size_active">14sp</dimen>
    <dimen name="tab_text_size_inactive">12sp</dimen>
</resources>

我们的底部导航的样式就搞完了,接下里就是我们的动画效果写一个自定义Drawable

package com.example.map.tab;
import android.animation.ValueAnimator;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.Animatable;
import android.graphics.drawable.Drawable;
/**
 * Created by long on 2022/5/10.
 * 波纹Drawable
 */
public class RippleDrawable extends Drawable implements Animatable {
    /**
     * 3种模式:左边、中间和右边波纹
     */
    public static final int MODE_LEFT = 1;
    public static final int MODE_MIDDLE = 2;
    public static final int MODE_RIGHT = 3;
    private int mMode = MODE_MIDDLE;
    // 前景色和后景色画笔
    private Paint mPaintFront;
    private Paint mPaintBehind;
    // 用来绘制扇形的矩形框
    private RectF mRect;
    // 目标View的宽高的一半
    private int mHalfWidth;
    private int mHalfHeight;
    // 扩散半径
    private int mRadius;
    // 前景色和背景色的分割距离
    private int mDivideSpace;
    // 扩散满视图需要的距离,中点到斜角的距离
    private int mFullSpace;
    // 动画控制
    private ValueAnimator mValueAnimator;
    public RippleDrawable(int frontColor, int behindColor, int mode) {
        mPaintFront = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintFront.setColor(frontColor);
        mPaintBehind = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintBehind.setColor(behindColor);
        mRect = new RectF();
        mMode = mode;
    }
    @Override
    public void draw(Canvas canvas) {
        if (mRadius > mHalfWidth) {
            int count = canvas.save();
            canvas.drawCircle(mHalfWidth, mHalfHeight, mHalfWidth, mPaintBehind);
            canvas.restoreToCount(count);
            count = canvas.save();
            canvas.drawCircle(mHalfWidth, mHalfHeight, mDivideSpace, mPaintFront);
            canvas.restoreToCount(count);
        } else if (mRadius > mDivideSpace) {
            int count = canvas.save();
            canvas.drawCircle(mHalfWidth, mHalfHeight, mRadius, mPaintBehind);
            canvas.restoreToCount(count);
            count = canvas.save();
            canvas.drawCircle(mHalfWidth, mHalfHeight, mDivideSpace, mPaintFront);
            canvas.restoreToCount(count);
        } else {
            canvas.drawCircle(mHalfWidth, mHalfHeight, mRadius, mPaintFront);
        }
        // 左右两边才进行扇形绘制
        if (mMode != MODE_MIDDLE) {
            mRect.left = mHalfWidth - mRadius;
            mRect.right = mHalfWidth + mRadius;
            mRect.top = mHalfHeight - mRadius;
            mRect.bottom = mHalfHeight + mRadius;
        }
        if (mMode == MODE_LEFT) {
            canvas.drawArc(mRect, 90, 180, true, mPaintFront);
        } else if (mMode == MODE_RIGHT) {
            canvas.drawArc(mRect, -90, 180, true, mPaintFront);
        }
    }
    @Override
    public void setAlpha(int alpha) {
    }
    @Override
    public void setColorFilter(ColorFilter colorFilter) {
    }
    @Override
    public int getOpacity() {
        return PixelFormat.RGBA_8888;
    }
    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        mHalfHeight = (bounds.bottom - bounds.top) / 2;
        mHalfWidth = (bounds.right - bounds.left) / 2;
        mDivideSpace = Math.max(mHalfHeight, mHalfWidth) * 3 / 4;
        mFullSpace = (int) Math.sqrt(mHalfWidth * mHalfWidth + mHalfHeight * mHalfHeight);
        // 属性动画
        mValueAnimator = ValueAnimator.ofInt(0, mFullSpace);
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mRadius = (int) animation.getAnimatedValue();
                invalidateSelf();
            }
        });
        mValueAnimator.setDuration(200);
        start();
    }
    @Override
    public void start() {
        mValueAnimator.start();
    }
    @Override
    public void stop() {
        mValueAnimator.end();
    }
    @Override
    public boolean isRunning() {
        return mValueAnimator != null && mValueAnimator.isRunning();
    }
}

然后创建我们的TabFragment

package com.example.map.tab;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import com.example.map.R;
/**
 * Created by long on 2022/5/10.
 */
public class TabFragment extends Fragment {
    public static final String FRAG_KEY = "FragKey";
    private TextView mFragTabText;
    private void assignViews(View view) {
        mFragTabText = (TextView) view.findViewById(R.id.frag_tab_text);
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_tab, null);
        assignViews(view);
        return view;
    }
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (getArguments() != null) {
            String title = getArguments().getString(FRAG_KEY);
            mFragTabText.setText(title);
        }
    }
}

然后创建一个动画的帮助类

package com.example.map.tab;
import android.animation.AnimatorSet;
import android.animation.ArgbEvaluator;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.graphics.drawable.ClipDrawable;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
/**
 * Created by long on 2022/5/10.
 * Tab动画帮助类
 */
public class TabAnimHelper {
    /**
     * 改变Tab的顶部偏移
     * @param view
     * @param fromPadding
     * @param toPadding
     */
    public static void changeTopPadding(final View view, int fromPadding, int toPadding) {
        ValueAnimator animator = ValueAnimator.ofFloat(fromPadding, toPadding);
        animator.setDuration(150);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float animatedValue = (float) valueAnimator.getAnimatedValue();
                view.setPadding(view.getPaddingLeft(),
                        (int) animatedValue,
                        view.getPaddingRight(),
                        view.getPaddingBottom());
            }
        });
        animator.start();
    }
    /**
     * 改变字体大小
     * @param textView
     * @param from
     * @param to
     */
    public static void changeTextSize(final TextView textView, float from, float to) {
        ValueAnimator textSizeChangeAnimator = ValueAnimator.ofFloat(from, to);
        textSizeChangeAnimator.setDuration(150);
        textSizeChangeAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, (float) valueAnimator.getAnimatedValue());
            }
        });
        textSizeChangeAnimator.start();
    }
    /**
     * 改变字体颜色
     * @param textView
     * @param fromColor
     * @param toColor
     */
    public static void changeTextColor(final TextView textView, int fromColor, int toColor) {
        ValueAnimator changeTextColorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), fromColor, toColor);
        changeTextColorAnimation.setDuration(150);
        changeTextColorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animator) {
                textView.setTextColor((Integer) animator.getAnimatedValue());
            }
        });
        changeTextColorAnimation.start();
    }
    /**
     * 改变视图大小
     * @param image
     * @param fromScale
     * @param toScale
     */
    public static void changeImageSize(ImageView image, float fromScale, float toScale) {
        ObjectAnimator scaleX;
        ObjectAnimator scaleY;
        scaleX = ObjectAnimator.ofFloat(image, "scaleX", fromScale, toScale);
        scaleY = ObjectAnimator.ofFloat(image, "scaleY", fromScale, toScale);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(150);
        set.playTogether(scaleX, scaleY);
        set.start();
    }
    /**
     * 从中心展开Drawable
     * @param image
     * @param drawable
     * @param isActivated
     */
    @SuppressWarnings("deprecation")
    public static void clipDrawable(final View image, Drawable drawable, boolean isActivated) {
        if (drawable == null) {
            return;
        }
        if (isActivated) {
            final ClipDrawable scaleDrawable = new ClipDrawable(drawable, Gravity.CENTER,
                    ClipDrawable.HORIZONTAL | ClipDrawable.VERTICAL);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                image.setBackground(scaleDrawable);
            } else {
                image.setBackgroundDrawable(scaleDrawable);
            }
            image.setBackgroundDrawable(scaleDrawable);
            ValueAnimator animator = ValueAnimator.ofInt(0, 10000);
            animator.setDuration(200);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    scaleDrawable.setLevel((Integer) animation.getAnimatedValue());
                }
            });
            animator.start();
        } else {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                image.setBackground(null);
            } else {
                image.setBackgroundDrawable(null);
            }
        }
    }
    /**
     * 波纹动画
     * @param view
     * @param frontColor
     * @param behindColor
     * @param mode
     * @param isActivated
     */
    @SuppressWarnings("deprecation")
    public static void rippleDrawable(final View view, int frontColor, int behindColor, int mode, boolean isActivated) {
        if (isActivated) {
            RippleDrawable rippleDrawable = new RippleDrawable(frontColor, behindColor, mode);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                view.setBackground(rippleDrawable);
            } else {
                view.setBackgroundDrawable(rippleDrawable);
            }
        } else {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                view.setBackground(null);
            } else {
                view.setBackgroundDrawable(null);
            }
        }
    }
}

还有一个item的实体类

package com.example.map.tab;
import android.graphics.drawable.Drawable;
/**
 * Created by long on 2022/5/10.
 * Tab项
 */
public class TabItem {
    private String title;
    private Drawable drawable;
    private int imageRes;
    public TabItem(String title, Drawable drawable, int imageRes) {
        this.title = title;
        this.drawable = drawable;
        this.imageRes = imageRes;
    }
    public TabItem(String title, int imageRes) {
        this.title = title;
        this.drawable = null;
        this.imageRes = imageRes;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public Drawable getDrawable() {
        return drawable;
    }
    public void setDrawable(Drawable drawable) {
        this.drawable = drawable;
    }
    public int getImageRes() {
        return imageRes;
    }
    public void setImageRes(int imageRes) {
        this.imageRes = imageRes;
    }
}

然后在我们的Activity中进行一个引用,首先在是我们Activity的一个布局

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <FrameLayout
        android:id="@+id/relate_tab_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@drawable/shadow" />
    <com.example.map.tab.XFragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp" />
    </com.example.map.tab.XFragmentTabHost>
</LinearLayout>

然后在我们的Activity中进行一个应用控件

package com.example.map.ui.activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.bumptech.glide.Glide;
import com.bumptech.glide.RequestBuilder;
import com.bumptech.glide.load.resource.bitmap.RoundedCorners;
import com.bumptech.glide.request.RequestOptions;
import com.example.map.api.ApiService;
import com.example.map.base.GlideImageLoader;
import com.example.map.bean.WallPaperResponse;
import com.example.map.ui.fragment.Fragment1;
import com.example.map.ui.fragment.Fragment2;
import com.example.map.ui.fragment.Fragment3;
import com.example.map.ui.fragment.Fragment4;
import com.example.map.ui.fragment.Fragment5;
import com.example.map.R;
import com.example.map.tab.TabFragment;
import com.example.map.tab.TabItem;
import com.example.map.tab.XFragmentTabHost;
import com.llw.network.NetworkApi;
import com.llw.network.observer.BaseObserver;
import com.llw.network.utils.KLog;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class QihooActivity extends AppCompatActivity {
    private XFragmentTabHost mTabHost;
    //底部导航的名称
    String[] mTabTitle = new String[]{"首页", "游戏", "软件", "应用圈", "管理"};
    //文字上的图片
    int[] mImageResId = new int[]{R.drawable.sel_360_home, R.drawable.sel_360_game, R.drawable.sel_360_software,
            R.drawable.sel_360_app, R.drawable.sel_360_mag};
    //创建的几个fragment
    Class[] mFragClass = new Class[]{Fragment1.class, Fragment2.class,
            Fragment3.class, Fragment4.class, Fragment5.class};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_qihoo);
        initTabHost();
    }
    private void initTabHost() {
        mTabHost = (XFragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.relate_tab_content);
        mTabHost.setTabMode(XFragmentTabHost.TabMode.Ripple);
        mTabHost.setTextActiveColor(Color.WHITE);
        mTabHost.setTextInactiveColor(Color.GRAY);
//        mTabHost.setFrontColor(Color.RED);
//        mTabHost.setBehindColor(Color.GREEN);
        for (int i = 0; i < mFragClass.length; i++) {
            Bundle bundle = new Bundle();
            bundle.putString(TabFragment.FRAG_KEY, mTabTitle[i]);
            mTabHost.addTabItem(new TabItem(mTabTitle[i], mImageResId[i]),
                    mFragClass[i], bundle);
        }
    }
}

这样我们的一个自定义的水波纹动画的底部导航就完成了

加载全部内容

相关教程
猜你喜欢
用户评论