目前主流的App导航菜单布局基本上有3中:
1.类似微信:底部横向排列菜单按钮,点击切换主界面内容(也支持左右滑动切换)
2.抽屉式左右滑动导航:点击主界面左上角菜单图标,滑出菜单界面(菜单界面item纵向排列),点击菜单item,收起菜单页,同时切换主界面内容
3.九宫格导航菜单:好像这种用得越来越少了
这里实现第一种方法
下面开始coding:
1.主界面布局 activity_main.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="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:background="#ffffff"> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1px" android:background="#000000"/> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#ffffff"/> <View android:layout_width="match_parent" android:layout_height="1px" android:background="#000000"/> <include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/bottom" /> </LinearLayout>
2.引用的底部菜单布局 bottom.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFFFFF" android:orientation="horizontal"> <LinearLayout android:id="@+id/menu1" android:layout_width="0dp" android:layout_height="50dp" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/_image1" android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/ic_launcher"/> <TextView android:id="@+id/_text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#00ACEE" android:text="aa"/> </LinearLayout> <LinearLayout android:id="@+id/menu2" android:layout_width="0dp" android:layout_height="50dp" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/_image2" android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/ic_launcher"/> <TextView android:id="@+id/_text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="bb"/> </LinearLayout> <LinearLayout android:id="@+id/menu3" android:layout_width="0dp" android:layout_height="50dp" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/_image3" android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/ic_launcher"/> <TextView android:id="@+id/_text3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="cc"/> </LinearLayout> <LinearLayout android:id="@+id/menu4" android:layout_width="0dp" android:layout_height="50dp" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/_image4" android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/ic_launcher"/> <TextView android:id="@+id/_text4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="dd"/> </LinearLayout> </LinearLayout>
3.主界面Activity:MainActivity.java
注意:继承FragmentActivity,而不是Activity
package com.example.viewpagerfragment; import java.util.ArrayList; import java.util.List; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.view.ViewPager; import android.view.KeyEvent; import android.view.LayoutInflater; import android.view.View; import android.view.Window; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import android.widget.Toast; import com.example.adapter.MyAdapter; import com.example.fragment.Fragment1; import com.example.fragment.Fragment2; import com.example.fragment.Fragment3; import com.example.fragment.Fragment4; public class MainActivity extends FragmentActivity { ViewPager viewPager = null; private List<Fragment> list; // Tab页面列表 private View view; private Fragment1 fragment1; private Fragment2 fragment2; private Fragment3 fragment3; private Fragment4 fragment4; @Override protected void onCreate(Bundle savedInstanceState) { LayoutInflater inflater = LayoutInflater.from(this); view = inflater.inflate(R.layout.activity_main, null); super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); //去除顶部标题 setContentView(view); initialize(); initViewPager(); } private void initialize(){ viewPager = (ViewPager)findViewById(R.id.viewpager); } private void initViewPager(){ // viewPager = (ViewPager)findViewById(R.id.viewpager); list = new ArrayList<Fragment>(); fragment1 = new Fragment1(); fragment2 = new Fragment2(); fragment3 = new Fragment3(); fragment4 = new Fragment4(); list.add(fragment1); list.add(fragment2); list.add(fragment3); list.add(fragment4); FragmentManager fragmentManager = getSupportFragmentManager(); viewPager.setAdapter(new MyAdapter(fragmentManager,list)); viewPager.setCurrentItem(0); viewPager.setOnPageChangeListener(new MyOnPageChangeListener()); LinearLayout menu1 = (LinearLayout) view.findViewById(R.id.menu1); LinearLayout menu2 = (LinearLayout) view.findViewById(R.id.menu2); LinearLayout menu3 = (LinearLayout) view.findViewById(R.id.menu3); LinearLayout menu4 = (LinearLayout) view.findViewById(R.id.menu4); menu1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { setBottomMenu(0); viewPager.setCurrentItem(0); } }); menu2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { setBottomMenu(1); viewPager.setCurrentItem(1); } }); menu3.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { setBottomMenu(2); viewPager.setCurrentItem(2); } }); menu4.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { setBottomMenu(3); viewPager.setCurrentItem(3); } }); } /** * 页卡切换监听 */ public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener { public void onPageSelected(int arg0) { setBottomMenu(arg0); } @Override public void onPageScrollStateChanged(int arg0) { } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } } /** * 设置底部菜单按钮 */ public void setBottomMenu(int position){ ImageView image1 = (ImageView)view.findViewById(R.id._image1); ImageView image2 = (ImageView)view.findViewById(R.id._image2); ImageView image3 = (ImageView)view.findViewById(R.id._image3); ImageView image4 = (ImageView)view.findViewById(R.id._image4); TextView text1 = (TextView)view.findViewById(R.id._text1); TextView text2 = (TextView)view.findViewById(R.id._text2); TextView text3 = (TextView)view.findViewById(R.id._text3); TextView text4 = (TextView)view.findViewById(R.id._text4); image1.setImageResource(R.drawable.ic_launcher); image2.setImageResource(R.drawable.ic_launcher); image3.setImageResource(R.drawable.ic_launcher); image4.setImageResource(R.drawable.ic_launcher); text1.setTextColor(Color.parseColor("#ADADAD")); text2.setTextColor(Color.parseColor("#ADADAD")); text3.setTextColor(Color.parseColor("#ADADAD")); text4.setTextColor(Color.parseColor("#ADADAD")); switch (position) { case 0: image1.setImageResource(R.drawable.ic_launcher); text1.setTextColor(Color.parseColor("#00ACEE")); break; case 1: image2.setImageResource(R.drawable.ic_launcher); text2.setTextColor(Color.parseColor("#00ACEE")); break; case 2: image3.setImageResource(R.drawable.ic_launcher); text3.setTextColor(Color.parseColor("#00ACEE")); break; case 3: image4.setImageResource(R.drawable.ic_launcher); text4.setTextColor(Color.parseColor("#00ACEE")); break; default: break; } } private long exitTime = 0; /** * 重写返回键事件,按两次退出程序 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN){ if((System.currentTimeMillis()-exitTime) > 2000){ Toast.makeText(getApplicationContext(), "再按一次退出程序", Toast.LENGTH_SHORT).show(); exitTime = System.currentTimeMillis(); } else { finish(); System.exit(0); } return true; } return super.onKeyDown(keyCode, event); } }
4.Adapter
继承FragmentPagerAdapter
package com.example.adapter; import java.util.List; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; public class MyAdapter extends FragmentPagerAdapter{ List<Fragment> list = null; public MyAdapter(FragmentManager fragmentManager,List<Fragment> list){ super(fragmentManager); this.list = list; } @Override public Fragment getItem(int position) { return list.get(position); } @Override public int getCount() { return list.size(); } }
5.Fragment
package com.example.fragment; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.example.viewpagerfragment.R; public class Fragment1 extends Fragment { View view = null; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { view = inflater.inflate(R.layout.fragment1, null); return view; } @Override public void onDestroy() { super.onDestroy(); } @Override public void onPause() { super.onPause(); } @Override public void onResume() { super.onResume(); } }