先看效果
Bottom.xml 底部选项条 共四个按钮,每个页面的按钮由一个linerlayout组成,包括icon和text <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/bottom" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@color/DarkGray" android:orientation="horizontal" android:padding="3dp"> <LinearLayout android:id="@+id/home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="40dp" android:layout_marginRight="@dimen/dig_l" android:layout_marginTop="@dimen/dig_s" android:orientation="vertical"> <ImageView android:id="@+id/iv_home" android:layout_width="@dimen/icon" android:layout_height="@dimen/icon" android:src="@drawable/main_home_gray" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/dig_s" android:textSize="12sp" android:layout_gravity="center" android:textColor="@color/colorGray" android:text="首页"/> </LinearLayout> <LinearLayout android:id="@+id/mall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/icon_margin" android:layout_marginRight="@dimen/dig_l" android:layout_marginTop="@dimen/dig_s" android:orientation="vertical"> <ImageView android:id="@+id/iv_mall" android:layout_width="@dimen/icon" android:layout_height="@dimen/icon" android:src="@drawable/main_mall_gray" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/dig_s" android:textSize="12sp" android:layout_gravity="center" android:textColor="@color/colorGray" android:text="商城"/> </LinearLayout> <LinearLayout android:id="@+id/message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/icon_margin" android:layout_marginRight="@dimen/dig_l" android:layout_marginTop="@dimen/dig_s" android:orientation="vertical"> <ImageView android:id="@+id/iv_message" android:layout_width="@dimen/icon" android:layout_height="@dimen/icon" android:src="@drawable/main_message_gray" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/dig_s" android:textSize="12sp" android:layout_gravity="center" android:textColor="@color/colorGray" android:text="消息"/> </LinearLayout> <LinearLayout android:id="@+id/user" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/icon_margin" android:layout_marginRight="@dimen/dig_l" android:layout_marginTop="@dimen/dig_s" android:orientation="vertical"> <ImageView android:id="@+id/iv_user" android:layout_width="@dimen/icon" android:layout_height="@dimen/icon" android:src="@drawable/main_user_gray" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/dig_s" android:textSize="12sp" android:layout_gravity="center" android:textColor="@color/colorGray" android:text="个人中心"/> </LinearLayout> </LinearLayout> activity_main.xml 中间留出FrameLayout,id自定义为content 下面引用刚刚的bottom <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </FrameLayout> <include layout="@layout/bottom"/> </LinearLayout> Fragment 一定import android.support.v4.app.Fragment; public class HomeFragment extends Fragment{ public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ View view= inflater.inflate(R.layout.frag_home, container, false); return view; } } MainActivity public class MainActivity extends AppCompatActivity implements View.OnClickListener { private HomeFragment homeFragment; private MallFragment mallFragment; private MessageFragment messageFragment; private UserFragment userFragment; private LinearLayout home; private LinearLayout mall; private LinearLayout message; private LinearLayout user; private ImageView iv_home; private ImageView iv_mall; private ImageView iv_message; private ImageView iv_user; private FragmentTransaction ftr;//对Fragment进行管理 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE);//去除标题栏 /* getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);//全屏显示*/ setContentView(R.layout.activity_main); initView(); initEvent(); // 第一次启动时选中第0个 setSelection(0); } private void initView() { //获得底部的线性布局按钮组 home=(LinearLayout)findViewById(R.id.home); mall=(LinearLayout)findViewById(R.id.mall); message=(LinearLayout)findViewById(R.id.message); user=(LinearLayout)findViewById(R.id.user); //按钮组中的icon iv_home=(ImageView)findViewById(R.id.iv_home); iv_mall=(ImageView)findViewById(R.id.iv_mall); iv_message=(ImageView)findViewById(R.id.iv_message); iv_user=(ImageView)findViewById(R.id.iv_user); } private void initEvent() { //设定点击事件 home.setOnClickListener(this); mall.setOnClickListener(this); message.setOnClickListener(this); user.setOnClickListener(this); } // 当点击不同的tab按钮,切换页面 @Override public void onClick(View v) { switch (v.getId()) { case R.id.home: setSelection(0); break; case R.id.mall: setSelection(1); break; case R.id.message: setSelection(2); break; case R.id.user: setSelection(3); break; default: break; } } private void setSelection(int i){ //获取事务 FragmentManager fm = getSupportFragmentManager(); ftr = fm.beginTransaction();//开启一个事务 hideTransaction(ftr);//自定义一个方法,来隐藏所有的fragment switch(i) { case 0: if (homeFragment == null) { //实例化每一个fragment homeFragment = new HomeFragment(); //千万别忘记将该fragment加入到ftr中,填充到mainactivity的FrameLayout中 ftr.add(R.id.content, homeFragment); } //如果不为空,则直接将它显示出来 ftr.show(homeFragment); iv_home.setImageResource(R.drawable.main_home);//icon亮色 iv_mall.setImageResource(R.drawable.main_mall_gray);//icon暗色 iv_message.setImageResource(R.drawable.main_message_gray); iv_user.setImageResource(R.drawable.main_user_gray); break; case 1: if (mallFragment == null) { mallFragment = new MallFragment(); ftr.add(R.id.content, mallFragment); } ftr.show(mallFragment); iv_mall.setImageResource(R.drawable.main_mall);//icon亮色 iv_home.setImageResource(R.drawable.main_home_gray); iv_message.setImageResource(R.drawable.main_message_gray); iv_user.setImageResource(R.drawable.main_user_gray); break; case 2: if (messageFragment== null) { messageFragment=new MessageFragment(); ftr.add(R.id.content, messageFragment); } ftr.show(messageFragment); iv_message.setImageResource(R.drawable.main_message);//icon亮色 iv_home.setImageResource(R.drawable.main_home_gray); iv_mall.setImageResource(R.drawable.main_mall_gray); iv_user.setImageResource(R.drawable.main_user_gray); break; case 3: if (userFragment == null) { userFragment = new UserFragment(); ftr.add(R.id.content, userFragment); } ftr.show(userFragment); iv_user.setImageResource(R.drawable.main_user);//icon亮色 iv_home.setImageResource(R.drawable.main_home_gray); iv_mall.setImageResource(R.drawable.main_mall_gray); iv_message.setImageResource(R.drawable.main_message_gray); break; } ftr.commit();//最后提交事务 } //隐藏fragment private void hideTransaction(FragmentTransaction ftr) { if(homeFragment != null){ ftr.hide(homeFragment);//隐藏该fragment } if(mallFragment != null){ ftr.hide(mallFragment);//隐藏该fragment } if(messageFragment != null){ ftr.hide(messageFragment);//隐藏该fragment } if(userFragment != null){ ftr.hide(userFragment);//隐藏该fragment } } }