XUIフレームワークは、ページを切り替えるために独自のタブレイアウト(TabBarインジケーター)+ビューページを実装していますか?

XUIフレームワークに参加する方法がわからない場合は、ブログをご覧ください。XUIフレームワークに参加するプロセスはかなり詳細です。ご不明な点
がございましたら、お問い合わせください。それでも同じですが、結果が失敗する原因となる可能性のある他の要因を回避するために、テスト時に新しいページを作成するか、自分でプロジェクトを作成することをお勧めします。

最初のステップ:新しいフラグメントを作成します。

私は主にテストの役割を果たしているので、最も単純なBlankFragmentを使用してください。以下に示すように、それが見つからない場合。
ここに写真の説明を挿入
次の図では、作成時に赤い丸を配置しないでください。選択しても問題ありませんが、削除するのは面倒ですが、上記のチェックをキャンセルしないでください。その場合、xmlファイルはありません。
ここに写真の説明を挿入
次に、3つのページを使用してテストするため、3つのフラグメントを作成します。
図のコードを追加および削除し、
次のようにコードを追加します。

 @Override
    public void onActivityCreated(Bundle savedInstanceState) {
    
    
        super.onActivityCreated(savedInstanceState);
    }

ここに写真の説明を挿入
3ページで同じ操作ができたら、本編を行います。

ステップ2:ページ切り替え機能を実現します。

ステップ1:最初に次のコンポーネントをxmlファイルに追加します。

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

    <com.xuexiang.xui.widget.tabbar.EasyIndicator
        android:id="@+id/easy_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:indicator_bottom_line_color="#000000"
        app:indicator_height="60dp"
        app:indicator_line_color="#03DAC5"
        app:indicator_line_show="true"
        app:indicator_normal_color="#9C9C9C"
        app:indicator_select_textSize="16sp"
        app:indicator_selected_color="#03DAC5"
        app:indicator_textSize="14sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="60dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/easy_indicator">

    </androidx.viewpager.widget.ViewPager>

</androidx.constraintlayout.widget.ConstraintLayout>

ここに写真の説明を挿入
以下は、いくつかの主要な属性の役割です。主要なコンポーネントが記載されています。慣れていない場合は、公式Webサイトにアクセスして、詳細を確認できます。
ここに写真の説明を挿入
公式ウェブサイトのスクリーンショットを以下に添付します
ここに写真の説明を挿入
。自分で試してテストすることができます。
あなたが書いた属性にそれを置くこともできます、上記の属性の説明があります、最も重要なのは図に示されているように中国語版です。
ここに写真の説明を挿入

2番目のステップは、アクティビティコードを設定することです。

みんなの便宜のために、コードを分割せずに直接表現法を採用しました。
コードは次のように表示されます。

import android.os.Bundle;
import android.view.ViewGroup;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import com.xuexiang.xui.XUI;
import com.xuexiang.xui.widget.tabbar.EasyIndicator;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    
    
    private List<Fragment> list;
    private String[] tab={
    
    "注册","快捷登录","密码登录"};
    private FragmentManager manager;
    private MyFragmentPageAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        XUI.initTheme(this);
        setContentView(R.layout.activity_main);
        list = new ArrayList<Fragment>();
        BlankFragment f1 = new BlankFragment();
        BlankFragment2 f2 = new BlankFragment2();
        BlankFragment3 f3=new BlankFragment3();
        list.add(f1);
        list.add(f3);
        list.add(f2);
        manager = getSupportFragmentManager();
        adapter = new MyFragmentPageAdapter(manager);
        EasyIndicator easyIndicator=findViewById(R.id.easy_indicator);
        easyIndicator.setTabTitles(tab);
        ViewPager viewPager=findViewById(R.id.view_pager1);
        easyIndicator.setViewPager(viewPager,adapter);
    }


    class MyFragmentPageAdapter extends FragmentPagerAdapter {
    
    

        public MyFragmentPageAdapter(FragmentManager fm) {
    
    
            super(fm);
        }

        @Override
        public Fragment getItem(int arg0) {
    
    
            return list.get(arg0);
        }

        @Override
        public CharSequence getPageTitle(int position) {
    
    
            return tab[position];
        }

        @Override
        public int getCount() {
    
    
            return list.size();
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
    
    
            super.destroyItem(container, position, object);
        }

    }

}

コード分​​析:
ここに写真の説明を挿入
ここに写真の説明を挿入
おめでとうございます、それはついに可能になりました。
ここに写真の説明を挿入
質問がある場合は、プライベートチャットでコメントしたり、話し合ったりできます。さまざまな問題が発生するためです。

よく考えれば、下図のような機能を実装することもできます。
ここに写真の説明を挿入

最後に、カラースキームとベクトル図を見つける場所を共有します。

あなたはカラーマッチングが良くないことを心配したいですか、これは広告ではありません、このウェブサイトは本当に良いです、そして無料です。写真に示すように、カラーハント
ここに写真の説明を挿入
。ベクターのウェブサイトは次のとおりです
。AlibabaCloudVector。これは多くの人に知られているはずです。アリババクラウドベクトル
ここに写真の説明を挿入

おすすめ

転載: blog.csdn.net/qq_45137584/article/details/110671330