仿微信底部菜单栏(ViewPager+ImagerView+TextView)

最新推荐文章于 2021-09-05 12:21:17 发布

Homilier

最新推荐文章于 2021-09-05 12:21:17 发布

阅读量1.9k

点赞数 11

分类专栏： Android UI 文章标签： viewpager 底部菜单栏微信菜单栏

本文链接：https://blog.csdn.net/Honiler/article/details/75315280

版权

Android UI 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言

在市面上，大多数的APP都需要通过底部菜单栏来将程序的功能进行分类整理，通常都是分为3-5个大模块，从而正确有效地引导用户去使用我们的APP。实现底部菜单栏的方法也有很多种。

1.仿微信底部菜单栏(ViewPager+ImagerView+TextView)

......（其他方式后续会补充）

效果预览

首先来个开胃菜，看看实现效果：

先贴出项目所需的资源文件，这些可随个人自由更改颜色和文字

colors.xml

    <color name="bg_line_light_gray">#9b9b9b</color>
    <color name="bg_main_green">#31c016</color>

strings.xml

    <string name="bottom_menu_me">我</string>
    <string name="bottom_menu_discovery">发现</string>
    <string name="bottom_menu_addressbook">通讯录</string>
    <string name="bottom_menu_wechat">微信</string>

由于底部四个菜单项的布局都是类似的，可以把相同的内容提取出来，定义为style进行使用。这样不仅减少了代码量，也便于日后的维护。

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>

在res->drawable-xxhdpi文件夹中添加了8张png资源图片，分别对应菜单栏图片的选中与未选中状态。接着在res->drawable文件夹（如没有该文件夹则自己新建）中添加对应的四个选择器。

ic_menu_chat_selector.xml

ic_menu_addressbook_selector.xml

ic_menu_discovery_selector.xml

ic_menu_me_selector.xml

这里只贴出其中一个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="@drawable/ic_menu_chat_light" 
        android:state_selected="true"></item>
    <item android:drawable="@drawable/ic_menu_chat_normal"></item>

</selector>

在res->layout中新建四个布局文件

fragment_chat.xml

fragment_addressbook.xml

fragment_discovery.xml

fragment_me.xml

其中我只是简单地放了四个TextView用来区分，这里只贴出其中一个布局代码（fragment_chat.xml）

<?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" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="32sp"
        android:layout_centerInParent="true"
        android:text="@string/bottom_menu_wechat" />

</RelativeLayout>

在src文件夹下新建一个包用来存放fragment相关的文件，本项目中包名定义为com.example.bottommenu_vp_imgv_tv.fragment，接着在该包下新建四个类继承Fragment;（我们会发现Fragment有两个类：android.app.Fragment和android.support.v4.app.Fragment，这里我用android.support.v4.app.Fragment，那为何不使用android.app.Fragment呢？由于android.app.Fragment 兼容的最低版本是android:minSdkVersion="11"，而android.support.v4.app.Fragment 可兼容的最低版本是android:minSdkVersion="4"，但无论你选用哪个，在之后所有使用与Fragment相关的内容都要相对应。）

ChatFragment.Java

AddressBookFragment.Java

DiscoveryFragment.Java

MeFragment.Java

这里只贴出其中一个代码文件的内容（ChatFragment.Java），其他只需更改相对应布局文件即可。

import com.example.bottommenu_vp_imgv_tv.R;
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;

public class ChatFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater,
			@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
		View view = View.inflate(getActivity(), R.layout.fragment_chat, null);
		return view;
	}
}

新建一个FragmentPagerAdapter适配器

FragmentAdapter.java

import java.util.ArrayList;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.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);
	}

}

所有准备工作已经完成，接下来就是具体实现了，基本思路是：底部图片文字资源采用选择器去实现，当选中某个菜单项时，重置所有菜单项为未选中状态，接着选中指定的菜单项并让ViewPager显示该菜单项对应的Fragment即可。

MainActivity.java

import java.util.ArrayList;
import com.example.bottommenu_vp_imgv_tv.fragment.AddressBookFragment;
import com.example.bottommenu_vp_imgv_tv.fragment.ChatFragment;
import com.example.bottommenu_vp_imgv_tv.fragment.DiscoveryFragment;
import com.example.bottommenu_vp_imgv_tv.fragment.FragmentAdapter;
import com.example.bottommenu_vp_imgv_tv.fragment.MeFragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.TextView;

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);
	}
}

贴上项目源码

http://download.csdn.net/detail/honiler/9902891#

小弟资质平平，如有不足之外望大神指点，互相学习，小弟在此谢过！