方法一：TabLayout + Fragment
需要注意的幾點：
- TabLayout默認是帶indicator的 (就是一條下橫線)，我們可以在tablayout的屬性中設置 app:tabIndicatorHeight="0dp"就可以去掉indicator了。
帶indicator的例子.png
- 如果我們用原生的方法給tablayout添加tab，展示的默認效果是圖片和文字上下距離比較大，并且goole的api中并沒有提供調整這個距離的方法，所以我們不能用原生的添加tab的方法，我們需要自定義tabview，然后再添加。
tabLayout.addTab(tabLayout.newTab().setIcon(TabLayoutDataGenerator.mTabImgNormal[0]).setText(TabLayoutDataGenerator.titles[0]));
tabLayout.addTab(tabLayout.newTab().setIcon(TabLayoutDataGenerator.mTabImgNormal[1]).setText(TabLayoutDataGenerator.titles[1]));
tabLayout.addTab(tabLayout.newTab().setIcon(TabLayoutDataGenerator.mTabImgNormal[2]).setText(TabLayoutDataGenerator.titles[2]));
tabLayout.addTab(tabLayout.newTab().setIcon(TabLayoutDataGenerator.mTabImgNormal[3]).setText(TabLayoutDataGenerator.titles[3]));
圖片和文字距離較大.png
直接上代碼 效果如下圖
最終效果.png
MainActivity布局代碼：
<LinearLayout 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:orientation="vertical"
tools:context="com.zsl.bb.bottom_niv.MainActivity">
<FrameLayout
android:id="@+id/fl_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:alpha="0.6"
android:background="#ccc" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/bottom_niv_height"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@color/bottom_text_select_color" />
</LinearLayout>
自定義tabview的布局：
<?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"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_icon"
android:layout_width="@dimen/bottom_niv_img_size"
android:layout_height="@dimen/bottom_niv_img_size"
android:src="@drawable/home_selected" />
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首頁" />
</LinearLayout>
填充TabLayout的實體類：
/**
* TabLayout初始化數(shù)據(jù)
* Created by zhangshuliang on 2017/9/26.
*/
public class TabLayoutDataGenerator {
public static final String[] titles = {"首頁", "聊天", "我的", "設置"};
public static final int[] mTabImgNormal = {
R.drawable.home_normal,
R.drawable.chat_normal,
R.drawable.mine_normal,
R.drawable.set_normal};
public static final int[] mTabImgSelected = {
R.drawable.home_selected,
R.drawable.chat_selected,
R.drawable.mine_selected,
R.drawable.set_selected};
// 所有的fragment放入數(shù)組中
public static Fragment[] getFragments(String tag) {
Fragment[] fragments = new Fragment[titles.length];
fragments[0] = HomeFragment.getInstance(tag);
fragments[1] = ChatFragment.getInstance(tag);
fragments[2] = MineFragment.getInstance(tag);
fragments[3] = SetFragment.getInstance(tag);
return fragments;
}
// 自定義TabView并設置數(shù)據(jù)
public static View getTabView(Context context, int position) {
View view = LayoutInflater.from(context).inflate(R.layout.item_tab_view, null);
ImageView icon = view.findViewById(R.id.iv_icon);
TextView title = view.findViewById(R.id.tv_title);
icon.setImageResource(mTabImgNormal[position]);
title.setText(titles[position]);
return view;
}
}
其中一個fragment的代碼：
public class HomeFragment extends Fragment {
public static HomeFragment getInstance(String tag){
HomeFragment fragment = new HomeFragment();
Bundle bundle = new Bundle();
bundle.putString("tag",tag);
fragment.setArguments(bundle);
return fragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_home, container, false);
return view;
}
}
MainActivity的代碼：
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private Fragment[] fragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
fragments = TabLayoutDataGenerator.getFragments("TabLayout tab");
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
// 設置監(jiān)聽(必須要放在添加tab之前)
setTabListener();
// 添加tab
for (int i = 0; i < TabLayoutDataGenerator.titles.length; i++) {
tabLayout.addTab(tabLayout.newTab().setCustomView(TabLayoutDataGenerator.getTabView(MainActivity.this, i)));
}
}
// tablayout設置監(jiān)聽器
private void setTabListener() {
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
onTabItemSelected(tab.getPosition());
changeTabUi(tab);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private void changeTabUi(TabLayout.Tab tab) {
for (int i = 0; i < tabLayout.getTabCount(); i++) {
View view = tabLayout.getTabAt(i).getCustomView();
ImageView icon = view.findViewById(R.id.iv_icon);
TextView title = view.findViewById(R.id.tv_title);
if (i == tab.getPosition()) {
icon.setImageResource(TabLayoutDataGenerator.mTabImgSelected[i]);
title.setTextColor(getResources().getColor(R.color.bottom_text_select_color));
} else {
icon.setImageResource(TabLayoutDataGenerator.mTabImgNormal[i]);
title.setTextColor(getResources().getColor(R.color.bottom_text_normal_color));
}
}
}
private void onTabItemSelected(int position) {
Fragment fragment = null;
switch (position) {
case 0:
fragment = fragments[0];
break;
case 1:
fragment = fragments[1];
break;
case 2:
fragment = fragments[2];
break;
case 3:
fragment = fragments[3];
break;
}
if (fragment != null) {
getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, fragment).commit();
}
}
}
方法二：BottomNavigationView + fragment
MainActivity布局代碼（就把tablayout換成了bottomnavigationview）：
<LinearLayout 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:orientation="vertical"
tools:context="com.zsl.bb.bottom_niv.Main2Activity">
<FrameLayout
android:id="@+id/fl_container_two"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#ccc"
android:alpha="0.6"/>
<android.support.design.widget.BottomNavigationView
app:menu="@menu/bottom_niv_menu"
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="@dimen/bottom_niv_height"/>
</LinearLayout>
BottomNavigationView的tab是通過menu屬性引入的，menu的布局文件如下(menu是在res/menu)：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/tab_menu_home"
android:icon="@drawable/home_normal"
android:title="首頁"/>
<item
android:id="@+id/tab_menu_chat"
android:icon="@drawable/chat_normal"
android:title="聊天"/>
<item
android:id="@+id/tab_menu_mine"
android:icon="@drawable/mine_normal"
android:title="我的"/>
<item
android:id="@+id/tab_menu_set"
android:icon="@drawable/set_normal"
android:title="設置"/>
</menu>
Mainactivity中的代碼：
public class Main2Activity extends AppCompatActivity {
private BottomNavigationView navigationView;
private Fragment[] fragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
initView();
}
private void initView() {
navigationView = (BottomNavigationView) findViewById(R.id.navigation_view);
fragments = TabLayoutDataGenerator.getFragments("Navigationview");
navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
onTabItemSelected(item.getItemId());
return true;
}
});
onTabItemSelected(R.id.tab_menu_home);
}
private void onTabItemSelected(int id) {
Fragment fragment = null;
switch (id) {
case R.id.tab_menu_home:
fragment = fragments[0];
break;
case R.id.tab_menu_chat:
fragment = fragments[1];
break;
case R.id.tab_menu_mine:
fragment = fragments[2];
break;
case R.id.tab_menu_set:
fragment = fragments[3];
break;
}
getSupportFragmentManager().beginTransaction().replace(R.id.fl_container_two,fragment).commit();
}
}
