In the process of Android development, especially for newly opened projects, the switch of the bottom status bar is frequently used. The main implementation methods are as follows: (1), TabLayout + Fragment (2), FragmentTabHost + Fragment (3), BottomNavigationView + Fragment (4), RidioGroup + Fragment
Here I will introduce the first two implementations and post the last two implementations later.
TabLayout + Fragment + ViewPager
(1) Define TabLayout control in layout file (2) define each Fragment layout file (3) Define Java class of each Fragment (4) Define TabLayoutMainActivity class (5
2. Implementation Process:
TabLayout (activity_main.xml)
<? 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="com.showly.bottomnavigationbardemo.TabLayoutMainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_content_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_view"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FB8081"
app:tabTextColor="#A0A0A0" />
</LinearLayout>
Copy the code(2) Define each Fragment layout file to switch (fragment_frist.xml)
There are four Tab categories (Home, Entertainment, Games, mine) with a similar layout, and only one of them is posted here
<? xml version="1.0" encoding="utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Home page"
android:textColor="# 000"/>
</RelativeLayout>
Copy the code(3) Define the Java class for each Fragment to switch (FristFragment.class)
The Java class implementation here is similar. Post one of them
package com.showly.bottomnavigationbardemo.fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.showly.bottomnavigationbardemo.R;
public class FristFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_frist, null);
returnview; }}Copy the code(4), define TabLayoutMainActivity (TabLayoutMainActivity. Class)
package com.showly.bottomnavigationbardemo; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import com.showly.bottomnavigationbardemo.fragment.FourthlyFragment; import com.showly.bottomnavigationbardemo.fragment.FristFragment; import com.showly.bottomnavigationbardemo.fragment.SecondFragment; import com.showly.bottomnavigationbardemo.fragment.ThirtlyFragment; Public class TabLayoutMainActivity extends AppCompatActivity {// Unselected Tab picture private int[] unSelectTabRes = new int[]{R.drawable.i8live_menu_home_normal , R.drawable.i8live_menu_information_normal, R.drawable.i8live_menu_game_normal, R.drawable.i8live_menu_personl_normal}; Private int[] selectTabRes = new int[]{r.rawable. I8live_menu_home_press, R.drawable.i8live_menu_information_press , R.drawable.i8live_menu_game_press, R.drawable.i8live_menu_personl_press}; //Tab title private String[] title = new String[]{"Home page"."Entertainment"."Game"."I"}; private ViewPager viewPager; private TabLayout tabLayout; private TabLayout.Tab tabAtOne; private TabLayout.Tab tabAttwo; private TabLayout.Tab tabAtthree; private TabLayout.Tab tabAtfour; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getSupportActionBar().hide(); // Hide the entire ActionBarsetContentView(R.layout.activity_main);
initView();
initData();
initListener();
}
private void initView() { viewPager = (ViewPager) findViewById(R.id.viewpager_content_view); tabLayout = (TabLayout) findViewById(R.id.tab_layout_view); / / use the adapter will ViewPager with fragments binding ViewPager. SetAdapter (new MyFragmentPagerAdapter (getSupportFragmentManager ())); / / to bind TabLayout and ViewPager TabLayout. SetupWithViewPager (ViewPager); GetTabAt (0) = tabLayout.gettabat (0); tabAttwo = tabLayout.getTabAt(1); tabAtthree = tabLayout.getTabAt(2); tabAtfour = tabLayout.getTabAt(3); // Set the Tab image tabaton.seticon (r.david.i8live_menu_home_press); tabAttwo.setIcon(R.drawable.i8live_menu_information_normal); tabAtthree.setIcon(R.drawable.i8live_menu_game_normal); tabAtfour.setIcon(R.drawable.i8live_menu_personl_normal); */ / set mode 2:for (int i = 0; i < title.length; i++) {
if (i == 0) {
tabLayout.getTabAt(0).setIcon(selectTabRes[0]);
} else {
tabLayout.getTabAt(i).setIcon(unSelectTabRes[i]);
}
}
}
private void initData() {
}
private void initListener() {/ / TabLayout switch navigation image processing TabLayout. AddOnTabSelectedListener (new TabLayout.OnTabSelectedListener() {@override public void onTabSelected(tabLayout.tab Tab) {// Select the imagefor (int i = 0; i < title.length; i++) {
if(tab == tabLayout.getTabAt(i)) { tabLayout.getTabAt(i).setIcon(selectTabRes[i]); viewPager.setCurrentItem(i); }}} @override public void onTabUnselected(tabLayout.tab Tab)for (int i = 0; i < title.length; i++) {
if(tab == tabLayout.getTabAt(i)) { tabLayout.getTabAt(i).setIcon(unSelectTabRes[i]); } } } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } public class MyFragmentPagerAdapter extends FragmentPagerAdapter {public MyFragmentPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) {if (position == 1) {
returnnew SecondFragment(); / / entertainment}else if (position == 2) {
returnnew ThirtlyFragment(); / / game}else if (position == 3) {
returnnew FourthlyFragment(); / / I}returnnew FristFragment(); } @override public intgetCount() {
return title.length;
}
@Override
public CharSequence getPageTitle(int position) {
returntitle[position]; }}}Copy the code(5) Demonstration of effect drawing
Use FragmentTabHost+ Fragment + ViewPager
1. Implementation Steps: Define FragmentTabHost controls in the layout file (2), define the bottom menu bar layout (3), define each Fragment layout file that switches (4), define the Java class that switches (5), and toggle button images Class defined FragmentTabHostMainActivity (6), (7), rendering demonstration
2. Implementation Process:
FragmentTabHost (fragment_tabhost_activity.xml)
<? 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:background="#fff"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/vp_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none" />
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:background="# 3000"
android:layout_height="65dp">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
Copy the code(2) Define the bottom menu bar layout (tab_content.xml)
<? 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:padding="2dp"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@drawable/i8live_menu_home_normal" />
<TextView
android:id="@+id/tv_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Home page" />
</LinearLayout>
Copy the codeFragment_frist. XML. There are four Tab categories (home, Entertainment, Game, mine) with similar layouts, so only one of them is posted here
<? xml version="1.0" encoding="utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Home page"
android:textColor="# 000"/>
</RelativeLayout>
Copy the code(4) Define the Java class for each Fragment to switch (FristFragment.class)
The Java class implementation here is similar. Post one of them
package com.showly.bottomnavigationbardemo.fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.showly.bottomnavigationbardemo.R;
public class FristFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_frist, null);
returnview; }}Copy the code(5) The image of toggle button (tab_main.xml) here are four similar, only one of them is posted
<? xml version="1.0" encoding="utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android"> <! <item Android :drawable="@drawable/i8live_menu_home_press" android:state_selected="true"/ > <! <item Android :drawable="@drawable/i8live_menu_home_normal"/>
</selector
Copy the code(6), define FragmentTabHostMainActivity class (FragmentTabHostMainActivity. Class)
package com.showly.bottomnavigationbardemo; import android.graphics.Color; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.app.FragmentTabHost; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TabHost; import android.widget.TabWidget; import android.widget.TextView; import com.showly.bottomnavigationbardemo.fragment.FourthlyFragment; import com.showly.bottomnavigationbardemo.fragment.FristFragment; import com.showly.bottomnavigationbardemo.fragment.SecondFragment; import com.showly.bottomnavigationbardemo.fragment.ThirtlyFragment; import java.util.ArrayList; import java.util.List; public class FragmentTabHostMainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener, TabHost.OnTabChangeListener { private int[] selectTabRes = new int[]{R.drawable.tab_main, R.drawable.tab_infomation , R.drawable.tab_game, R.drawable.tab_personal}; //Tab title private String[] title = new String[]{"Home page"."Entertainment"."Game"."I"};
private Class fragmentArry[] = {FristFragment.class, SecondFragment.class, ThirtlyFragment.class, FourthlyFragment.class};
private List<Fragment> fragmentList = new ArrayList();
private ViewPager viewPager;
private FragmentTabHost tabHost;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_tabhost_activity); initView(); initData(); initListener(); } /** * Initialize the Fragment and add an adapter to the ViewPager */ private voidinitVaper() { FristFragment fristFragment = new FristFragment(); SecondFragment secondFragment = new SecondFragment(); ThirtlyFragment thirtlyFragment = new ThirtlyFragment(); FourthlyFragment fourthlyFragment = new FourthlyFragment(); fragmentList.add(fristFragment); fragmentList.add(secondFragment); fragmentList.add(thirtlyFragment); fragmentList.add(fourthlyFragment); / / ViewPager add adapter ViewPager. SetAdapter (new MyFragmentAdapter (getSupportFragmentManager (), fragmentList)); tabHost.getTabWidget().setDividerDrawable(null); } private voidinitView() { viewPager = (ViewPager) findViewById(R.id.vp_pager); tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost); / / bind tabhost tabhost. Setup (this, getSupportFragmentManager (), R.i d.v p_pager); //TabHost bind viewpager // get the number of items int count = title.length;for(int i = 0; i < count; I ++) {// Set each TabHost layout tabhost. TabSpec TabSpec = tabhost. newTabSpec(title[I]).setIndicator(getTabItemView(I)); Tabhost. addTab(tabSpec, fragmentArry[I], null); tabHost.setTag(i); } // Initialize TabHost text color upDateTab(TabHost); // Set the adapter initVaper() for ViewPager; } /** * Updates the text color. * * @param mTabHost */ private void upDateTab(FragmentTabHost mTabHost) {for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) {
TextView tv = (TextView) mTabHost.getTabWidget().getChildAt(i).findViewById(R.id.tv_item);
if(mtabhost.getCurrentTab () == I) {// Select tv.settextColor (color.parsecolor ()"#FF5959"));
} else{// uncheck tv.settextColor (color.parsecolor ("# 777777")); Private View getTabItemView(int I) {View View = LayoutInflater.from(this).inflate(R.layout.tab_content, null); ImageView itemImg = (ImageView) view.findViewById(R.id.iv_imageview); TextView itemText = (TextView) view.findViewById(R.id.tv_item); itemImg.setBackgroundResource(selectTabRes[i]); itemText.setText(title[i]);return view;
}
private void initData() {
}
private void initListener() {
viewPager.addOnPageChangeListener(this);
tabHost.setOnTabChangedListener(this);
}
@Override
public void onPageScrolled(int position, floatpositionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { TabWidget widget = tabHost.getTabWidget(); int oldFocusability = widget.getDescendantFocusability(); widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS); // Set View to override the subclass control to get the focus tabhost. setCurrentTab(position); / / based on the current position Postion Settings Tab widget setDescendantFocusability (oldFocusability); } @override public void onPageScrollStateChanged(int state) {} @override public void onTabChanged(String) tabId) { int position = tabHost.getCurrentTab(); viewPager.setCurrentItem(position); // Assign the location of the selected Tab to the adapter to control the page switch upDateTab(tabHost); } /** * adapter ** / public class MyFragmentAdapter extends FragmentPagerAdapter {List<Fragment> List; public MyFragmentAdapter(FragmentManager fm, List<Fragment> list) { super(fm); this.list = list; } @Override public Fragment getItem(int position) {return list.get(position);
}
@Override
public int getCount() {
returnlist.size(); }}}Copy the code(7) Demonstration of effect drawing
Three, to sum up the realization of these two ways has been completed, the realization is relatively simple, the later time will be the latter two ways to make up. Demo code address: bottom public number reply “bottom status bar switch” can be obtained.
The following is our personal public account (LongXuanzhigu). Our articles will be synchronized to this account, which is convenient for exchanging and learning Android knowledge and sharing personal favorite articles:
