Android のフラグメント集中 - 下部ナビゲーション バーの実装 (方法 1)

情報 2023-07-02 03:45:41 訪問数: null

このセクションの概要:

前のセクションでは、Fragment について予備的に理解し、概念、ライフサイクル、Fragment の管理と Fragment の事柄、および動的および静的にロードされる Fragment について学びました。ここからは実際の開発におけるFragmentの例をいくつか解説していきます！このセクションでは、下部ナビゲーション バーの実現について説明します。基本的な下部ナビゲーション バーには、TextView を使用する、RadioButton を使用する、TabLayout + RadioButton を使用するなど、さまざまな方法がありますが、複雑な状況では、やはり外側のレイヤー レイアウト方法を使用する必要があります。このセクションでは、TextView を使用して下部ナビゲーション バーの効果を作成します。また、Fragment! の使用にも慣れています。さて、このセクションを始めましょう!

1. 実現する効果図とプロジェクトのディレクトリ構造：

まずレンダリングを見てみましょう。

次に、プロジェクトのディレクトリ構造を確認します。

2. 導入プロセス:

ステップ 1: 下部のオプションのリソース ファイルをいくつか書き留めます。

画像から、下部にある各アイテムをクリックすると異なる効果があることがわかりますよね? 選ばれるかどうかで判断します！私たちが書きたいリソース ファイルは次のとおりです。最初に画像、次にテキスト、そして背景です。

画像描画リソース: tab_menu_channel.xml

<?xml version="1.0"coding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@mipmap /tab_channel_pressed" android:state_selected="true" /> 
    <item android:drawable="@mipmap/tab_channel_normal" /> 
</selector>

他の3人もそれに続きました！

テキストリソース: tab_menu_text.xml

<?xml version="1.0"coding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:color="@color /text_ yellow" android:state_selected="true" /> 
    <item android:color="@color/text_gray" /> 
</selector>

バックグラウンドリソース: tab_menu_bg.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_selected="true" > 
        <shape> 
            <solid android:color="#FFC4C4C4" /> 
        </shape> 
    </item> 
    <item> 
        <shape> 
            <solid android:color="@color/transparent" /> 
        </shape> 
    </アイテム> 
</セレクター>

ステップ 2: アクティビティ レイアウトを作成する

activity_main.xml:

<RelativeLayout 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=".MainActivity"> 

    <RelativeLayout 
        android:id="@+id/ly_top_bar" 
        android:layout_width="match_parent" 
        android:layout_height="48dp" 
        android:background="@color/bg_topbar" > 

        <TextView 
            android:id="@+id/txt_topbar" 
            android:layout_width="match_parent" 
            android:layout_height="match_parent" 
            android:layout_centerInParent="true"
            android:gravity="center"layout_alignParentBottom="true" 
        android:background="@color/bg_white"
            android:textSize="18sp" 
            android:textColor="@color/text_topbar" 
            android:text="情報"/> 


        <View 
            android:layout_width="match_parent" 
            android:layout_height="2px" 
            android:background="@color/ div_white" 
            android:layout_alignParentBottom="true"/> 

    </RelativeLayout> 



    <LinearLayout 
        android:id="@+id/ly_tab_bar" 
        android:layout_width="match_parent" 
        android:layout_height="56dp" 
        android:layout_alignParentBottom="true" 
        android :orientation="horizo​​ntal"> 

        <TextView 
            android:id="@+id/txt_channel"
            android:layout_width="0dp" 
            android:layout_height="match_parent" 
            android:layout_weight="1" 
            android:background="@drawable/tab_menu_bg" 
            android:drawablePadding="3dp" 
            android:drawableTop="@drawable/tab_menu_channel"
            アンドロイド: gravity="center" 
            android:padding="5dp" 
            android:text="@string/tab_menu_alert" 
            android:textColor="@drawable/tab_menu_text" 
            android:textSize="16sp" /> 

        <TextView 
            android:id="@+id/txt_message"  
            android:layout_width="0dp"
            android:layout_height="match_parent" 
            android:layout_weight="1"
            android:background="@drawable/tab_menu_bg" 
            android:drawablePadding="3dp" 
            android:drawableTop="@drawable/tab_menu_message" 
            android:gravity="center" 
            android:padding="5dp" 
            android:text="@string/tab_menu_profile " 
            android:textColor="@drawable/tab_menu_text" 
            android:textSize="16sp" /> 

        <TextView 
            android:id="@+id/txt_better" 
            android:layout_width="0dp" 
            android:layout_height="match_parent" 
            android:layout_weight="1"  
            android:background="@drawable/tab_menu_bg"
            android:drawablePadding="3dp" 
            android:drawableTop="@drawable/tab_menu_better" 
            android:gravity="center" 
            android:padding="5dp" 
            android:text="@string/tab_menu_pay" 
            android:textColor="@drawable/tab_menu_text" 
            android:textSize="16sp" /> 

        <TextView 
            android:id="@+id/txt_setting" 
            android:layout_width="0dp" 
            android:layout_height="match_parent" 
            android:layout_weight="1" 
            android:background="@drawable/tab_menu_bg" 
            android:drawablePadding="3dp 「
            アンドロイド:drawableTop="@drawable/tab_menu_setting" 
            android:gravity="center"
            アンドロイド:パディング = "5dp" 
            android:text = "@string/tab_menu_setting" 
            android:textColor="@drawable/tab_menu_text" 
            android:textSize="16sp"/> 

    </LinearLayout> 

    <View 
        android:id="@+id/div_tab_bar" 
        android:layout_width="match_parent" 
        android:layout_height="2px" 
        android:background="@color/div_white" 
        android:layout_above="@id/ly_tab_bar"/> 


    <FrameLayout 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_below=" @id/ly_top_bar"
        アンドロイド:layout_above="@id/div_tab_bar" 
        android:id="@+id/ly_content"> 

    </FrameLayout>
 
</RelativeLayout>

コード分​​析:

まず上部のタイトル バーのスタイルを定義し、48dp LinearLayout の中央に TextView をタイトルとして追加します。
次に、下部にサイズ 56 dp の LinerLayout を定義し、その中に 1:1:1:1 の比率で 4 つの TextView を追加し、関連するプロパティを設定して、この LinearLayout に線分を追加します。
最後に、タイトル バーと下部のナビゲーション バーを境界線として、FrameLayout、幅と高さの match_parent を記述し、Fragment コンテナーとして使用します。

PS:ここでは 4 つの TextView プロパティが繰り返されていますが、自分で抽出してスタイルを記述し、設定することもできます~

ステップ 3: 上部のナビゲーション バーを非表示にする

Activity ; 内の前回の呼び出しrequestWindowFeature(Window.FEATURE_NO_TITLE) が携帯電話の上部ナビゲーション バーを非表示にできることを偶然発見しましたが、デモを書いているときに、この文が setContentView より前に書かれていてもエラーが報告されることがわかりました。 （）！これは、Activity クラスではなく AppCompatActivity が継承されていることが原因である可能性があります。
もちろん、前の getSupportActionbar().hide() はアクションバーを非表示にしますが、インターフェイス上にはそのまま残ります。最後に、自分でスタイルを記述し、AndroidManifest.xml でアプリケーションのテーマを設定する別の方法もあります。

注: エラーを報告せずに ActionBar を非表示にするには、requestWindowFeature(Window.FEATURE_NO_TITLE); を super.onCreate(savedInstanceState); の前に置きます。

次に、AndroidManifest.xmlでテーマ属性を設定します。

android:theme="@style/Theme.AppCompat.NoActionBar"

追伸:上記の「良心の規範」は優れたプログラマーの曹申氏によって後援されています~

ステップ 4: 単純なレイアウトとフラグメントのクラスを作成します。

fg_content.xml:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" android:layout_width ="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/bg_white"> 
    
    <TextView 
        android:id="@+id/txt_content" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android :gravity="center" 
        android:text="呵呵" 
        android:textColor="@color/text_ yellow"
        アンドロイド:textSize="20sp"/> 

</LinearLayout>

MyFragment.java:

/** 
 * 2015/8/28 0028 に Coder-pig によって作成されました。 
 */ 
public class MyFragment extends Fragment { 

    private String content; 
    public MyFragment(String content) { 
        this.content = content; 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup コンテナ, Bundle SavedInstanceState) { View view = 

    inflater.inflate 
        (R.layout.fg_content,container,false); 
        TextView txt_content = (TextView) view.findViewById(R.id.txt_content); 
        txt_content.setText(コンテンツ); 
        ビューを返す。
    } 
}

コード分​​析:

onCreateView() メソッドを書き換えるだけであり、必要に応じて他のメソッドも書き換えることができます。

ステップ 5: MainActivity.java を作成する

考慮する必要がある重要な質問のいくつかから始めましょう。

  • フラグメントはいつ初期化され、コンテナに追加されますか? いつ非表示にして表示するか?
  • TextViewを選択状態にするにはどうすればよいでしょうか？TextView を選択した後はどうすればよいでしょうか?
  • MainActivityに入った直後にTextViewをSelected状態にする方法は?

それでは、上記の質問に 1 つずつ答えてみましょう。

  • TextViewを選択した後、対応するFragmentが空であると判断し、空の場合は初期化してコンテナに追加し、Hideの場合はFragmentをすべて非表示にするメソッドを定義し、クリックするたびにHideAllメソッドを呼び出します。すべてのフラグメントが非表示になり、TextView に対応するフラグメントが空でない場合は、このフラグメントが表示されます。
  • TextView をクリックした後、まずすべての TextView の選択状態を false にリセットし、次にクリックされた TextView の選択状態を true に設定します。
  • これはより簡単で、クリック イベントを通じて選択を設定するため、onCreate() メソッド ~  txt_channel.performClick();にクリック イベントをトリガーするメソッドを追加するだけで十分です。

ロジックは理解できたので、コードに直接進みましょう。

MainActivity.java :

/** 
 * 2015/8/28 0028 に Coder-pig によって作成されました。
 */ 
public class MainActivity extends AppCompatActivityimplements View.OnClickListener{ 

    //UI Object 
    private TextView txt_topbar; 
    プライベート TextView txt_channel; 
    プライベート TextView txt_message; 
    プライベート TextView txt_better; 
    プライベート TextView txt_setting; 
    プライベート FrameLayout ly_content; 

    //フラグメントオブジェクト
    private MyFragment fg1,fg2,fg3,fg4; 
    プライベート FragmentManager fManager; 

    @Override 
    protected void onCreate(Bundle SavedInstanceState) { 
        super.onCreate(savedInstanceState); 
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main); 
        fManager = getFragmentManager(); 
        bindingViews(); 
        txt_channel.performClick(); //クリックをシミュレートし、入力後の最初の項目を選択します
    } 

    //UI コンポーネントの初期化とイベント バインディング
    private void bindingViews( ) { 
        txt_topbar = (TextView) findViewById(R.id.txt_topbar); 
        txt_channel = (TextView) findViewById(R.id.txt_channel); 
        txt_message = (TextView) findViewById(R.id.txt_message); 
        txt_better = (TextView ) findViewById (R.id.txt_better); 
        txt_setting = (TextView) findViewById(R.id.txt_setting); 
        ly_content = (FrameLayout) findViewById(R.id.ly_content); 

        txt_channel.setOnClickListener(this);
        txt_message.setOnClickListener(this); 
        txt_better.setOnClickListener(this); 
        txt_setting.setOnClickListener(this); 
    } 

    // すべての文章の選択中状態を再配置します
    private void setSelected(){ 
        txt_channel.setSelected(false); 
        txt_message.setSelected(false); 
        txt_better.setSelected(false); 
        txt_setting.setSelected(false); 
    } 

    //隐藏すべてFragment 
    private void HideAllFragment(FragmentTransaction flagmentTransaction){ 
        if(fg1 != null)fragmentTransaction.hide(fg1); 
        if(fg2 != null)fragmentTransaction.hide(fg2); 
        if(fg3 != null)fragmentTransaction.hide(fg3);
        if(fg4 != null)fragmentTransaction.hide(fg4); 
    @Override 
    public void onClick(View v) { 
        FragmentTransaction fTransaction = fManager.beginTransaction() 


    ; 
        HideAllFragment(fTransaction); 
        switch (v.getId()){ 
            case R.id.txt_channel: 
                setSelected(); 
                txt_channel.setSelected(true); 
                if(fg1 == null){ 
                    fg1 = new MyFragment("第一个Fragment"); 
                    fTransaction.add(R.id.ly_content,fg1); 
                }else{ 
                    fTransaction.show(fg1); 
                休憩
                ;
            case R.id.txt_message: 
                setSelected(); 
                txt_message.setSelected(true); 
                if(fg2 == null){ 
                    fg2 = new MyFragment("第二个フラグメント"); 
                    fTransaction.add(R.id.ly_content,fg2); 
                }else{ 
                    fTransaction.show(fg2); 
                休憩
                ; 
            ケース R.id.txt_better: 
                setSelected(); 
                txt_better.setSelected(true); 
                if(fg3 == null){ 
                    fg3 = new MyFragment("第三个フラグメント"); 
                    fTransaction.add(R.id.ly_content,fg3);
                }else{ 
                    fTransaction.show(fg3); 
                休憩
                ; 
            case R.id.txt_setting: 
                setSelected(); 
                txt_setting.setSelected(true); 
                if(fg4 == null){ 
                    fg4 = new MyFragment("第四フラグメント"); 
                    fTransaction.add(R.id.ly_content,fg4); 
                }else{ 
                    fTransaction.show(fg4); 
                休憩
                ; 
        fTransaction.commit 
        (); 
    } 
}

おすすめ

転載: blog.csdn.net/leyang0910/article/details/131449537
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com