Android仿微信底部菜单栏效果
几乎所有的Android应用程序都使用底部菜单栏,目前安卓开发中tabhost技术已经成为主流,这篇文章爱站技术频道小编主要为大家介绍了Android仿微信底部菜单栏效果,感兴趣的小伙伴们可以参考一下哦。
1.仿微信底部菜单栏(ViewPager+ImagerView+TextView)
......(其他方式后续会补充)
效果预览
首先来个开胃菜,看看实现效果:
先贴出项目所需的资源文件,这些可随个人自由更改颜色和文字
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,ArrayList 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 ArrayListtv_menus; private ArrayList imgv_menus; private ViewPager mViewPager; private ArrayList 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 (); 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仿微信底部菜单栏效果,我们要根据自己的能力进行开发,确保各方面做到最优秀。