在实现这个功能的过程中,走了很多的弯路,也花费了较长的时间,作为一个新手,实现这个功能的过程中,分了几个步骤进行尝试,首先是会使用fragment,这个见另一篇博文:了解与使用fragment,链接:https://blog.csdn.net/lz050116/article/details/107191940,然后是了解hide()
、add()
、replace()
、show()
等方法的使用,最后写相应的逻辑,实现底部导航菜单栏的切换。
1.编写fragment的布局文件
我写了两个布局文件,分别为fragment_apps
和fragment_me
。
1.1布局文件—fragment_apps.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/fragment_apps"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.FragmentApps">
<!-- TODO: Update blank fragment layout -->
<!-- 辅助线 -->
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline_left"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintGuide_begin="24dp"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline_right"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintGuide_end="24dp"/>
<!-- 图标 产品管理 -->
<com.christieli.automaintenancemanagement.view.IconView
android:id="@+id/product_manager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/product"
android:textSize="@dimen/text_size_icon_large"
android:textColor="@color/poolblue"
android:paddingTop="@dimen/margin_middle"
app:layout_constraintLeft_toLeftOf="@id/guideline_left"
tools:ignore="MissingConstraints"/>
<TextView
android:id="@+id/product_manager_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="产品管理"
android:textSize="@dimen/text_size_min"
android:textColor="@color/colorTextBlack"
android:layout_marginTop="@dimen/margin_min"
app:layout_constraintLeft_toLeftOf="@+id/product_manager"
app:layout_constraintRight_toRightOf="@+id/product_manager"
app:layout_constraintTop_toBottomOf="@+id/product_manager"
tools:ignore="DuplicateIds"/>
</androidx.constraintlayout.widget.ConstraintLayout>
注:我的布局文件中一共有8个类似于product_manager
的图标
1.2布局文件—fragment_me.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/fragment_me"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:gravity="top|center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.FragmentMe">
<!-- 顶部基础信息栏 -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/me_information"
android:layout_width="match_parent"
android:layout_height="96dp"
android:background="@color/colorPrimary"
tools:ignore="MissingConstraints">
<ImageView
android:id="@+id/me_image"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="@color/line"
app:layout_constraintLeft_toLeftOf="@+id/me_information"
app:layout_constraintTop_toTopOf="@+id/me_information"
android:layout_marginLeft="24dp"
android:layout_marginTop="24dp"
android:contentDescription="@string/arrows_right_icon"/>
</LinearLayout>
注:还有一些其他的组件,不一一列出
1.2布局文件—activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include layout="@layout/title_bar"/>
<include layout="@layout/tool_bar"/>
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/title_bar"
android:name="com.christieli.automaintenancemanagement.activity.FragmentApps"
tools:ignore="MissingConstraints"/>
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/title_bar"
tools:ignore="MissingConstraints"/>
</androidx.constraintlayout.widget.ConstraintLayout>
2.编写FragmentApps.java和FragmentMe.java
两个文件是一致的,故我只列出其中一个:
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.christieli.automaintenancemanagement.R;
public class FragmentApps extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_apps, container, false);
}
}
3.更改MainActivity.java
MainActivity.java
代码如下:
import android.view.View;
import android.os.Bundle;
import android.widget.TextView;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import com.christieli.automaintenancemanagement.activity.FragmentApps;
import com.christieli.automaintenancemanagement.activity.FragmentMe;
import com.christieli.automaintenancemanagement.view.IconView;
public class MainActivity extends FragmentActivity implements View.OnClickListener {
private Fragment mFragmentApps;
private Fragment mFragmentMe;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mFragmentApps = new FragmentApps();
// getSupportFragmentManager():获取Fragment的管理对象
// beginTransaction():开始一个事务
// add():加入一个事务,将fragment加入到对应的位置
// commit():提交
getSupportFragmentManager().beginTransaction().add(R.id.fragment_container, mFragmentApps).commit();
IconView appsIcon = findViewById(R.id.apps_icon);
TextView appsText = findViewById(R.id.apps_text);
IconView meIcon = findViewById(R.id.me_icon);
TextView meText = findViewById(R.id.me_text);
appsIcon.setOnClickListener(this);
appsText.setOnClickListener(this);
meIcon.setOnClickListener(this);
meText.setOnClickListener(this);
}
public void onClick(View v) {
// 隐藏所有Fragment
hideAllFragment();
switch (v.getId()) {
// 点击图标显示对应的Fragment
case R.id.apps_icon:
case R.id.apps_text:
if (mFragmentApps == null) {
mFragmentApps = new FragmentApps();
getSupportFragmentManager().beginTransaction().add(R.id.fragment_container, mFragmentApps).commit();
} else {
getSupportFragmentManager().beginTransaction().show(mFragmentApps).commit();
}
break;
case R.id.me_icon:
case R.id.me_text:
if (mFragmentMe == null) {
mFragmentMe = new FragmentMe();
getSupportFragmentManager().beginTransaction().add(R.id.fragment_container, mFragmentMe).commit();
} else {
getSupportFragmentManager().beginTransaction().show(mFragmentMe).commit();
}
break;
default:
break;
}
}
// 隐藏所有Fragment
private void hideAllFragment() {
if (mFragmentApps != null) {
// hide():隐藏fragment
getSupportFragmentManager().beginTransaction().hide(mFragmentApps).commit();
}
if (mFragmentMe != null) {
getSupportFragmentManager().beginTransaction().hide(mFragmentMe).commit();
}
}
}
4.实现效果
5.注意事项
5.1 fragment != null
与!fragment.isHiden()
的判断区别
要注意在判断是否隐藏fragment时,使用上述的哪个判断条件,若使用!fragment.isHiden()
,要确认前面已经new
了fragment对象,否则会出现异常,建议此时直接使用fragment != null
。