Android仿微信底部選項卡

第一步 添加依賴

    dependencies {
        compile 'com.yinglan.alphatabs:library:1.0.5'
    }

第二步 布局使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".hometype.FragmentViewPagerActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <TextView
        android:id="@+id/tv_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@+id/rl_bottom"
        android:background="@color/light_gray"
        />

    <RelativeLayout
        android:id="@+id/rl_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#fff"
        android:paddingBottom="2dp"
        android:paddingTop="4dp">
        <com.yinglan.alphatabs.AlphaTabsIndicator
            android:id="@+id/alphaIndicator"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:orientation="horizontal">

            <com.yinglan.alphatabs.AlphaTabView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:padding="5dp"
                android:id="@+id/alphaTabView"
                app:tabIconNormal="@drawable/student_icon"
                app:tabIconSelected="@drawable/student_icon_show"
                app:tabText="頁面一"
                app:tabTextSize="14sp"
                app:textColorNormal="@color/gray"
                app:textColorSelected="@color/base_color"
                app:badgeBackgroundColor="@color/color_primary_red"/>
            <com.yinglan.alphatabs.AlphaTabView

                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:padding="5dp"

                app:tabIconNormal="@drawable/home_drive"
                app:tabIconSelected="@drawable/home_drive_light"
                app:tabText="頁面二"
                app:tabTextSize="14sp"
                app:textColorNormal="@color/gray"
                app:textColorSelected="@color/base_color"
       />

            <com.yinglan.alphatabs.AlphaTabView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:padding="5dp"
                app:tabIconNormal="@drawable/order_iocn"
                app:tabIconSelected="@drawable/order_iocn_show"
                app:tabText="頁面三"
                app:tabTextSize="14sp"
                app:textColorNormal="@color/gray"
                app:textColorSelected="@color/base_color"
       />
        </com.yinglan.alphatabs.AlphaTabsIndicator>
    </RelativeLayout>
</RelativeLayout>

說明

配置參數	參數含義
tabIconNormal	未選中的圖標
tabIconSelected	已經選中的圖標
tabText	tab標簽的文字
tabTextSize	tab標簽的文字大小
textColorNormal	未選中的文字顏色
textColorSelected	已選中的文字顏色
badgeBackgroundColor	角標背景色,默認紅色

第三步 代碼編寫：

import android.support.v4.view.ViewPager;
import android.view.View;

import com.loaderman.samplecollect.R;
import com.loaderman.samplecollect.activity.BaseActivity;
import com.loaderman.samplecollect.adapter.MyPagerAdapter;
import com.loaderman.samplecollect.constants.FragmentNameTagConstants;
import com.yinglan.alphatabs.AlphaTabView;
import com.yinglan.alphatabs.AlphaTabsIndicator;
import com.yinglan.alphatabs.OnTabChangedListner;

public class FragmentViewPagerActivity extends BaseActivity implements View.OnClickListener {

    private ViewPager vpHome;
    private AlphaTabView mAlphaTabView;


    @Override
    public int getLayout() {
        return R.layout.activity_fragment_view_pager2;
    }

    @Override
    public void initView() {
        ivLeft.setVisibility(View.GONE);
        vpHome = (ViewPager) findViewById(R.id.vp_home);
        AlphaTabsIndicator mAlphaTabsIndicator = findViewById(R.id.alphaIndicator);
        mAlphaTabView = findViewById(R.id.alphaTabView);
        vpHome.setOffscreenPageLimit(5);
        MyPagerAdapter homeAdapter = new MyPagerAdapter(getSupportFragmentManager());
        vpHome.setAdapter(homeAdapter);
        mAlphaTabsIndicator.setViewPager(vpHome);
//        mAlphaTabView.showNumber(55); //顯示數字角標
        mAlphaTabView.showPoint();       //顯示小紅點
//        mAlphaTabView.removeShow();      //移除當前角標
        mAlphaTabsIndicator.setOnTabChangedListner(new OnTabChangedListner() {
            @Override
            public void onTabSelected(int tabNum) {
                updateTitleBar(tabNum);
            }
        });   //設置底部tab點擊監聽
        mAlphaTabsIndicator.setTabCurrenItem(0);                        //設置tab選項
        updateTitleBar(FragmentNameTagConstants.HOME_0_TAG);
//        mAlphaTabsIndicator.removeAllBadge();                                      //移除所有tab的角標
    }

    private void updateTitleBar(int position) {
        switch (position) {
            case FragmentNameTagConstants.HOME_0_TAG:
                tvCenter.setText(getResources().getString(R.string.home_0));
                mAlphaTabView.showNumber(555); //顯示數字角標
                break;
            case FragmentNameTagConstants.HOME_1_TAG:
                tvCenter.setText(getResources().getString(R.string.home_1));

                break;
            case FragmentNameTagConstants.HOME_2_TAG:
                tvCenter.setText(getResources().getString(R.string.home_2));
                break;
        }
    }

    @Override
    public void initData() {

    }

    @Override
    public void initListener() {

        vpHome.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

                updateTitleBar(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    @Override
    public void initNetConnectionOkData() {

    }

    @Override
    public void initNetConnectionErrData() {

    }

    @Override
    public void onClick(View view) {
        int position = (Integer) view.getTag();
        // 點擊底部某一項的時候將ViewPager切換到那個界面
        vpHome.setCurrentItem(position, false);
        updateTitleBar(position);
    }
}

效果圖