TabLayout+Fragment實(shí)現(xiàn)底部導(dǎo)航欄
1. 在布局中添加TabLayout
要使用TabLayout要先添加依賴
添加依賴
在布局文件中加入需要的控件
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">
<include layout="@layout/top_title_layout"/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:alpha="0.6"
android:background="@android:color/darker_gray"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="@+id/view_pager"
android:layout_weight="1"></FrameLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:alpha="0.6"
android:background="@android:color/darker_gray"
/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/bottom_tab_layout"
app:tabIndicatorHeight="0dp"
>
</android.support.design.widget.TabLayout>
為了更好地設(shè)置每一個(gè)TabItem的布局磺芭，新建一個(gè)Item的布局文件
<?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:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tab_content_image"
android:scaleType="centerCrop"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tab_content_title"
android:textSize="10sp"
/>
</LinearLayout>
2. 實(shí)例化TabLayout
在Activity文件中添加實(shí)例化控件的代碼崖瞭，對(duì)TabLayout進(jìn)行監(jiān)聽，需要實(shí)現(xiàn)三個(gè)方法
tabLayout = findViewById(R.id.bottom_tab_layout);
// 提供自定義的布局添加Tab
for(int i=0;i<item;i++){
tabLayout.addTab(tabLayout.newTab().setCustomView(ItemAdapter.getTabView(this,i)));
}
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
這里提供了一個(gè)適配Item內(nèi)容的類
public class ItemAdapter {
public static final int[] mTabIcon = new int[]{R.drawable.ic_home_grey_500_24dp, R.drawable.ic_crop_square_grey_500_24dp, R.drawable.ic_polymer_grey_500_24dp, R.drawable.ic_blur_on_grey_500_24dp};
public static final int[] mTabIconPressed = new int[]{R.drawable.ic_home_black_24dp, R.drawable.ic_crop_square_black_24dp, R.drawable.ic_polymer_black_24dp, R.drawable.ic_blur_on_black_24dp};
public static final String[] mTabTitle = new String[]{"首頁(yè)", "發(fā)現(xiàn)", "關(guān)注", "我的"};
public static Fragment[] getFragments(String from){
Fragment fragments[] = new Fragment[4];
fragments[0] = HomeFragment.newInstance(from);
fragments[1] = DiscoverFragment.newInstance(from);
fragments[2] = FollowFragment.newInstance(from);
fragments[3] = ProfileFragment.newInstance(from);
return fragments;
}
public static View getTabView(Context context, int position) {
View view = LayoutInflater.from(context).inflate(R.layout.tab_item_layout, null);
ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_content_image);
tabIcon.setImageResource(ItemAdapter.mTabIcon[position]);
TextView tabText = (TextView) view.findViewById(R.id.tab_content_title);
tabText.setText(mTabTitle[position]);
return view;
}
}
3. 設(shè)置點(diǎn)擊Item的變化
點(diǎn)擊每一個(gè)不同的tab就會(huì)跳轉(zhuǎn)到不同的頁(yè)面，這里新建了四個(gè)Fragment用于頁(yè)面切換吴旋，下面給出完整代碼
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private Fragment[]mFragmensts;
private static int item = 4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mFragmensts = ItemAdapter.getFragments("Tab");
initTablayout();
}
public void initTablayout(){
tabLayout = findViewById(R.id.bottom_tab_layout);
// 提供自定義的布局添加Tab
for(int i=0;i<item;i++){
tabLayout.addTab(tabLayout.newTab().setCustomView(ItemAdapter.getTabView(this,i)));
}
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
onTabItemSelected(tab.getPosition());
for (int i = 0;i<tabLayout.getTabCount();i++){
View view = tabLayout.getTabAt(i).getCustomView();
ImageView icon = (ImageView)view.findViewById(R.id.tab_content_image);
TextView title = (TextView)view.findViewById(R.id.tab_content_title);
if(i == tab.getPosition()){
// 選中狀態(tài)
icon.setImageResource(ItemAdapter.mTabIconPressed[i]);
title.setTextColor(Color.BLACK);
}else{
// 未選中狀態(tài)
icon.setImageResource(ItemAdapter.mTabIcon[i]);
title.setTextColor(Color.DKGRAY);
}
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private void onTabItemSelected(int position){
Fragment fragment = new Fragment();
switch (position){
case 0:
fragment = mFragmensts[0];
break;
case 1:
fragment = mFragmensts[1];
break;
case 2:
fragment = mFragmensts[2];
break;
case 3:
fragment = mFragmensts[3];
break;
}
if(fragment!=null) {
getSupportFragmentManager().beginTransaction().replace(R.id.view_pager,fragment,null).commit();
}
}
}
