Android 影片底部導航欄

最終效果：

需求描述：

如上圖，底部是數量不固定的選項卡，排列方式是剩余空間均分，點擊切換tab時，被選中的tab會跟隨影片，且展示對應tab的內容

需求拆分：

1. 關于影片，實作方式可以是加載gif檔案；也可以采用lottie加載json檔案，lottie的優勢在于像素加載夠清晰，如果lottie遇到加載問題，建議升級lottie庫到最新版本，

2. 關于均勻分布，可以采用ConstraintLayout的chainStyle屬性為spread實作；也可以使用LinearLayout在每個選項卡之間加入空的space控制元件，weight都是1，平分剩余空間，

3. 關于tab切換，實作方式有很多種，本文采用自定義view，定制化比較好，其他也可以采用Materail Design的BottomNavigationView或是TabLayout，但是定制需求比較受限，比如一些影片效果及字體樣式等等

4.關于tab上方內容的顯示，通常是通過切換不同的fragment實作tab切換加載不同的內容

需求實作：

引入需要的庫：

implementation 'com.airbnb.android:lottie:3.4.0'
implementation 'com.github.bumptech.glide:glide:3.8.0'

1. 自定義tabItem項

在自定義View之前，先對加載View所需的資料結構進行定義，展示需要的元素有表明一個選項卡的唯一標識，動圖資源，靜圖資源及tab名稱，可以定義一個介面去實作它

public interface TabItem {

    String getName();

    @DrawableRes
    int getStaticRes();

    @DrawableRes
    int getAnimateRes();

    String getTabType();
}

自定義View的實作：

public class TabItemView extends FrameLayout {
    private Context mContext;
    private TextView mTabNameView;
    private LottieAnimationView mTabLottieView;
    private String mTabName;
    private int mTabStaticRes;
    private int mTabAnimateRes;
    private boolean isSelected;
    private int mSelectedTextColor;
    private int mUnSelectedTextColor;
    private int mTextSize;
    private int mIconSize;

    public TabItemView(@NonNull Context context) {
        this(context, null);
    }

    public TabItemView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TabItemView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public TabItemView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        mContext = context;
        TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.TabItemView);
        mTextSize = a.getDimensionPixelSize(R.styleable.TabItemView_textSize, 10);
        mIconSize = a.getDimensionPixelSize(R.styleable.TabItemView_iconSize, 40);
        mSelectedTextColor = a.getColor(R.styleable.TabItemView_selectedTextColor, getResources().getColor(R.color.tab_selected));
        mUnSelectedTextColor = a.getColor(R.styleable.TabItemView_unSelectedTextColor, getResources().getColor(R.color.tab_unselected));
        mTabStaticRes = a.getResourceId(R.styleable.TabItemView_mTabStaticRes, 0);
        mTabAnimateRes = a.getResourceId(R.styleable.TabItemView_mTabAnimateRes, 0);
        mTabName = a.getString(R.styleable.TabItemView_tabName);
        a.recycle();
        init();
    }

    private void init() {
        View view = LayoutInflater.from(mContext).inflate(R.layout.bottom_tab_view_item, this, false);
        mTabNameView = view.findViewById(R.id.tab_name);
        mTabLottieView = view.findViewById(R.id.tab_animation_view);
        addView(view);
    }

    private void setSelectedUI() {
        if (mTabAnimateRes == 0) {
            throw new NullPointerException("animation resource must be not empty");
        } else {
            mTabNameView.setTextColor(mSelectedTextColor);
            mTabLottieView.setAnimation(mTabAnimateRes);
            mTabLottieView.playAnimation();
        }
    }

    private void setUnselectedUI() {
        mTabNameView.setTextColor(mUnSelectedTextColor);
        mTabLottieView.clearAnimation();
        // 沒有找到靜態圖，就選擇加載gif圖的第一幀，這里可以選擇mipmap下的靜圖
        Glide.with(mContext).load(mTabStaticRes).asBitmap().into(mTabLottieView);
    }

    public void updateUI() {
        if (isSelected) {
            setSelectedUI();
        } else {
            setUnselectedUI();
        }
    }

    public TabItemView setIconSize(int iconSize) {
        if (iconSize > 0) {
            mIconSize = iconSize;
            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLottieView.getLayoutParams();
            lp.width = mIconSize;
            lp.height = mIconSize;
            mTabLottieView.setLayoutParams(lp);
        }
        return this;
    }

    public TabItemView setStaticIcon(int staticRes) {
        mTabStaticRes = staticRes;
        return this;
    }

    public TabItemView setAnimateIcon(int animateRes) {
        mTabAnimateRes = animateRes;
        return this;
    }

    public TabItemView setTabName(String tabName) {
        mTabName = tabName;
        mTabNameView.setText(mTabName);
        return this;
    }

    public TabItemView setTextColor(int selectColor, int unSelectColor) {
        this.mSelectedTextColor = selectColor;
        this.mUnSelectedTextColor = unSelectColor;
        return this;
    }

    public TabItemView setTabSelected(boolean isSelected) {
        this.isSelected = isSelected;
        updateUI();
        return this;
    }

    public TabItemView setTabTextSize(int textSize) {
        this.mTextSize = textSize;
        mTabNameView.setTextSize(mTextSize);
        return this;
    }
}

2. 對item項的加載進行封裝

public class BottomTabNavigation extends LinearLayout implements View.OnClickListener {
    public static final String TAB_NONE = "none";
    public static final String TAB_HOME = "home";
    public static final String TAB_CLOUD = "cloud";
    public static final String TAB_EXCHANGE = "exchange";
    public static final String TAB_USER_CENTER = "user_center";
    private Context mContext;
    private List<TabItem> tabList = new ArrayList<>();
    private TabSelectedListener tabSelectedListener;
    private String selectedTabType = TAB_NONE;

    @StringDef({TAB_HOME, TAB_CLOUD, TAB_EXCHANGE, TAB_USER_CENTER, TAB_NONE})
    @Retention(RetentionPolicy.SOURCE)
    public @interface BottomTabType {
    }

    public BottomTabNavigation(@NonNull Context context) {
        this(context, null);
    }

    public BottomTabNavigation(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BottomTabNavigation(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public BottomTabNavigation(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        mContext = context;
        setOrientation(LinearLayout.HORIZONTAL);
    }

    public void setTabItems(List<TabItem> tabList) {
        removeAllViews();
        this.tabList = tabList;
        if (null == tabList || tabList.size() == 0)
            return;
        addView(getSpaceView());
        for (int i = 0; i < tabList.size(); i++) {
            TabItem tab = tabList.get(i);
            TabItemView tabItemView = new TabItemView(mContext)
                    .setTabName(tab.getName())
                    .setStaticIcon(tab.getStaticRes())
                    .setAnimateIcon(tab.getAnimateRes());
            tabItemView.setOnClickListener(this);
            tabItemView.setTag(tab.getTabType());
            addView(tabItemView);
            addView(getSpaceView());
        }

        if (selectedTabType.equals(TAB_NONE)) {
            getChildAt(1).performClick();
        }
    }

    private Space getSpaceView() {
        Space space = new Space(mContext);
        space.setLayoutParams(new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1));
        return space;
    }

    @Override
    public void onClick(View v) {
        if (null == v.getTag())
            return;
        String tabType = (String) v.getTag();
        if (tabType.equals(selectedTabType))
            return;
        if (null != tabSelectedListener) {
            this.selectedTabType = tabType;
            for (int i = 0; i < tabList.size(); i++) {
                TabItem tab = tabList.get(i);
                if (tabType.equals(tab.getTabType())) {
                    TabItemView tabView = (TabItemView) v;
                    tabView.setTabSelected(true);
                    tabSelectedListener.tabSelected(tabView);
                } else {
                    TabItemView tabView = (TabItemView) getChildAt(i * 2 + 1);
                    tabSelectedListener.tabUnselected(tabView);
                    tabView.setTabSelected(false);
                }
            }
        }
    }

    public void addOnTabSelectedListener(TabSelectedListener selectedListener){
        this.tabSelectedListener = selectedListener;
    }

    public interface TabSelectedListener {
        void tabSelected(TabItemView itemView);

        void tabUnselected(TabItemView itemView);
    }
}

3. 使用

public class MainActivity extends AppCompatActivity {
    private HomeFragment homeFragment;
    private UserCenterFragment userCenterFragment;
    private ExchangeFragment exchangeFragment;
    private CloudFragment cloudFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFragment();
        BottomTabNavigation navigation = findViewById(R.id.bottom_navigation);
        navigation.addOnTabSelectedListener(new BottomTabNavigation.TabSelectedListener() {
            @Override
            public void tabSelected(TabItemView itemView) {
                displayFragment((String) itemView.getTag());
            }

            @Override
            public void tabUnselected(TabItemView itemView) {

            }
        });
        navigation.setTabItems(getTabList());
    }

    private void initFragment() {
        homeFragment = new HomeFragment();
        cloudFragment = new CloudFragment();
        exchangeFragment = new ExchangeFragment();
        userCenterFragment = new UserCenterFragment();
        FragmentManager manager = getSupportFragmentManager();
        manager.beginTransaction()
                .add(R.id.fl_container, homeFragment)
                .add(R.id.fl_container, exchangeFragment)
                .add(R.id.fl_container, cloudFragment)
                .add(R.id.fl_container, userCenterFragment)
                .commitAllowingStateLoss();
    }

    private List<TabItem> getTabList() {
        List<TabItem> tabs = new ArrayList<>();
        tabs.add(new BottomTab("首頁", BottomTabNavigation.TAB_HOME));
        tabs.add(new BottomTab("云存盤", BottomTabNavigation.TAB_CLOUD));
        tabs.add(new BottomTab("交易", BottomTabNavigation.TAB_EXCHANGE));
        tabs.add(new BottomTab("我的", BottomTabNavigation.TAB_USER_CENTER));
        return tabs;
    }

    private void displayFragment(String selectTabType) {
        switch (selectTabType) {
            case BottomTabNavigation.TAB_HOME:
            default:
                getSupportFragmentManager().beginTransaction()
                        .show(homeFragment)
                        .hide(exchangeFragment)
                        .hide(cloudFragment)
                        .hide(userCenterFragment)
                        .commitAllowingStateLoss();
                break;
            case BottomTabNavigation.TAB_CLOUD:
                getSupportFragmentManager().beginTransaction()
                        .show(cloudFragment)
                        .hide(exchangeFragment)
                        .hide(homeFragment)
                        .hide(userCenterFragment)
                        .commitAllowingStateLoss();
                break;
            case BottomTabNavigation.TAB_EXCHANGE:
                getSupportFragmentManager().beginTransaction()
                        .show(exchangeFragment)
                        .hide(homeFragment)
                        .hide(cloudFragment)
                        .hide(userCenterFragment)
                        .commitAllowingStateLoss();
                break;
            case BottomTabNavigation.TAB_USER_CENTER:
                getSupportFragmentManager().beginTransaction()
                        .show(userCenterFragment)
                        .hide(exchangeFragment)
                        .hide(cloudFragment)
                        .hide(homeFragment)
                        .commitAllowingStateLoss();
                break;
        }
    }
}

其他問題：

1. 本文是基于參考https://blog.csdn.net/yiranhaiziqi/article/details/88965548文章實作的效果，對此表示感謝

2. 關于本文所用的影片資源來自于lottie提供的影片資源，具體地址是https://lottiefiles.com/user/475858，也可自行下載其他資源，可以下載gif，也可以下載json檔案，感謝影片作者提供的資源;

3. 非選中狀態時的靜態圖未找到對應的，demo采用只加載gif圖第一幀的方式實作

4. 遇到lottie影片造成的崩潰【java.lang.IllegalStateException: Missing values for keyframe】

請將lottie影片庫升級到3.0以上，具體參見https://www.freesion.com/article/1000623784/

github地址：

https://github.com/Jane205/BottomNavigation