Android のフラグメント集中トーク - 下部ナビゲーション バー + ViewPager スワイプでページを切り替える

情報 2023-07-02 03:44:09 訪問数: null

最初の 3 つのセクションでは、通常の下部ナビゲーション バーの効果を実現するためにさまざまな方法を使用しましたが、このセクションでは、2 番目の例に基づいて ViewPager を追加して、スライドしてページを切り替える効果を実現します。私の友人のほとんどは、この ViewPager が何であるかを知っています。知らなくても問題ありません。このコントロールを簡単に紹介しましょう。

1. ViewPager の概要

1) どのような制御ですか?

回答: ページ切り替えコンポーネントです。複数のビューを入力し、タッチ スクリーン上で左右にスライドすることで、異なるビュー間を切り替えることができます。前に学習した ListView と同様に、Adapter (アダプター)、View が必要です。表示され、ViewPager がバインドされており、ViewPager には独自の固有のアダプター - ページャーアダプターがあります。さらに、Google は、Fragment を使用して ViewPager を埋めることを公式に推奨しています。これにより、各ページの生成と各ページのライフ サイクルの管理がより便利になります! もちろん、FragmentPageAdapter と FragmentStatePagerAdapter という 2 つの異なるアダプターが提供さ れます。！このセクションで使用するのは前者の FragmentPageAdapter です。もう 1 つ言及すべき点は、ViewPager のキャッシュ メカニズムです。ViewPager は現在のページ、前のページ、次のページをキャッシュします。たとえば、1、2、3、4 の 4 つのページがあります。最初のページにいるとき: キャッシュ 1、2
——> 2 ページ目: キャッシュ 1、2、3
——> 3 ページ目: キャッシュ 2、3、4 ——> 4 ページ目: キャッシュ 3、4 など。

2) PagerAdapter を使用して関連メソッドを書き換えます。

  • getCount( ) : ビューページャーにあるビューの数を取得します。
  • destroyItem( ) : 指定された場所にあるページを削除します。このビューをコンテナから削除するのはアダプタの責任です。これは、finishUpdate(viewGroup) が返されたときにビューが確実に削除されるようにするためです。
  • instantiateItem( ) : ① 指定された位置のビューを ViewGroup (コンテナ) に追加し、作成して表示します。 ② 新しく追加されたページを表すオブジェクト (キー) を返します。通常はビュー自体を直接返すだけですが、もちろん可能です独自のキーをカスタマイズできますが、キーと各ビューの間には 1 対 1 の対応が必要です。
  • isViewFromObject (): instantiateItem(ViewGroup, int) 関数によって返されたキーとページ ビューが同じビューを表すかどうか (つまり、それらが互いに対応し、同じビューを表すかどうか) を判断します。通常は return view = と直接記述します。 = object; 以上です。なぜこれが複雑かについては、後で理解する機会があります。ViewPager にはビューステートの情報を格納する ArrayList があり、View! に従って対応する情報を取得するようです。

PS:すべてのメソッドを書き直す必要はありません~

2. エフェクト図とプロジェクトのディレクトリ構造を確認します。

まず達成したい効果を見てみましょう。

プロジェクトの構造を見てみましょう。

3. コードの実装:

ステップ 1: 関連するリソース ファイルの準備:

PS: 下部ナビゲーションバーの方法 2 を実現することをベースに作成したので、リソース ファイルをコピーできます。ここでは何度も載せませんよ～！

ステップ 2: activity_main.xml のレイアウト ファイルを作成します。

PS: 以前の FrameLayout を android.support.v4.view.ViewPager に置き換えるだけです。

activity_mian.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" layout_height="match_parent" 
            android:layout_centerInParent="true"
            android:gravity="center" 
            android:text="提醒" 
            android:textColor="@color/text_topbar" 
            android:textSize="18sp" /> 

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

    </RelativeLayout> 


    <RadioGroup 
        android:id="@+id/rg_tab_bar" 
        android:layout_width="match_parent" 
        android:layout_height="56dp" 
        android:layout_alignParentBottom="true" 
        android :背景="@color/bg_white" 
        android:orientation="horizo​​ntal">

        <RadioButton 
            android:id="@+id/rb_channel" 
            style="@style/tab_menu_item" 
            android:drawableTop="@drawable/tab_menu_channel" 
            android:text="@string/tab_menu_alert" /> 

        <RadioButton 
            android:id=" @+id/rb_message" 
            style="@style/tab_menu_item" 
            android:drawableTop="@drawable/tab_menu_message" 
            android:text="@string/tab_menu_profile" /> 

        <RadioButton 
            android:id="@+id/rb_better"
            スタイル="@style/tab_menu_item"
            アンドロイド:drawableTop="@drawable/tab_menu_better" 
            android:text="@string/tab_menu_pay" />

        <RadioButtonレイアウト幅 = "親の一致" 
        android:layout_height = "親の一致"
            android:id="@+id/rb_setting" 
            style="@style/tab_menu_item" 
            android:drawableTop="@drawable/tab_menu_setting" 
            android:text="@string/tab_menu_setting" /> 

    </RadioGroup> 

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

    <android.support.v4 .view.ViewPager
        アンドロイド:id="@+id/vpager"
        アンドロイド:layout_width="match_parent" 
        android:layout_above="@id/div_tab_bar" 
        android:layout_below="@id/ly_top_bar" />


</RelativeLayout>

ステップ 3: フラグメントのレイアウトとコードを作成します。

PS: ちなみに、ViewPager の仕組みを説明するために、ここでは 4 つの Fragment を特別に記述しています。作成したものを印刷します。CreateView にログインしてください。

fg_content.xml:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height ="match_parent" 
    android:background="@color/bg_white" 
    android:orientation="vertical"> 

    <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>

MyFragment1.java :

/** 
 * 2015/8/28 0028 に Jay によって作成されました。
 */ 
public class MyFragment1 extends Fragment { 

    public MyFragment1() { 
    } 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle SavedInstanceState) { 
        View view = inflater. inflate(R.layout.fg_content, コンテナ, false); 
        TextView txt_content = (TextView) view.findViewById(R.id.txt_content); 
        txt_content.setText("第一フラグメント"); 
        Log.e("へへ", "1日狗"); 
        ビューを返す。
    } 
}

残りの 3 つはひょうたんのようなものです。何かを変更してください。

ステップ 4: FragmentPagerAdapter クラスをカスタマイズします。

コードは非常にシンプルで、FragmentManager を渡すだけで、他のすべてがここで行われます。

/** 
 * 2015/8/31 0031 に Jay によって作成されました。 
 */ 
public class MyFragmentPagerAdapter extends FragmentPagerAdapter { 

    private Final int PAGER_COUNT = 4; 
    プライベート MyFragment1 myFragment1 = null; 
    プライベート MyFragment2 myFragment2 = null; 
    プライベート MyFragment3 myFragment3 = null; 
    プライベート MyFragment4 myFragment4 = null; 


    public MyFragmentPagerAdapter(FragmentManager fm) { 
        super(fm); 
        myFragment1 = 新しい MyFragment1(); 
        myFragment2 = 新しい MyFragment2(); 
        myFragment3 = 新しい MyFragment3(); 
        myFragment4 = 新しい MyFragment4(); 
    @


    オーバーライド
    public int getCount() {
        PAGER_COUNT を返します。
                壊す;

    @Override 
    public Object instantiateItem(ViewGroup vg, int Position) { 
        return super.instantiateItem(vg,position) 
    ; 
    @Override 
    public void destroyItem(ViewGroup コンテナ, int 位置, Object オブジェクト) { System.out.println( 

    " 
        position Destory" + Position); 
        super.destroyItem(コンテナ, 位置, オブジェクト); 
    @Override 
    public Fragment getItem(int Position) {
    フラグメント
        フラグメント = null; 
        switch (位置) { 
            case MainActivity.PAGE_ONE:
                フラグメント = myFragment1; 

            MainActivity.PAGE_TWO の場合:
                フラグメント = myFragment2; 
                壊す; 
            MainActivity.PAGE_THREE の場合:
                フラグメント = myFragment3; 
                壊す; 
            ケース MainActivity.PAGE_FOUR:
                フラグメント = myFragment4; 
                壊す; 
        フラグメントを返します
        。
    } 

}

ステップ 5: MainActivity の作成:

ロジックは非常に簡単ですので、ご自身の目で確認してください~

MainActivity.java:

パッケージcom.jay.fragmentdemo4; 

android.os.Bundle をインポートします。
android.support.v4.view.ViewPagerをインポートします。
android.support.v7.app.AppCompatActivityをインポートします。
android.widget.RadioButtonをインポートします。
android.widget.RadioGroupをインポートします。
android.widget.TextViewをインポートします。


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

    //UI Objects 
    private TextView txt_topbar; 
    プライベート RadioGroup rg_tab_bar; 
    プライベートラジオボタン rb_channel; 
    プライベートラジオボタン rb_message;
    プライベートラジオボタン rb_better;
    プライベートラジオボタン rb_setting; 
    プライベート ViewPager vpager; 

    プライベート MyFragmentPagerAdapter mAdapter; 

    //页面を代表する常量
    public static Final int PAGE_ONE = 0; 
    パブリック静的最終整数PAGE_TWO = 1; 
    パブリック静的最終整数PAGE_THREE = 2; 
    パブリック静的最終整数PAGE_FOUR = 3; 


    @Override 
    protected void onCreate(Bundle SavedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
        mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager()); 
        バインドビュー(); 
        rb_channel.setChecked(true); 
    プライベート

    private void bindingViews() {
    オーバーライド
        txt_topbar = (TextView) findViewById(R.id.txt_topbar); 
        rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar); 
        rb_channel = (ラジオボタン) findViewById(R.id.rb_channel); 
        rb_message = (ラジオボタン) findViewById(R.id.rb_message); 
        rb_better = (ラジオボタン) findViewById(R.id.rb_better); 
        rb_setting = (ラジオボタン) findViewById(R.id.rb_setting); 
        rg_tab_bar.setOnCheckedChangeListener(this); 

        vpager = (ViewPager) findViewById(R.id.vpager); 
        vpager.setAdapter(mAdapter); 
        vpager.setCurrentItem(0); 
        vpager.addOnPageChangeListener(this); 
    public 

    void onCheckedChanged(RadioGroup group, int selectedId) { 
        switch (checkedId) { 
            case R.id.rb_channel: 
                vpager.setCurrentItem(PAGE_ONE); 
                壊す; 
            case R.id.rb_message: 
                vpager.setCurrentItem(PAGE_TWO); 
                壊す; 
            case R.id.rb_better: 
                vpager.setCurrentItem(PAGE_THREE); 
                壊す; 
            case R.id.rb_setting: 
                vpager.setCurrentItem(PAGE_FOUR); 
                壊す; 
        } 
    } 


    // 重写ViewPager页面切り替えの処理方法
    @Override
    public void onPageScrolled(int Position, float PositionOffset, int PositionOffsetPixels) { 
    } 

    @Override
    public void onPageSelected(int Position) { 
    } 

    @Override 
    public void onPageScrollStateChanged(int state) { 
        //3 つの状態があり、0 は何も行われていないことを意味し、1 はスライド中、2 はスライド中
        if (state == 2) { 
            switch ( vpager.getCurrentItem()) { 
                case PAGE_ONE: 
                    rb_channel.setChecked(true);
                    ブレーク; 
                case PAGE_TWO: 
                    rb_message.setChecked(true);
                    ブレーク; 
                case PAGE_THREE: 
                    rb_setting.setChecked(true);
                    ブレーク; 
                    rb_better. setChecked(true);
                    壊す; 
                ケース ページ_4: 
            } 
        } 
} 
    }

PS: ああ、上にパッケージのインポート部分のコードも投稿しました。間違ったパッケージをインポートすると、不可解なエラーが表示されるのではないかと心配しているからです。ViewPager は v4 パッケージの下にあるため、Fragment、FragmentManager、および FragmentTransaction はすべて V4 パッケージを使用する必要があります。なお、FragmentManagerを取得する方法は、getFragmentManager()を直接使うのではなく、getSupportFragmentManager()を使うことです！

注: ViewPager が RadioButton の後ろに配置されている場合、RadioButton のクリック イベントは無効になります。

おすすめ

転載: blog.csdn.net/leyang0910/article/details/131453751
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
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)
2024-05-03(8)

コードワールド

© 2018 codetd.com