Android开发——实现微信界面的跳转功能——多个Fragment之间的跳转
程序员文章站
2022-06-10 14:53:01
...
实现微信界面的跳转功能——多个Fragment之间的跳转
实现原理
1、创建4个自定义Fragment类继承自Fragment，并且创建对应的布局文件，之后在Fragment类文件内部加载布局文件
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.layout_find_fragment,container,false);
}
2、在MainAcitvity的布局文件下创建一个FrameLayout用来加载Fragment
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
3、在MainActivity创建对应的4个自定义Fragment对象，并进行初始化
private ArrayList<Fragment> fragmentArrayList; //Fragment容器
private WechatFragment wechatFragment; //4个自定义Fragment
private FriendFragment friendFragment;
private FindFragment findFragment;
private MeFragment meFragment;
private void initFragment(){ //初始化Fragment
fragmentArrayList = new ArrayList<>();
wechatFragment = new WechatFragment();
friendFragment = new FriendFragment();
findFragment = new FindFragment();
meFragment = new MeFragment();
fragmentArrayList.add(wechatFragment);
fragmentArrayList.add(friendFragment);
fragmentArrayList.add(findFragment);
fragmentArrayList.add(meFragment);
getSupportFragmentManager() //设置默认的Fragment
.beginTransaction()
.add(R.id.id_content,fragmentArrayList.get(0)) // 此处的R.id.id_content是要盛放fragment的父容器
.commit();
setImgBtnPressIcon(0);
}
4、创建微信底部导航栏布局文件bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<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="65dp"
android:gravity="center"
android:orientation="horizontal"
android:background="#000"
android:paddingTop="10dp"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/im_wechat"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:scaleType="centerInside"
android:background="#000"
android:contentDescription="@string/app_name"
android:src="@drawable/wechat"
/>
<TextView
android:id="@+id/tv_wechat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="微信"
android:textAlignment="center"
android:layout_gravity="center"
android:textColor="#fff"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/im_friend"
android:layout_width="match_parent"
android:layout_height="35dp"
android:scaleType="centerInside"
android:background="#000"
android:contentDescription="@string/app_name"
android:src="@drawable/friend"
/>
<TextView
android:id="@+id/tv_friend"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="朋友"
android:textAlignment="center"
android:layout_gravity="center"
android:textColor="#fff"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/im_find"
android:layout_width="match_parent"
android:layout_height="35dp"
android:scaleType="centerInside"
android:background="#000"
android:contentDescription="@string/app_name"
android:src="@drawable/find"
/>
<TextView
android:id="@+id/tv_find"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="发现"
android:textAlignment="center"
android:layout_gravity="center"
android:textColor="#fff"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/im_me"
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="#000"
android:scaleType="centerInside"
android:contentDescription="@string/app_name"
android:src="@drawable/me"
/>
<TextView
android:id="@+id/tv_me"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="我"
android:textAlignment="center"
android:layout_gravity="center"
android:textColor="#fff"
/>
</LinearLayout>
</LinearLayout>
实现效果如下
之后在MainActivity布局文件下插入这个布局文件
<include layout="@layout/bottom"/>
5、实现点击按钮切换Fragment的界面效果
// 省略获取控件和设置控件监听器
@Override
public void onClick(View view) { //点击按钮改变Fragment
switch (view.getId()){
case R.id.im_wechat:
case R.id.tv_wechat:
changeFragment(0);
setImgBtnPressIcon(0);
break;
case R.id.im_friend:
case R.id.tv_friend:
changeFragment(1);
setImgBtnPressIcon(1);
break;
case R.id.im_find:
case R.id.tv_find:
changeFragment(2);
setImgBtnPressIcon(2);
break;
case R.id.im_me:
case R.id.tv_me:
changeFragment(3);
setImgBtnPressIcon(3);
break;
}
}
private void changeFragment(int fragmentIndex){
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.id_content,fragmentArrayList.get(fragmentIndex))
.commit();
}
/**
* 高亮显示选择的按钮图标和图标下方文字颜色
*/
private void setImgBtnPressIcon(int fragmentIndex){
//先重置所有图标，再高亮选择的图标
btn_wechat.setImageResource(R.drawable.wechat);
btn_friend.setImageResource(R.drawable.friend);
btn_find.setImageResource(R.drawable.find);
btn_me.setImageResource(R.drawable.me);
//先重置所有图标下面的文字，再高亮选择的图标下面的文字
tv_wechat.setTextColor(getResources().getColor(R.color.colorTvNormal));
tv_friend.setTextColor(getResources().getColor(R.color.colorTvNormal));
tv_find.setTextColor(getResources().getColor(R.color.colorTvNormal));
tv_me.setTextColor(getResources().getColor(R.color.colorTvNormal));
switch (fragmentIndex){ //高亮选择控件
case 0:
btn_wechat.setImageResource(R.drawable.wechat_press);
tv_wechat.setTextColor(getResources().getColor(R.color.colorTvPress));
break;
case 1:
btn_friend.setImageResource(R.drawable.friend_press);
tv_friend.setTextColor(getResources().getColor(R.color.colorTvPress));
break;
case 2:
btn_find.setImageResource(R.drawable.find_press);
tv_find.setTextColor(getResources().getColor(R.color.colorTvPress));
break;
case 3:
btn_me.setImageResource(R.drawable.me_press);
tv_me.setTextColor(getResources().getColor(R.color.colorTvPress));
break;
}
}