Android TabLayout 는 아래쪽 Tab 의 예제 코드 를 구현 합 니 다.

머리말
아래쪽 Tab 는 이미 응용 프로그램의 표지 입 니 다.핸드폰 화면 크기 의 제한 으로 인해 우 리 는 보 이 는 공간 을 최대한 이용 해 야 합 니 다.물론 하단 탭 은 보통 3 개 정도 로 많 게 는 5 개 를 넘 지 않 는 다.
효과 도
다음은 제 가 TabLayout 를 사용 하여 이 루 는 아래쪽 Tab 입 니 다.

실현 방식 도 간단 하 다.왜냐하면 이곳 에는 작은 슬라이더 가 없 기 때문이다.Tab 의 미끄럼 과 클릭 만 처리 하면 됩 니 다.
코드:

public class CustomBotTabItem {

  private TabLayout mTabLayout;
  private ViewPager mViewPager;
  private Context mContext;
  //  Tab  
  private final String[] mTitles = {"  ", "  ", "  ", "  ", "  "};
  //  CustomBotTabItem  
  public static CustomBotTabItem create() {
    return TabItemHolder.sCustomTabItem;
  }
  //  CustomBotTabItem  
  private static class TabItemHolder {
    private static CustomBotTabItem sCustomTabItem = new CustomBotTabItem();
  }
  //       Context
  public CustomBotTabItem setContext(Context context) {
    mContext = context;
    return this;
  }
  //      TabLayout
  public CustomBotTabItem setTabLayout(TabLayout tabLayout) {
    mTabLayout = tabLayout;
    return this;
  }
  //   TabLayout   ViewPager
  public CustomBotTabItem setViewPager(ViewPager viewPager) {
    mViewPager = viewPager;
    return this;
  }
  //  Tab
  public CustomBotTabItem build() {
    initTabLayout();
    return this;
  }
  //   Tab
  private void initTabLayout() {
    mTabLayout.setupWithViewPager(mViewPager);
    //      selector，  
    mTabLayout.getTabAt(0).setCustomView(getTabView(0, R.drawable.home_icon_selector));
    mTabLayout.getTabAt(1).setCustomView(getTabView(1, R.drawable.manage_icon_selector));
    mTabLayout.getTabAt(2).setCustomView(getTabView(2, R.drawable.add_icon_selector));
    mTabLayout.getTabAt(3).setCustomView(getTabView(3, R.drawable.find_icon_selector));
    mTabLayout.getTabAt(4).setCustomView(getTabView(4, R.drawable.money_icon_selector));
    tabSelectListener();
  }
   //   Tab  
  private View getTabView(final int position, int resId) {
    final View view = LayoutInflater.from(mContext).inflate(R.layout.bottom_tab_item, null);
    TextView tvTitle = (TextView) view.findViewById(R.id.id_tv_title);
    final ImageView ivTitle = (ImageView) view.findViewById(R.id.id_iv_title);
    ivTitle.setImageResource(resId);
    tvTitle.setText(mTitles[position]);
    //     tab  ，        
    if (position == 0) {
      tvTitle.setTextColor(Color.parseColor("#4192e3"));
    } else {
      tvTitle.setTextColor(Color.parseColor("#262a3b"));
    }
    //  Tab  
    view.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        mViewPager.setCurrentItem(position);
      }
    });
    return view;
  }
  //Tab  
  private void tabSelectListener() {
    mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
      @Override
      public void onTabSelected(TabLayout.Tab tab) {
        changeTabStatus(tab, true);
      }

      @Override
      public void onTabUnselected(TabLayout.Tab tab) {
        changeTabStatus(tab, false);
      }

      @Override
      public void onTabReselected(TabLayout.Tab tab) {

      }
    });
  }
  //  Tab          
  private void changeTabStatus(TabLayout.Tab tab, boolean selected) {
    View view = tab.getCustomView();
    if (view == null) {
      return;
    }
    TextView tvTitle = (TextView) view.findViewById(R.id.id_tv_title);
    if (selected) {
      tvTitle.setTextColor(Color.parseColor("#4192e3"));
    } else {
      tvTitle.setTextColor(Color.parseColor("#262a3b"));
    }
  }
}

Activity 코드:

public class BottomTabLayoutActivity extends AppCompatActivity {
  private TabLayout mTabLayout;
  private ViewPager mViewPager;
  private List<Fragment> mFragmentList;

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_bot_tab_layout);
    findView();
    initFragmentList();
    setVpAdapter();
    CustomBotTabItem item = CustomBotTabItem.create();
    item.setContext(this)
        .setViewPager(mViewPager)
        .setTabLayout(mTabLayout)
        .build();
  }
  //findViewById
  private void findView() {
    mTabLayout = (TabLayout) findViewById(R.id.id_tab_layout);
    mViewPager = (ViewPager) findViewById(R.id.id_vp);
  }
  //      Fragment
  private void initFragmentList() {
    mFragmentList = new ArrayList<>();
    mFragmentList.add(TabFragment.getInstance("  "));
    mFragmentList.add(TabFragment.getInstance("  "));
    mFragmentList.add(TabFragment.getInstance("  "));
    mFragmentList.add(TabFragment.getInstance("  "));
    mFragmentList.add(TabFragment.getInstance("  "));
  }
  //  ViewPager Adapter
  private void setVpAdapter() {
    mViewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), mFragmentList, this));
  }
}

Activity.xml

<?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

  <android.support.design.widget.TabLayout
    android:id="@+id/id_tab_layout"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:layout_alignParentBottom="true"
    android:background="#fff"
    android:fillViewport="false"
    app:layout_scrollFlags="scroll"
    app:tabIndicatorHeight="0dp"
    app:tabMode="fixed"
    >
  </android.support.design.widget.TabLayout>

  <android.support.v4.view.ViewPager
    android:id="@+id/id_vp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/id_tab_layout"
    />
</RelativeLayout>

자,구체 적 인 사고,코드 가 이렇게 많 습 니 다.다른 필요 한 파일 은 모두 간단 합 니 다.스스로 추가 하 세 요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.