Fragment实现页面切换
先看效果
- 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
}
}
}