前言
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),瀘州企業(yè)網(wǎng)站建設(shè),瀘州品牌網(wǎng)站建設(shè),網(wǎng)站定制,瀘州網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,瀘州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
在市面上，大多數(shù)的APP都需要通過(guò)底部菜單欄來(lái)將程序的功能進(jìn)行分類整理，通常都是分為3-5個(gè)大模塊，從而正確有效地引導(dǎo)用戶去使用我們的APP。實(shí)現(xiàn)底部菜單欄的方法也有很多種。
1.仿微信底部菜單欄(ViewPager+ImagerView+TextView)
......（其他方式后續(xù)會(huì)補(bǔ)充）
效果預(yù)覽
首先來(lái)個(gè)開(kāi)胃菜，看看實(shí)現(xiàn)效果：
先貼出項(xiàng)目所需的資源文件，這些可隨個(gè)人自由更改顏色和文字
colors.xml
#9b9b9b #31c016
strings.xml
我 發(fā)現(xiàn) 通訊錄 微信
由于底部四個(gè)菜單項(xiàng)的布局都是類似的，可以把相同的內(nèi)容提取出來(lái)，定義為style進(jìn)行使用。這樣不僅減少了代碼量，也便于日后的維護(hù)。
styles.xml
在res->drawable-xxhdpi文件夾中添加了8張png資源圖片，分別對(duì)應(yīng)菜單欄圖片的選中與未選中狀態(tài)。接著在res->drawable文件夾（如沒(méi)有該文件夾則自己新建）中添加對(duì)應(yīng)的四個(gè)選擇器。
ic_menu_chat_selector.xml
ic_menu_addressbook_selector.xml
ic_menu_discovery_selector.xml
ic_menu_me_selector.xml
這里只貼出其中一個(gè)xml代碼文件的內(nèi)容（ic_menu_chat_selector.xml），其他只需更改相對(duì)應(yīng)圖片資源即可。
<?xml version="1.0" encoding="utf-8"?>
在res->layout中新建四個(gè)布局文件
fragment_chat.xml
fragment_addressbook.xml
fragment_discovery.xml
fragment_me.xml
其中我只是簡(jiǎn)單地放了四個(gè)TextView用來(lái)區(qū)分，這里只貼出其中一個(gè)布局代碼（fragment_chat.xml）
<?xml version="1.0" encoding="utf-8"?>
在src文件夾下新建一個(gè)包用來(lái)存放fragment相關(guān)的文件，本項(xiàng)目中包名定義為com.example.bottommenu_vp_imgv_tv.fragment，接著在該包下新建四個(gè)類繼承Fragment;（我們會(huì)發(fā)現(xiàn)Fragment有兩個(gè)類：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"，但無(wú)論你選用哪個(gè)，在之后所有使用與Fragment相關(guān)的內(nèi)容都要相對(duì)應(yīng)。）
ChatFragment.Java
AddressBookFragment.Java
DiscoveryFragment.Java
MeFragment.Java
這里只貼出其中一個(gè)代碼文件的內(nèi)容（ChatFragment.Java），其他只需更改相對(duì)應(yīng)布局文件即可。
重慶分公司
重慶分公司
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;
}
}
新建一個(gè)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 mFragments;
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);
}
}
所有準(zhǔn)備工作已經(jīng)完成，接下來(lái)就是具體實(shí)現(xiàn)了，基本思路是：底部圖片文字資源采用選擇器去實(shí)現(xiàn)，當(dāng)選中某個(gè)菜單項(xiàng)時(shí)，重置所有菜單項(xiàng)為未選中狀態(tài)，接著選中指定的菜單項(xiàng)并讓ViewPager顯示該菜單項(xiàng)對(duì)應(yīng)的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 tv_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);
}
// 初始化數(shù)據(jù)
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); // 默認(rèn)選中第一個(gè)菜單項(xiàng)“微信”
}
// 初始化事件
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;
}
}
/**
* 選中指定的菜單項(xiàng)并顯示對(duì)應(yīng)的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為未選中狀態(tài)
*/
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);
}
}
貼上項(xiàng)目源碼：Android仿微信底部菜單欄效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
