android 中的 Fragment 很像 react 中的组件,只不过 react 中的组件既是页面,而 android 中页面是 Activity ,而 “Fragment组件” 只能在 Activity 中使用。
图中的生命周期很容易理解,既然 Fragment 是“镶嵌”到 Activity 中的,那么肯定是先创建 Activity 中的其他“组件”,然后再创建自身;销毁就是先销毁其他,然后再销毁自己。
下面我使用下面的效果:
代码很简单,主要看布局文件即可,因为静态加载只要布局文件中使用即可:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/fragmentId"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/linearLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/bgColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<!-- 微信 -->
<LinearLayout
android:id="@+id/wx"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClickTabItemWx"
android:orientation="vertical"
android:paddingVertical="10dp">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:src="@drawable/weixin"
app:tint="@color/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="微信" />
</LinearLayout>
<!-- 通讯录 -->
<LinearLayout
android:id="@+id/txl"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClickTabItemTxl"
android:orientation="vertical"
android:paddingVertical="10dp">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:src="@drawable/lianxiren"
app:tint="@color/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="通讯录" />
</LinearLayout>
<!-- 发现 -->
<LinearLayout
android:id="@+id/fx"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClickTabItemFx"
android:orientation="vertical"
android:paddingVertical="10dp">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:src="@drawable/faxian"
app:tint="@color/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="发现" />
</LinearLayout>
<!-- 我 -->
<LinearLayout
android:id="@+id/w"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClickTabItemW"
android:orientation="vertical"
android:paddingVertical="10dp">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:src="@drawable/wo"
app:tint="@color/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="我" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_txl.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
tools:context=".TxlFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="24dp"
android:text="通讯录" />
</FrameLayout>
MainActivity.java
package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
String LOG = "Activity";
FragmentManager fragmentManager;
WxFragment wxFragment = new WxFragment();
TxlFragment txlFragment = new TxlFragment();
FxFragment fxFragment = new FxFragment();
WFragment wFragment = new WFragment();
View preTabItem = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Log.e(LOG, "onCreate");
fragmentManager = getSupportFragmentManager();
defaultTabStyle();
}
private void replace(Fragment fragment) {
fragmentManager.beginTransaction()
.replace(R.id.fragmentId, fragment, null)
.setReorderingAllowed(true)
.addToBackStack("name") // name can be null
.commit();
}
// 点击微信
public void onClickTabItemWx(View v) {
onClickItem(v, wxFragment);
}
// 点击通讯录
public void onClickTabItemTxl(View v) {
onClickItem(v, txlFragment);
}
// 点击发现
public void onClickTabItemFx(View v) {
onClickItem(v, fxFragment);
}
// 点击我的
public void onClickTabItemW(View v) {
onClickItem(v, wFragment);
}
// 主要处理所有的点击事件,这样就不用写很多重复的代码了
public void onClickItem(View v, Fragment fragment) {
if (preTabItem != null) {
preTabItem.setBackgroundColor(getResources().getColor(R.color.bgColor));
}
v.setBackgroundColor(getResources().getColor(R.color.white));
replace(fragment);
preTabItem = v;
}
// 默认选中的tab标签页面
public void defaultTabStyle() {
replace(wxFragment);
LinearLayout layout = findViewById(R.id.wx);
layout.setBackgroundColor(getResources().getColor(R.color.white));
preTabItem = layout;
}
}
这个代码还可以减少,我主要说的是 activity_main.xml
这个布局文件,比如很多重复的代码。既然我们都说 Fragment 是一个组件,那么这部分同样可以封装。