android 仿底部菜单栏,Android仿微信底部菜单栏效果

几乎所有的Android应用程序都使用底部菜单栏,目前安卓开发中tabhost技术已经成为主流,这篇文章爱站技术频道小编主要为大家介绍了Android仿微信底部菜单栏效果,感兴趣的小伙伴们可以参考一下哦。

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

......(其他方式后续会补充)

效果预览

首先来个开胃菜,看看实现效果:

9680a3b69bd8de12d959234b9d19b567.gif

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

colors.xml

#9b9b9b#31c016

strings.xml

我发现通讯录微信

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

styles.xml

在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),其他只需更改相对应图片资源即可。

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

fragment_chat.xml

fragment_addressbook.xml

fragment_discovery.xml

fragment_me.xml

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

在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 ArrayListmFragments;

public FragmentAdapter(FragmentManager fm,ArrayListfragment) {

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 ArrayListtv_menus;

private ArrayListimgv_menus;

private ViewPager mViewPager;

private ArrayListmFragments;

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

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

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

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

以上就是爱站技术频道小编为大家介绍的Android仿微信底部菜单栏效果,我们要根据自己的能力进行开发,确保各方面做到最优秀。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值