現在、最も一般的なアプリのホームページのスタイルは、下部のタブと複数のフラグメントです。さまざまな方法で記述できます。基本的には、レイアウトにレイアウトを記述してから、アクティビティでクリック処理を行い、スタイルを切り替え、ページを切り替え、イベントを記録します。ちょっと待って。この操作を簡素化するために、ウェーブレットをカプセル化するための小さなコントロールが作成され、構成ファイルがこのモードを処理するために使用されました。
使い方
非常に簡単です。最初にレイアウトをレイアウトに追加し、container_idを使用してフラグメントのコンテナレイアウトを指定します。
<FrameLayout
android:id="@+id/flFragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/layoutBottomTab" />
<oms.mmc.tempapplication.HomeBottomTabLayout
android:id="@+id/layoutBottomTab"
android:layout_width="match_parent"
android:layout_height="58dp"
android:layout_alignParentBottom="true"
android:background="#e9e9e9"
app:container_id="@id/flFragmentContainer" />
次に、構成ファイルをアセットファイルに追加します tab.json
{
"tabs": [
{
"tabName": "黄历",
"tabTag": "key_almanac_fragment",
"iconNormal": "main_home_tab_huangli_normal",
"iconSelected": "main_home_tab_huangli_selected",
"textColorNormal": "#A4A3A3",
"textColorSelected": "#C02221"
},
{
"tabName": "工具",
"tabTag": "key_discover_fragment",
"iconNormal": "main_home_tab_tool_normal",
"iconSelected": "main_home_tab_tool_selected",
"textColorNormal": "#A4A3A3",
"textColorSelected": "#C02221"
},
{
"tabName": "福利",
"tabTag": "key_makemoney_money_fragment",
"iconNormal": "main_home_tab_money_normal",
"iconSelected": "main_home_tab_money_selected",
"textColorNormal": "#A4A3A3",
"textColorSelected": "#C02221"
}
]
}
このようにして、下部にあるtab + Fragmentのホームページスタイルを初期化できます。フラグメントを構成する方法は？
上記を見て、各タブにtagTagというフィールドを追加しました。そうです、このタグに基づいて、フラグメントを取得します。
したがって、3番目のステップは、アクティビティのコントロールで定義されたインターフェイスを実装し、フラグメントを取得する方法を実装することです。ここでは、前に構成したタグに従って1つずつ対応する必要があります。
@Override
public Fragment getFragmentByTag(@NotNull String tabTag) {
switch (tabTag) {
case TAG_HOME_ALMANAC:
return AlmanacService.getAlmanacFragment();
case TAG_HOME_CALENDAR:
return CalendarService.getCalendarFragment();
case TAG_HOME_TOOLS:
return DiscoverService.getDiscoverFragment();
case TAG_HOME_MONEY:
return MakeMoneyService.getMoneyFragment();
case TAG_HOME_USER_CENTER:
return UserService.getUserHomeMainFragment();
default:
return null;
}
}
この手順は基本的には問題なく、エフェクトとモード全体も問題ありません。次に、タブの切り替え時に他の特別な操作を行う必要がある場合は、どうすればよいですか。インターフェイスが外部に公開されている場合、このメソッドを実装するとonClickChangeTab()、イベントの報告やスタイルの変更などのアクションを実行できますので、ご安心ください。
実現原理
原理はとてもシンプルで、実はカプセル化です。レイアウトに書いてあるものと、アクティビティで判断して処理するものをここに置いて、使い勝手が良くて失礼な集中処理をしています。
ステップ1：構成を読む
アサートでファイルを読み取り、ストリームで読み取り、文字列に変換してから、このjson文字列に基づいて構成ファイルに変換します。
ステップ2：ビューを生成する
コード、画像+テキストによって直接生成され、重量で均等に分割され、クリックイベントが設定されます
ステップ3：クリックしてタブを切り替えます
ここでは、2つのステップがあります。1つはタブスタイルを切り替えること、もう1つはフラグメントを切り替えることです。ここで注意しなければならないのは、フラグメントの切り替えです。hideメソッドとshowメソッドを使用します。初めて追加する場合は、addメソッドを使用します。replaceメソッドを使用して切り替えることはできません。そうしないと、フラグメントが再構築され、すべてのライフサイクルを再起動する必要があります。再び。
private fun setFragmentSelected(selectedIndex: Int) {
val beginTransaction = mFragmentManager?.beginTransaction()
val tabConfig = mTabs?.get(selectedIndex)
var fragmentByTag = mFragmentManager?.findFragmentByTag(tabConfig?.tabTag)
val isFirstInit: Boolean
if (fragmentByTag == null) {
fragmentByTag = mCallback?.getFragmentByTag(tabConfig?.tabTag ?: "")
mFragmentList?.set(selectedIndex, fragmentByTag)
isFirstInit = true
} else {
isFirstInit = false
}
mFragmentList?.forEachIndexed { index, fragment ->
if (fragment != null && fragment.isAdded) {
beginTransaction?.hide(fragment)
}
}
if (isFirstInit) {
beginTransaction?.add(mFragmentContainerId, fragmentByTag!!, tabConfig?.tabTag)
} else {
beginTransaction?.show(fragmentByTag!!)
}
beginTransaction?.commit()
}
ステップ4：外部にいくつかの一般的な方法を提供する
現在のフラグメント、現在のインデックスなどを取得する方法がよく使用されるため、これらのメソッドは外部に公開されます。フラグメントリスト、ビューリスト、および現在のインデックスが維持されるため、これらのメソッドは対応する値を直接取得できます。
効果
どのように言って？アクティビティとレイアウトのコードの量ははるかに少なく、比較的簡単に使用できます。とにかく、とても香りがよいと思います。
構成ファイルを読み込んでレイアウトを設定しているため、確認に時間がかかります。基本的に、これらの操作は100ms以内に完了します。
