Android之TabLayout+ViewPager+Fragment实现标题栏与页面联动

来源：互联网发布：网络教育2018招生时间编辑：程序博客网时间：2024/06/05 17:53

TabLayout组件的使用
主界面activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <!--tabSelectedTextColor:改变选中字体的颜色-->    <!--tabTextColor:改变未选中字体的颜色-->    <!--tabIndicatorColor:改变整个TabLayout的颜色-->    <!--app:tabMode="scrollable":设为滚动模式-->    <android.support.design.widget.TabLayout        android:id="@+id/tab_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabIndicatorColor="@android:color/holo_blue_dark"        app:tabSelectedTextColor="@android:color/holo_blue_dark"        app:tabTextColor="@android:color/background_dark">    </android.support.design.widget.TabLayout>    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager>  </LinearLayout>

定义四个Fragment
1) Fragment1.java

package com.example.zhaoxin.commonbaseadapter.fragment;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ListView;import com.example.zhaoxin.commonbaseadapter.R;import com.example.zhaoxin.commonbaseadapter.adapter.MyListViewAdapter;import com.example.zhaoxin.commonbaseadapter.entity.Book;import java.util.ArrayList;import java.util.List;import butterknife.BindView;import butterknife.ButterKnife;import butterknife.Unbinder;/** * Created by zhaoxin on 17/11/24. * */public class Fragment1 extends Fragment {    private List<Book> bookList;// 图书集合    private Unbinder unbinder;// 解绑    @BindView(R.id.list)    ListView list;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment1, null);        unbinder = ButterKnife.bind(this, view);        initListView();        return view;    }    /**     * 初始化ListView     */    private void initListView() {        // 获取图书集合对象        bookList = new ArrayList<>();        // 循环添加集合数据        for (int i = 0; i < 10; i++) {            Book book = new Book("Android", "45");            bookList.add(book);        }        // 为组件设置适配器展示数据        list.setAdapter(new MyListViewAdapter(getActivity(), R.layout.item_list, bookList));    }    @Override    public void onDestroyView() {        super.onDestroyView();        unbinder.unbind();    }}

2) Fragment2.java

package com.example.zhaoxin.commonbaseadapter.fragment;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.zhaoxin.commonbaseadapter.R;/** * Created by zhaoxin on 17/11/24. */public class Fragment2 extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment2, null);        return view;    }}

3) Fragment3.java

package com.example.zhaoxin.commonbaseadapter.fragment;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.zhaoxin.commonbaseadapter.R;/** * Created by zhaoxin on 17/11/24. */public class Fragment3 extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment3, null);        return view;    }}

4) Fragment4.java

package com.example.zhaoxin.commonbaseadapter.fragment;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.zhaoxin.commonbaseadapter.R;/** * Created by zhaoxin on 17/11/24. */public class Fragment4 extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment4, null);        return view;    }}

四个Fragment对应的xml文件
1) fragment1.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:orientation="vertical">    <ListView        android:id="@+id/list"        android:layout_width="match_parent"        android:layout_height="match_parent">    </ListView></LinearLayout>

2) fragment2.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:orientation="vertical">    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"        android:text="内容二"/></LinearLayout>

3) fragment3.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:orientation="vertical">    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"        android:text="内容三"/></LinearLayout>

4) fragment4.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:orientation="vertical">    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"        android:text="内容四"/></LinearLayout>

实现联动
1) MainActivity.java

package com.example.zhaoxin.commonbaseadapter;import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.widget.ListView;import com.example.zhaoxin.commonbaseadapter.adapter.MyFragmentPagerAdapter;import com.example.zhaoxin.commonbaseadapter.adapter.MyListViewAdapter;import com.example.zhaoxin.commonbaseadapter.entity.Book;import com.example.zhaoxin.commonbaseadapter.fragment.Fragment1;import com.example.zhaoxin.commonbaseadapter.fragment.Fragment2;import com.example.zhaoxin.commonbaseadapter.fragment.Fragment3;import com.example.zhaoxin.commonbaseadapter.fragment.Fragment4;import java.util.ArrayList;import java.util.List;import butterknife.BindView;import butterknife.ButterKnife;import butterknife.Unbinder;public class MainActivity extends AppCompatActivity {    private List<String> titleList;// 标题集合    private List<Fragment> fragmentList;// 碎片集合    private MyFragmentPagerAdapter mMyFragmentPagerAdapter;// viewPager适配器    private Unbinder unbinder;// 解绑    @BindView(R.id.tab_layout)    TabLayout tab_layout;// 标题栏    @BindView(R.id.view_pager)    ViewPager view_pager;// 可滑动页面    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        unbinder = ButterKnife.bind(this);        initTabLayout();    }    /**     * 初始化标题栏     */    private void initTabLayout() {        // 初始化标题集合        titleList = new ArrayList<>();        titleList.add("标题一");        titleList.add("标题二");        titleList.add("标题三");        titleList.add("标题四");        // 初始化fragment集合        fragmentList = new ArrayList<>();        fragmentList.add(new Fragment1());        fragmentList.add(new Fragment2());        fragmentList.add(new Fragment3());        fragmentList.add(new Fragment4());        // 添加标题        tab_layout.addTab(tab_layout.newTab().setText(titleList.get(0)));        tab_layout.addTab(tab_layout.newTab().setText(titleList.get(1)));        tab_layout.addTab(tab_layout.newTab().setText(titleList.get(2)));        tab_layout.addTab(tab_layout.newTab().setText(titleList.get(3)));        // 设置viewPager适配器        mMyFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), titleList, fragmentList);        view_pager.setAdapter(mMyFragmentPagerAdapter);        // 绑定viewPager与其联动        tab_layout.setupWithViewPager(view_pager);        // 设置打开应用时当前viewPager是第一个        view_pager.setCurrentItem(0);        // tabLayout添加标题选择事件        tab_layout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {                switch (tab.getPosition()){                    case 0:                        fragmentList.get(0);                        break;                    case 1:                        fragmentList.get(1);                        break;                    case 2:                        fragmentList.get(2);                        break;                    case 3:                        fragmentList.get(3);                        break;                }            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {                // 未选中tab            }            @Override            public void onTabReselected(TabLayout.Tab tab) {                // 再次选中tab            }        });    }    @Override    protected void onDestroy() {        super.onDestroy();        unbinder.unbind();    }}

2) MyFragmentPagerAdapter.java

package com.example.zhaoxin.commonbaseadapter.adapter;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import java.util.List;/** * Created by zhaoxin on 17/11/24. */public class MyFragmentPagerAdapter extends FragmentPagerAdapter {    private List<String> mTitleList;    private List<Fragment> mFragmentList;    public MyFragmentPagerAdapter(FragmentManager fm, List<String> titleList, List<Fragment> fragmentList) {        super(fm);        this.mTitleList = titleList;        this.mFragmentList = fragmentList;    }    @Override    public Fragment getItem(int position) {        return mFragmentList.get(position);    }    @Override    public int getCount() {        return mFragmentList.size();    }    @Override    public CharSequence getPageTitle(int position) {        return mTitleList.get(position);    }}

至此，就完成了标题栏与页面的联动，其中ListView的适配器在上一篇博客中有完整的代码。

阅读全文

0 0