仿微信底部菜单栏(ViewPager+ImagerView+TextView)
来源:互联网 发布:淘宝卖家活动报名 编辑:程序博客网 时间:2024/06/06 11:35
前言
在市面上,大多数的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 {@Overridepublic 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;}@Overridepublic int getCount() {return mFragments.size();}@Overridepublic 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;@Overrideprotected 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);}@Overridepublic 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);}}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int arg0) {setMenuSelector(arg0);}}
贴上项目源码
http://download.csdn.net/detail/honiler/9902891#
小弟资质平平,如有不足之外望大神指点,互相学习,小弟在此谢过!
- 仿微信底部菜单栏(ViewPager+ImagerView+TextView)
- Viewpager+底部菜单栏
- ViewPager+RadioGroup实现底部菜单栏(一)
- 用Fragment+FragmentTabHost++ViewPager 实现底部菜单栏
- android 底部菜单栏(仿微信顶部菜单栏)
- Android仿微信底部菜单栏+顶部菜单栏
- Android仿微信底部菜单栏+顶部菜单栏
- Android RadioGroup+ViewPager+ActionBar实现仿微信6.0界面(底部滑动菜单栏+导航栏)
- Android知识点九(ViewPager + Fragment 实现底部菜单栏)
- ViewPager+FragmentPagerAdapter+RadioGroup实现底部菜单栏(三)
- Android底部Tab菜单栏(FragmentTabHost+ViewPager+Fragment)
- 底部菜单栏
- Android仿微信底部菜单栏+顶部菜单栏(附源码)
- Android仿微信底部菜单栏+顶部菜单栏(附源码)
- Android仿微信底部菜单栏+顶部菜单栏(附源码)
- 利用ViewPager和ImagerView制作可浏览可缩放图片
- android viewpager+Imagerview的可滑动主界面导航栏
- android使用ViewPager实现底部菜单栏和左右滑动效果,加载多个Activity
- Hibernate一对多和多不多的操作
- Android中获取字符串长度、宽度(所占像素宽度)的方法
- 1041. Be Unique (20)
- cat
- 代码之髓读后感——名字&作用域&类型
- 仿微信底部菜单栏(ViewPager+ImagerView+TextView)
- Druid简介(Spring Boot + Mybatis + Druid数据源【官方start】)
- ubuntu16.04安装jdk、Android Studio、Android Sdk
- Jetty下载安装+MAC
- 1503: [NOI2004]郁闷的出纳员
- stl中容器以几倍的速度增长
- 我的第一个minigui程序
- 移动端数据接口返回数据格式(下)
- iterm2 主题配置