TabLayout/ViewPager/Fragment

preface

I have written this tutorial before, but I haven't finished it. Because of the delay in the process, I'm going to reopen an article to write about TabLayout

Basic use

I will not elaborate here. In fact, basic use is not often seen in project development. In fact, there are two common usage scenarios for TabLayout:
- TabLayout + ViewPager
- TabLayout + ViewPager + Fragment

In comparison, the second scenario uses more. The following code will post both scenarios. When searching online, there are few cases without Fragment

Use of TabLayout + ViewPager

In this case, the View is usually added directly to the ViewPager. Because ViewPager is actually a ViewGroup, you can add View directly

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.chen.myapplication.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tlMain"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/colorPrimaryDark" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vpMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ArrayList<String> titleList = new ArrayList<String>() {{
        add("google drive");
        add("google+");
        add("google play");
    }};

    private ArrayList<View> viewList = new ArrayList<>();
    private TabLayout tlMain;
    private ViewPager vpMain;
    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        View view1 = getLayoutInflater().inflate(R.layout.view1, null);
        View view2 = getLayoutInflater().inflate(R.layout.view2, null);
        View view3 = getLayoutInflater().inflate(R.layout.view3, null);
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);
        initView();
    }

    private void initView() {
        tlMain = (TabLayout) findViewById(R.id.tlMain);
        tlMain.setTabMode(TabLayout.MODE_FIXED);
        tlMain.addTab(tlMain.newTab().setText(titleList.get(0)));
        tlMain.addTab(tlMain.newTab().setText(titleList.get(1)));
        tlMain.addTab(tlMain.newTab().setText(titleList.get(2)));
        vpMain = (ViewPager) findViewById(R.id.vpMain);
        adapter = new MyAdapter(titleList, viewList);
        tlMain.setTabsFromPagerAdapter(adapter);
        vpMain.setAdapter(adapter);
        tlMain.setupWithViewPager(vpMain, true);
    }
}

MyAdapter.java

public class MyAdapter extends PagerAdapter {

    private ArrayList<String> titleList;
    private ArrayList<View> viewList;

    public MyAdapter(ArrayList<String> titleList, ArrayList<View> viewList) {
        this.titleList = titleList;
        this.viewList = viewList;
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewList.get(position));
        return viewList.get(position);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titleList.get(position);
    }
}

Use of TabLayout + ViewPager + Fragment

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.chen.myapplication.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tlMain"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/colorPrimaryDark" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vpMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ArrayList<String> titleList = new ArrayList<String>() {{
        add("google drive");
        add("google+");
        add("google play");
    }};

    private ArrayList<Fragment> fragmentList = new ArrayList<Fragment>() {{
        add(new OneFragment());
        add(new TwoFragment());
        add(new ThreeFragment());
    }};

    private TabLayout tlMain;
    private ViewPager vpMain;

    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        adapter = new MyAdapter(getSupportFragmentManager(), titleList, fragmentList);
        vpMain.setAdapter(adapter);
        tlMain.setupWithViewPager(vpMain, true);
        tlMain.setTabsFromPagerAdapter(adapter);
    }

    private void initView() {
        tlMain = (TabLayout) findViewById(R.id.tlMain);
        vpMain = (ViewPager) findViewById(R.id.vpMain);
    }

}

OneFragment.java

public class OneFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_view1, container, false);
        return view;
    }
}

TwoFragment.java

public class TwoFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_view2, container, false);
        return view;
    }
}

ThreeFragment.java

public class ThreeFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_view3, container, false);
        return view;
    }
}

MyAdapter.java

public class MyAdapter extends FragmentPagerAdapter {

    private ArrayList<String> titleList;
    private ArrayList<Fragment> fragmentList;

    public MyAdapter(FragmentManager fm, ArrayList<String> titleList, ArrayList<Fragment> fragmentList) {
        super(fm);
        this.titleList = titleList;
        this.fragmentList = fragmentList;
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titleList.get(position);
    }
}

The effect is as shown in figure [the effect of the two methods is the same]

summary

The first case is mostly used for head rotation, and the second case is mostly used for home page with navigation
In order to avoid memory leakage caused by too many variables

Tags: Android Fragment Java Google

Posted on Tue, 26 May 2020 09:23:57 -0700 by azeem123456