我的Android之路——底部菜单栏的实现
底部菜单栏的实现
底部菜单栏两种实现方法：ViewPager:可滑动的界面；Fragment:固定的界面。
首先，页面布局，在除去顶部toolbar之后，将主界面分为两部分，一部分为界面显示区，另一部分作为底部菜单栏。
xml布局文件：content_main.xml(主页面除去toolbar后剩余部分)
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:id="@+id/fl_content" android:layout_width="match_parent" android:background="#ffffff" android:layout_height="0dp" android:layout_weight="1"> </FrameLayout> <include layout="@layout/activity_bottom"/> </LinearLayout>
activity_bottom.xml（底部菜单栏布局，将菜单栏分为两部分，图片和文字）
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" > <LinearLayout android:id="@+id/ll_home" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/iv_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tab_home_pressed" /> <TextView android:id="@+id/tv_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="3dp" android:text="首页" android:textColor="#1B940A" android:textStyle="bold" /> </LinearLayout> <LinearLayout android:id="@+id/ll_find" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/iv_find" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tab_find_normal" /> <TextView android:id="@+id/tv_find" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="3dp" android:text="发现" android:textColor="#ffffff" android:textStyle="bold" /> </LinearLayout> <LinearLayout android:id="@+id/ll_recommend" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/iv_recommend" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tab_recommend_normal" /> <TextView android:id="@+id/tv_recommend" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="3dp" android:text="推荐" android:textColor="#ffffff" android:textStyle="bold" /> </LinearLayout> <LinearLayout android:id="@+id/ll_discuss" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/iv_discuss" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tab_discuss_normal" /> <TextView android:id="@+id/tv_discuss" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="3dp" android:text="讨论" android:textColor="#ffffff" android:textStyle="bold" /> </LinearLayout> </LinearLayout>
home.xml（四个Fragment页面的主页面布局，其他类似）
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <ScrollView android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> </LinearLayout> </ScrollView> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="我是首页" android:textSize="30dp" /> </RelativeLayout>
HomeFragment(Fragment的java文件，可实现对应页面的功能，此处只列出一个)
package com.example.liu.cakeapp; 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; /** * Created by lenovo on 2016/9/8. */ public class HomeFragment extends Fragment { public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle saveInstanceState){ return inflater.inflate(R.layout.home,container,false); } }
MainActivity
package com.example.liu.cakeapp; import android.app.SearchManager; import android.content.Context; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v7.widget.SearchView; import android.view.View; import android.support.design.widget.NavigationView; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener , View.OnClickListener { //底部菜单四个LinearLayout private LinearLayout ll_home; private LinearLayout ll_find; private LinearLayout ll_recommend; private LinearLayout ll_discuss; //底部菜单四个ImageView private ImageView iv_home; private ImageView iv_find; private ImageView iv_recommend; private ImageView iv_discuss; //底部菜单四个菜单标题 private TextView tv_home; private TextView tv_find; private TextView tv_recommend; private TextView tv_discuss; //四个Fragment private Fragment homeFragment; private Fragment findFragment; private Fragment recommendFragment; private Fragment discussFragment; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); //初始化控件 initView(); // 初始化底部按钮事件 initEvent(); // 初始化并设置当前Fragment initFragment(0); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } }); DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle( this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawer.setDrawerListener(toggle); toggle.syncState(); NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); navigationView.setNavigationItemSelectedListener(this); } @Override public void onBackPressed() { DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); if (drawer.isDrawerOpen(GravityCompat.START)) { drawer.closeDrawer(GravityCompat.START); } else { super.onBackPressed(); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); SearchManager searchManager=(SearchManager)getSystemService(Context.SEARCH_SERVICE); SearchView searchView=(SearchView)menu.findItem(R.id.toolbar_search).getActionView(); searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName())); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.event) { return true; }else if(id == R.id.jump) { return true; }else if(id == R.id.event) { return true; }else if(id == R.id.event) { return true; } return super.onOptionsItemSelected(item); } @SuppressWarnings("StatementWithEmptyBody") @Override public boolean onNavigationItemSelected(MenuItem item) { // Handle navigation view item clicks here. int id = item.getItemId(); if (id == R.id.nav_camera) { // Handle the camera action } else if (id == R.id.nav_gallery) { } else if (id == R.id.nav_slideshow) { } else if (id == R.id.nav_manage) { } else if (id == R.id.nav_share) { } else if (id == R.id.nav_send) { } DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); drawer.closeDrawer(GravityCompat.START); return true; } private void initFragment(int index){ FragmentManager fragmentManager=getSupportFragmentManager(); FragmentTransaction transaction=fragmentManager.beginTransaction(); //隐藏所有Fragment hideFragment(transaction); switch(index){ case 0: if(homeFragment == null){ homeFragment=new HomeFragment(); transaction.add(R.id.fl_content, homeFragment); }else{ transaction.show(homeFragment); } break; case 1: if(findFragment == null){ findFragment=new FindFragment(); transaction.add(R.id.fl_content, findFragment); }else{ transaction.show(findFragment); } break; case 2: if(recommendFragment == null){ recommendFragment=new RecommendFragment(); transaction.add(R.id.fl_content, recommendFragment); }else{ transaction.show(recommendFragment); } break; case 3: if(discussFragment == null){ discussFragment=new DiscussFragment(); transaction.add(R.id.fl_content, discussFragment); }else{ transaction.show(discussFragment); } break; default: break; } transaction.commit(); } //隐藏Fragment private void hideFragment(FragmentTransaction transaction) { if (homeFragment != null) { transaction.hide(homeFragment); } if (findFragment != null) { transaction.hide(findFragment); } if (recommendFragment != null) { transaction.hide(recommendFragment); } if (discussFragment != null) { transaction.hide(discussFragment); } } private void initEvent(){ ll_home.setOnClickListener(this); ll_find.setOnClickListener(this); ll_recommend.setOnClickListener(this); ll_discuss.setOnClickListener(this); } private void initView(){ this.ll_home=(LinearLayout)findViewById(R.id.ll_home); this.ll_find=(LinearLayout)findViewById(R.id.ll_find); this.ll_recommend=(LinearLayout)findViewById(R.id.ll_recommend); this.ll_discuss=(LinearLayout)findViewById(R.id.ll_discuss); this.iv_home=(ImageView)findViewById(R.id.iv_home); this.iv_find=(ImageView)findViewById(R.id.iv_find); this.iv_recommend=(ImageView)findViewById(R.id.iv_recommend); this.iv_discuss=(ImageView)findViewById(R.id.iv_discuss); this.tv_home=(TextView)findViewById(R.id.tv_home); this.tv_find=(TextView)findViewById(R.id.tv_find); this.tv_recommend=(TextView)findViewById(R.id.tv_recommend); this.tv_discuss=(TextView)findViewById(R.id.tv_discuss); } public void onClick(View v){ //在每次点击后将所有的底部按钮颜色改变为灰色，然后根据点击着色 restartBotton(); //ImageView和TetxView设置为绿色，页面随之跳转 switch (v.getId()){ case R.id.ll_home: iv_home.setImageResource(R.drawable.tab_home_pressed); tv_home.setTextColor(0xff1B940A); initFragment(0); break; case R.id.ll_find: iv_find.setImageResource(R.drawable.tab_find_pressed); tv_find.setTextColor(0xff1B940A); initFragment(1); break; case R.id.ll_recommend: iv_recommend.setImageResource(R.drawable.tab_recommend_pressed); tv_recommend.setTextColor(0xff1B940A); initFragment(2); break; case R.id.ll_discuss: iv_discuss.setImageResource(R.drawable.tab_discuss_pressed); tv_discuss.setTextColor(0xff1B940A); initFragment(3); break; default: break; } } public void restartBotton(){ iv_home.setImageResource(R.drawable.tab_home_normal); iv_find.setImageResource(R.drawable.tab_find_normal); iv_recommend.setImageResource(R.drawable.tab_recommend_normal); iv_discuss.setImageResource(R.drawable.tab_discuss_normal); tv_home.setTextColor(0xffffffff); tv_find.setTextColor(0xffffffff); tv_recommend.setTextColor(0xffffffff); tv_discuss.setTextColor(0xffffffff); } }
总结：
参考仿微信底部菜单栏实现底部菜单栏页面的切换，文件的布局相当清晰，对于功能的实现相对简单。
优点：
1、Fragment文件单独存在，各自页面的内容各自去实现完成，有自己的生命周期，便于后期维护。
2、对于需要手势操作的一些内容不会起冲突。
缺点：
1、界面不可滑动，比较死板。
