参考:https://m.jb51.net/show/127557
strings.xml
<resources>
<string name="app_name">taiyang</string>
<string name="hello_world">Hello world!</string>
<string name="bottom_menu_me">我</string>
<string name="bottom_menu_discovery">发现</string>
<string name="bottom_menu_addressbook">通讯录</string>
<string name="bottom_menu_wechat">微信</string>
</resources>
styles.xml
<style name="ButtomMenuImgv">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginBottom">5dp</item>
<item name="android:layout_marginTop">5dp</item>
</style>
<style name="ButtomMenuTv">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginBottom">5dp</item>
<item name="android:textSize">12sp</item>
<item name="android:textColor">@drawable/ic_menu_textcolors_selector</item>
</style>
<style name="ButtomMenuItemLayout">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_weight">1</item>
<item name="android:gravity">center</item>
<item name="android:orientation">vertical</item>
</style>
在drawable下面添加四个xml
ic_menu_chat_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/shouye_light"
android:state_selected="true"></item>
<item android:drawable="@mipmap/shouye_normal"></item>
</selector>
ic_menu_addressbook_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/two_light"
android:state_selected="true"></item>
<item android:drawable="@mipmap/two_normal"></item>
</selector>
ic_menu_discovery_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/lishishuju_light"
android:state_selected="true"></item>
<item android:drawable="@mipmap/lishishuju_normal"></item>
</selector>
ic_menu_me_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/youxi_light"
android:state_selected="true"></item>
<item android:drawable="@mipmap/youxi_normal"></item>
</selector>
@mipmap/youxi_light 是选中状态的图片
@mipmap/youxi_normal 是未选中状态的图片
在src文件夹下新建一个包用来存放fragment相关的文件
ChatFragment.java
public class ChatFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = View.inflate(getContext(), R.layout.fragment_chat, null);
return view;
}
}
AddressBookFragment.java DiscoveryFragment.java MeFragment.java 类似
建一个FragmentPagerAdapter适配器
public class FragmentAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> mFragments;
public FragmentAdapter(FragmentManager fm,ArrayList<Fragment> fragment) {
super(fm);
this.mFragments = fragment;
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public Fragment getItem(int arg0) {
return mFragments.get(arg0);
}
}
MainActivity.java
public class MainActivity extends FragmentActivity implements OnClickListener,
OnPageChangeListener {
private ArrayList<TextView> tv_menus;
private ArrayList<ImageView> imgv_menus;
private ViewPager mViewPager;
private ArrayList<Fragment> mFragments;
private FragmentAdapter mMainMenuAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
initEvent();
}
// 初始化控件
private void initView() {
tv_menus = new ArrayList<TextView>();
tv_menus.add((TextView) findViewById(R.id.tv_bottomMenu_chat));
tv_menus
.add((TextView) findViewById(R.id.tv_bottomMenu_addressbook));
tv_menus.add((TextView) findViewById(R.id.tv_bottomMenu_discovery));
tv_menus.add((TextView) findViewById(R.id.tv_bottomMenu_me));
imgv_menus = new ArrayList<ImageView>();
imgv_menus.add((ImageView) findViewById(R.id.imgv_bottomMenu_chat));
imgv_menus
.add((ImageView) findViewById(R.id.imgv_bottomMenu_addressbook));
imgv_menus
.add((ImageView) findViewById(R.id.imgv_bottomMenu_discovery));
imgv_menus.add((ImageView) findViewById(R.id.imgv_bottomMenu_me));
mViewPager = (ViewPager) findViewById(R.id.vp_main_menuContent);
}
// 初始化数据
private void initData() {
mFragments = new ArrayList<Fragment>();
mFragments.add(new ChatFragment());
mFragments.add(new AddressBookFragment());
mFragments.add(new DiscoveryFragment());
mFragments.add(new MeFragment());
mMainMenuAdapter = new FragmentAdapter(getSupportFragmentManager(),
mFragments);
setMenuSelector(0); // 默认选中第一个菜单项“微信”
}
// 初始化事件
private void initEvent() {
mViewPager.setAdapter(mMainMenuAdapter);
mViewPager.setOnPageChangeListener(this);
findViewById(R.id.ll_bottomMenu_chat).setOnClickListener(this);
findViewById(R.id.ll_bottomMenu_addressBook).setOnClickListener(this);
findViewById(R.id.ll_bottomMenu_discovery).setOnClickListener(this);
findViewById(R.id.ll_bottomMenu_me).setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.ll_bottomMenu_chat:
setMenuSelector(0);
break;
case R.id.ll_bottomMenu_addressBook:
setMenuSelector(1);
break;
case R.id.ll_bottomMenu_discovery:
setMenuSelector(2);
break;
case R.id.ll_bottomMenu_me:
setMenuSelector(3);
break;
}
}
/**
* 选中指定的菜单项并显示对应的Fragment
*
* @param index
*/
private void setMenuSelector(int index) {
reSetSelected();
tv_menus.get(index).setSelected(true);
imgv_menus.get(index).setSelected(true);
mViewPager.setCurrentItem(index);
}
/**
* 重置底部菜单所有ImageView和TextView为未选中状态
*/
private void reSetSelected() {
for (int i = 0; i < tv_menus.size(); i++) {
tv_menus.get(i).setSelected(false);
imgv_menus.get(i).setSelected(false);
}
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int arg0) {
setMenuSelector(arg0);
}
}
底部图片文字资源采用选择器去实现,当选中某个菜单项时,重置所有菜单项为未选中状态,接着选中指定的菜单项并让ViewPager显示该菜单项对应的Fragment即可。