英语新闻app——TagLayout+ViewPager+Fragment实现分类切页功能

122 阅读 0 评论 81 点赞

我是靠谱客的博主内向银耳汤，这篇文章主要介绍英语新闻app——TagLayout+ViewPager+Fragment实现分类切页功能，现在分享给大家，希望可以做个参考。

效果图：

Step1：首先在color.xml中添加常用颜色

复制代码

1
2
3
<color name="red">#FF0000</color>
<color name="white">#FFFFFF</color>
<color name="gray">#A9A9A9</color>

接下来编写我们的页面布局activity_main.xml。

Step2：添加一个Toolbar

使用Toolbar代替ActionBar需要将android :theme设置为NoActionBar，我们到AndroidManifest.xml文件中看到

复制代码

1
android:theme="@style/AppTheme"

所以我们到styles.xml中去修改AppTheme

复制代码

1
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

接着便直接在主布局中添加一个toolbar控件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/red"
        app:titleTextColor="@color/white">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="English News"
            android:textColor="@color/white"
            android:textSize="30sp"
            android:gravity="center"/>

    </androidx.appcompat.widget.Toolbar>

在Toolbar中添加一个TextView是因为直接在Toolbar中添加text只能居左显示，所以我们添加一个textview让他能够居中显示；

layout_height="?attr/actionBarSize"表示Toolbar完全覆盖ActionBar

Step3：在主布局中添加TabLayout和ViewPager控件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tabTextColor="@color/gray"
        app:tabSelectedTextColor="@color/red"
        app:tabMode="fixed"
        app:tabGravity="fill">

    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </androidx.viewpager.widget.ViewPager>

tabMode="fixed"表示所有tab平分宽度，不可滑动

tabGravity="fill"表示tab中的文字居中显示

Step4：新建需要的几个Fragment类以及对应的布局文件

复制代码

1
2
3
4
5
6
7
8
9
public class RecommendFrag extends Fragment {

    public View onCreateView(LayoutInflater inflater, ViewGroup viewGroup, Bundle bundle){
        View view = inflater.inflate(R.layout.frag_recommend, viewGroup, false);
        TextView tv_recommend = (TextView) view.findViewById(R.id.tv_recommend);
        Log.e("HEHE","recommend");
        return view;
    }
}

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_recommend"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="To to ot not to do, that's a question.1"
        android:gravity="center"
        android:textSize="30dp"/>

</LinearLayout>

Step5：开始编写MainActivity

复制代码

1
2
3
4
5
6
7
private androidx.appcompat.widget.Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private List<Fragment> fragmentList;
    private String[] titles = {"推荐","世界","体育","商业","生活","评论"};

    private MyPagerAdapter adapter;

我们需要自建一个适配器MyPagerAdapter

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class MyPagerAdapter extends FragmentPagerAdapter{

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

        public CharSequence getPageTitle(int position){
            return titles[position];
        }

        @Override
        public Fragment getItem(int position) {

            return fragmentList.get(position);
        }

        @Override
        public int getCount() {
            return titles.length;
        }
    }

编写onCreate()方法

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
toolbar = findViewById(R.id.toolbar);
        tabLayout = findViewById(R.id.tabLayout);
        viewPager = findViewById(R.id.viewPager);
        fragmentList = new ArrayList<>();

        fragmentList.add(new RecommendFrag());
        fragmentList.add(new WorldFrag());
        fragmentList.add(new SportFrag());
        fragmentList.add(new BusinessFrag());
        fragmentList.add(new LifeFrag());
        fragmentList.add(new CommentFrag());

        adapter = new MyPagerAdapter(getSupportFragmentManager());


        viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(tabLayout));

        viewPager.setAdapter(adapter);

        tabLayout.setupWithViewPager(viewPager);