【Android项目实战 | 从零开始写app(九)】Tablayout+ViewPager实现页面分类顶部标题页面联动切换

Tablayout+ViewPager实现顶部分类点击不同标题切换不同页面。虽说PagerTabStrip也可以,但是标题显示不全,只有滑动才会逐渐显示,而不是一眼就看到全部分类标题,就是无法更改相距的宽度,个人不太喜欢用那个。
实现顶部分类点击不同标题切换不同页面,这个很简单,但是回想我初学android 的时候,就想要实现类似这个效果,但是当时我就是写不出来,一把辛酸泪。。。

本篇实现效果

在这里插入图片描述

文章导航

一、【Android项目实战 | 从零开始写app(一)】 创建项目

二、【Android项目实战 | 从零开始写app(二)】实现闪屏页,启动app

三、【Android项目实战 | 从零开始写app(三)】实现引导页,进入登录or主页面

四、【Android项目实战 | 从零开始写app(四)】Okhttp+Gson实现服务端登录验证功能

五、【Android项目实战 | 从零开始写app(五)】okhttp+gson实现服务端注册功能

六、【Android项目实战 | 从零开始写app(六)】用TabLayout+ViewPager搭建App 框架主页面底部导航栏

七、【Android项目实战 | 从零开始写app(七)】优化主页导航栏,禁用主页页面滑动切换效果

八、【Android项目实战 | 从零开始写app(八)】实现app首页广告轮播图切换和搜索跳转

九、【Android项目实战 | 从零开始写app(九)】Tablayout+ViewPager实现页面分类顶部标题页面联动切换

十、【Android项目实战 | 从零开始写app(十)】Okhttp+glide+json+ListView实现新闻模块数据的填充显示

十一、【Android项目实战 | 从零开始写app(十一)】实现app首页智慧服务页面服务分类数据的解析及点击跳转

十二、【Android项目实战 | 从零开始写app(十二)】实现app首页智慧服务&热门推荐&热门主题、新闻

十三、【Android项目实战 | 从零开始写app(十三)】实现用户中心模块清除token退出登录&信息修改等功能

十四、【Android项目实战 | 从零开始写app(十四)】实现图片发布模块 | 必知必会之调用系统相机拍照、相册

十五、【Android项目实战 | 从零开始写app(教程汇总)】Android 项目实战系列汇总、源代码


实现功能逻辑

NewsFragment

修改NewsFragment中的内容为如下


package com.example.myapp4.fragment;


import android.content.Intent;
import android.util.Log;
import android.view.View;

import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.resource.bitmap.RoundedCorners;
import com.bumptech.glide.request.RequestOptions;
import com.example.myapp4.R;
import com.example.myapp4.activity.NewsWebViewActivity;
import com.example.myapp4.adapter.NewTabAdapter;
import com.example.myapp4.bean.BannerBean;
import com.example.myapp4.bean.NewsBean;
import com.example.myapp4.utils.APIConfig;
import com.google.android.material.tabs.TabLayout;
import com.google.gson.Gson;
import com.youth.banner.Banner;
import com.youth.banner.adapter.BannerImageAdapter;
import com.youth.banner.holder.BannerImageHolder;
import com.youth.banner.indicator.CircleIndicator;
import com.youth.banner.listener.OnBannerListener;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;


/**
 * @ProjectName: MyApp
 * @Package: com.example.myapp.fragment
 * @ClassName: NewsFragment
 * @Description:  新闻中心模块
 * @Author: liyingxia
 * @CreateDate: 2021/04/23 10:12
 */
public class NewsFragment extends BaseFragment{
    private static final String TAG = NewsFragment.class.getSimpleName();
    private ViewPager new_viewpager;
    private NewTabAdapter newTabAdapter;
    private TabLayout tabLayout;

    @Override
    public View initView() {
        Log.i(TAG, "新闻的视图被实例化了");
        View view = View.inflate(getActivity(), R.layout.fragment_news, null);
        findView(view);
        return view;
    }

    private void findView(View view) {
        tabLayout = view.findViewById(R.id.tab_layout);
        new_viewpager = view.findViewById(R.id.view_pager);
        
    }


    @Override
    public void initData() {
        super.initData();
        Log.e(TAG, "新闻中心的Fragment的数据被初始化了");
        
        initNewsData();

    }
    
    private void initNewsData() {

        // 新闻分类标题导航栏
        String[] title = {"时政","电视","旅游","视频","广播","基层"};
        //创建装载Fragment的列表
        List<Fragment> fragmentlist;
        // 初始化列表,并把创建的6个Fragment页面添加到列表中
        fragmentlist = new ArrayList<>();
        fragmentlist.add(new NShizhengFragment());
        fragmentlist.add(new NTVFragment());
        fragmentlist.add(new NTravelFragment());
        fragmentlist.add(new NvideoFragment());
        fragmentlist.add(new NbrodcastFragment());
        fragmentlist.add(new NJicengFragment());
        
        newTabAdapter = new NewTabAdapter(getChildFragmentManager(),fragmentlist,title);
        // ViewPager与Adapter绑定
        new_viewpager.setAdapter(newTabAdapter);
        // TabLayout与ViewPager绑定
        tabLayout.setupWithViewPager(new_viewpager);
    }

}

NewsTabAdapter

在adapter 目录下新建NewsTabAdapter

package com.example.myapp.adapter;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

/**
 * @ProjectName: MyApp
 * @Package: com.example.myapp.adapter
 * @ClassName: NewTabAdapter
 * @Description:
 * @Author: liyingxia
 * @CreateDate: 2021/04/23 10:11
 */
public class NewTabAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList;
    private String[] titles;

    public NewTabAdapter(@NonNull FragmentManager fm,List<Fragment> fragmentList,String[] titles) {
        super(fm);
        this.fragmentList = fragmentList;
        this.titles = titles;
    }


    /**
     * 返回当前的fragment
     * @param position: 当前页面的位置
     * @return
     */
    @NonNull
    @Override
    public Fragment getItem(int position) {
    
        return fragmentList.get(position);
    }

    /**
     * fragment中的个数
     */
    @Override
    public int getCount() {
    
        return fragmentList.size();
    }

    /**
     * 返回当前的标题
     */
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

fragment_news.xml

在新闻fragment中:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:id="@+id/news"
    android:background="#ECECEC"
    android:layout_height="match_parent">

    <!--标题-->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="fixed"
        android:background="#1D8EE8"
        app:tabTextColor="#FFFFFF"
        app:tabIndicatorColor="#FAE104"
        app:tabSelectedTextColor="#FAE002">
    </com.google.android.material.tabs.TabLayout>
    <com.youth.banner.Banner
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="#8DC8F6"
        android:id="@+id/banner"/>

    <!--页面显示区-->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_margin="10dp"
        android:background="@drawable/login_form_bg"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </androidx.viewpager.widget.ViewPager>
</LinearLayout>

其他分类模块fragment:NTVFragment、NShizhengFragment、NTravelFragment、 NvideoFragment、NbrodcastFragment()、NJicengFragment .class 基本一致,有数据的可以自己实现,都基本依样画葫芦。

NJicengFragment

public class NJicengFragment extends BaseFragment{
    private static final String TAG = NJicengFragment.class.getSimpleName();

    @Override
    public View initView() {
        Log.i(TAG, "基层的视图被实例化了");
        View view = View.inflate(getContext(), R.layout.news_jiceng, null);
        TextView tv2 = view.findViewById(R.id.tv2);
        return view;
    }
    
    @Override
    public void initData() {
        super.initData();
        Log.e(TAG, "基层的Fragment的数据被初始化了");

    }

}

NbrodcastFragment

public class NbrodcastFragment extends BaseFragment {
    private static final String TAG = NbrodcastFragment.class.getSimpleName();

    @Override
    public View initView() {
        Log.i(TAG, "广播的视图被实例化了");
        View view = View.inflate(getContext(), R.layout.news_broadcast, null);
        findView(view);
        return view;
    }

    private void findView(View view) {
        TextView tv2 = view.findViewById(R.id.tv2);

    }

    @Override
    public void initData() {
        super.initData();
        Log.e(TAG, "广播的Fragment的数据被初始化了");

    }

NvideoFragment

public class NvideoFragment extends BaseFragment {
    private static final String TAG = NvideoFragment.class.getSimpleName();

    @Override
    public View initView() {
        Log.i(TAG, "视频的视图被实例化了");
        View view = View.inflate(getContext(), R.layout.news_video, null);
        findView(view);
        return view;
    }

    private void findView(View view) {
        TextView tv2 = view.findViewById(R.id.tv2);
    }
    
    @Override
    public void initData() {
        super.initData();
        Log.e(TAG, "视频的Fragment的数据被初始化了");

    }

接下来三个都一样,自己写好吧,我就不再啰嗦~
在这里插入图片描述

fragment对应的六个布局xml文件一样,如下,自己实现
在这里插入图片描述

  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现 ViewPager2+TabLayout+Fragment 实现页面切换,需要以下步骤: 1. 在 XML 布局文件中定义 ViewPager2 和 TabLayout,并将它们嵌套在一个父布局中。 ```xml <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="scrollable" app:tabGravity="center"/> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/tab_layout" app:layout_constraintBottom_toBottomOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout> ``` 2. 创建 Fragment,并实现 ViewPager2 的适配器。 ```kotlin class MyFragmentAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) { private val fragmentList = listOf( FirstFragment(), SecondFragment(), ThirdFragment() ) override fun getItemCount() = fragmentList.size override fun createFragment(position: Int) = fragmentList[position] } ``` 3. 在 Activity 或 Fragment 中,初始化 ViewPager2 和 TabLayout,并将适配器设置给 ViewPager2。 ```kotlin val viewPager: ViewPager2 = findViewById(R.id.view_pager) val tabLayout: TabLayout = findViewById(R.id.tab_layout) val adapter = MyFragmentAdapter(this) viewPager.adapter = adapter TabLayoutMediator(tabLayout, viewPager) { tab, position -> tab.text = "Tab ${position + 1}" }.attach() ``` 这样就可以实现 ViewPager2+TabLayout+Fragment 实现页面切换了。注意,TabLayoutMediator 是用来关联 TabLayout 和 ViewPager2 的,它的第一个参数是 TabLayout,第二个参数是 ViewPager2,第三个参数是一个回调函数,用来设置 TabLayout 的标签文本。在最后一行调用 attach() 方法即可完成关联。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值