TabLayout and ViewPager in Android - Insurance Finances

Trong hướng dẫn này, chúng tôi sẽ triển khai một ViewPager trong TabLayout mà chúng tôi đã triển khai trong hướng dẫn này.

Mục lục

1.  Android TabLayout ViewPager Tổng quan
2. Android TabLayout ViewPager Cấu trúc dự án
3. Android TabLayout ViewPager Mã mẫu

Tổng quan về Android TabLayout ViewPager

ViewPager được sử dụng để lướt qua các trang dữ liệu. Nó thường được sử dụng cùng với các mảnh vỡ.

Hãy sửa đổi bố cục của chúng tôi từ hướng dẫn trước như bên dưới.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"

    xmlns:app="https://schemas.android.com/apk/res-auto"

    xmlns:tools="https://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:fitsSystemWindows="true"

    tools:context="com.journaldev.tablayoutviewpager.MainActivity">

    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_width="match_parent"

            android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary"

            app:layout_scrollFlags="scroll|enterAlways"

            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <android.support.design.widget.TabLayout

            android:id="@+id/tabs"

            style="@style/MyStyle"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            app:tabGravity="fill"

            app:tabMode="fixed" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager

        android:id="@+id/viewPager"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton

        android:id="@+id/fab"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="bottom|end"

        android:layout_margin="@dimen/fab_margin"

        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Trước khi chúng tôi thêm ViewPager của mình vào MainActivity, hãy thiết lập bộ điều hợp của nó.

 public class ViewPagerAdapter extends FragmentPagerAdapter {

    public ViewPagerAdapter(FragmentManager fm) {

        super(fm);

    }

    @Override

    public Fragment getItem(int position) {

        Fragment fragment = null;

        if (position == 0)

        {

            fragment = new FragmentA();

        }

        else if (position == 1)

        {

            fragment = new FragmentB();

        }

        else if (position == 2)

        {

            fragment = new FragmentC();

        }

        return fragment;

    }

    @Override

    public int getCount() {

        return 3;

    }

    @Override

    public CharSequence getPageTitle(int position) {

        String title = null;

        if (position == 0)

        {

            title = "Tab-1";

        }

        else if (position == 1)

        {

            title = "Tab-2";

        }

        else if (position == 2)

        {

            title = "Tab-3";

        }

        return title;

    }

}

ViewPagerAdapter ở trên mở rộng FragmentPagerAdapter. Nó gọi ra ba mảnh, một mảnh cho mỗi trang của nó. Mỗi phân đoạn chứa một ListView như hình dưới đây

fragment_list.xml

<?xml version="1.0" encoding="utf-8"?>

<ListView xmlns:android="https://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:id="@+id/list"/>

FragmentA (/ B / C) .java được cung cấp bên dưới:

public class FragmentA extends Fragment {

    ListView list;

    public FragmentA() {

    }

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment, container, false);

        list = (ListView) view.findViewById(R.id.list);

        ArrayList stringList= new ArrayList();

        stringList.add("Item 1A");

        stringList.add("Item 1B");

        stringList.add("Item 1C");

        stringList.add("Item 1D");

        stringList.add("Item 1E");

        stringList.add("Item 1F");

        stringList.add("Item 1G");

        stringList.add("Item 1H");

        stringList.add("Item 1I");

        stringList.add("Item 1J");

        stringList.add("Item 1K");

        stringList.add("Item 1L");

        stringList.add("Item 1M");

        stringList.add("Item 1N");

        stringList.add("Item 1O");

        stringList.add("Item 1P");

        stringList.add("Item 1Q");

        stringList.add("Item 1R");

        stringList.add("Item 1S");

        stringList.add("Item 1T");

        stringList.add("Item 1U");

        stringList.add("Item 1V");

        stringList.add("Item 1W");

        stringList.add("Item 1X");

        stringList.add("Item 1Y");

        stringList.add("Item 1Z");

        CustomAdapter adapter = new CustomAdapter(stringList,getActivity());

        list.setAdapter(adapter);

        return view;

    }

}

Class CustomAdapter.java cho ListView ở trên là:

public class CustomAdapter extends ArrayAdapter {

    private ArrayList dataSet;

    Context mContext;

    // View lookup cache

    private static class ViewHolder {

        TextView txtName;

    }

    public CustomAdapter(ArrayList data, Context context) {

        super(context, R.layout.row_item, data);

        this.dataSet = data;

        this.mContext = context;

    }

    @Nullable

    @Override

    public String getItem(int position) {

        return dataSet.get(position);

    }

    @Override

    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder viewHolder; // view lookup cache stored in tag

        if (convertView == null) {

            viewHolder = new ViewHolder();

            LayoutInflater inflater = LayoutInflater.from(getContext());

            convertView = inflater.inflate(R.layout.row_item, parent, false);

            viewHolder.txtName = (TextView) convertView.findViewById(R.id.name);

            convertView.setTag(viewHolder);

        } else {

            viewHolder = (ViewHolder) convertView.getTag();

        }

        viewHolder.txtName.setText(getItem(position));

        // Return the completed view to render on screen

        return convertView;

    }

}

The MainActivity.java class dưới đây.

public class MainActivity extends AppCompatActivity {

    TabLayout tabLayout;

    ViewPager viewPager;

    ViewPagerAdapter viewPagerAdapter;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

                        .setAction("Action", null).show();

            }

        });

        viewPager = (ViewPager) findViewById(R.id.viewPager);

        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(viewPagerAdapter);

        tabLayout = (TabLayout) findViewById(R.id.tabs);

        tabLayout.setupWithViewPager(viewPager);

    }

}

Trong đoạn mã trên setupWithViewPager () được sử dụng để tham gia TabLayout với ViewPager.

Phương thức getPageTitle () trong FragmentPagerAdapter được sử dụng để đặt tiêu đề của mỗi Tab. Hãy xem kết quả đầu ra khi mã trên được chạy

đó là do ListView. CoordinatorLayout không hỗ trợ ListView (nó không phải là một phần của Material Design) và đó là các cử chỉ cuộn. Do đó, bạn nên sử dụng RecyclerView để thay thế.

Lưu ý: Các phân đoạn thuộc hoạt động CoordinatorLayout cần sử dụng NestedScrollView hoặc RecyclerView làm cha mẹ để cho phép các cử chỉ cuộn hoạt động chính xác.

Trước khi chúng tôi thay thế triển khai ListView của mình trong ứng dụng, hãy bao bọc bố cục của phân đoạn hiện tại bằng NestedScrollView như được hiển thị bên dưới.

fragment_list.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.NestedScrollView xmlns:android="https://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content">

    <ListView xmlns:android="https://schemas.android.com/apk/res/android"

        android:id="@+id/list"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

</android.support.v4.widget.NestedScrollView> 

Related Posts