Android TabLayout+Fragment+ViewPager实现顶部导航栏和滑动切换效果

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

一、实现效果展示

二、页面结构设计

在界面布局方面，主要通过XML文件定义整体UI结构。以下是核心布局文件的代码实现：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">



    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:background="@color/colorBlue"
        android:layout_height="64dp">

        <ImageView
            android:id="@+id/backImg"
            android:layout_width="40dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:src="@mipmap/ic_back"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textAlignment="center"
            android:gravity="center"
            android:textStyle="bold"
            android:textSize="24sp"
            android:textColor="@color/white"
            android:text="@string/statistics_title"/>
        <!--占位-->
        <View
            android:layout_width="40dp"
            android:layout_height="match_parent"/>


    </LinearLayout>


    <!--统计图区域-->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/top_bar"
        app:tabTextAppearance="@style/tabLayoutTextStyle"
        app:tabMinWidth="180dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicatorColor="@color/colorBlue"
        app:tabSelectedTextColor="@color/colorBlue"
        app:tabMode="scrollable"/>

    <!--分割线-->
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#E4E4E4"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>


</LinearLayout>

三、基础Fragment封装

为了提高代码复用性与可维护性，项目中引入了自定义的基类Fragment。该基类封装了通用逻辑，便于各子Fragment继承使用。 BaseFragment的具体实现代码如下：

package com.chy.chygdjg.fragment;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;


/**
 * 基本Fragment
 * */
public abstract class BaseFragment extends Fragment {

    /**
     * 设置数据
     * */
    protected abstract void setData(Bundle savedInstanceState);

    /**
     * 绑定布局
     * */
    protected abstract int setContentLayout();

    /**
     * 初始化组件
     * */
    protected abstract void setControls(View view);


    @Override
    public void onAttach(@NonNull Context context) {
        super.onAttach(context);
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setData(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View fragmentView  = inflater.inflate(setContentLayout(),container,false);
        return fragmentView;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        // 控件
        setControls(view);
    }

    @Override
    public void onStart() {
        super.onStart();

    }

    @Override
    public void onResume() {
        super.onResume();
    }

    @Override
    public void onPause() {
        super.onPause();
    }

    @Override
    public void onStop() {
        super.onStop();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }

    @Override
    public void onDetach() {
        super.onDetach();
    }

}

以ZTTJFragment为例，展示了如何基于BaseFragment进行功能扩展：

package com.chy.chygdjg.fragment;

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import com.chy.chygdjg.R;

/**
 * 状态统计fragment
 * */
public class ZTTJFragment extends BaseFragment {
    @Override
    protected void setData(Bundle savedInstanceState) {

    }

    @Override
    protected int setContentLayout() {
        return R.layout.fragment_zttj;
    }

    @Override
    protected void setControls(View view) {
         TextView tv =  view.findViewById(R.id.tv);
         tv.setText("状态统计");
    }
}

四、Fragment适配器实现

为支持多Fragment的切换与管理，项目采用自定义的FragmentPagerAdapter。该适配器负责页面的数据绑定与实例化过程。 具体代码内容如下：

package com.chy.chygdjg.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 com.chy.chygdjg.fragment.BaseFragment;

import java.util.ArrayList;
import java.util.List;
/**
 * 自定义FragmentPagerAdapter
 * */
public class FragmentAdater extends FragmentPagerAdapter {
    // 顶部标题
    private String[] tabsTitle;
    // 内容集合
    private List<BaseFragment> fragmentList = new ArrayList<BaseFragment>();
    public FragmentAdater(@NonNull FragmentManager fm) {
        super(fm);
    }

    public FragmentAdater(@NonNull FragmentManager fm,String[] _tabsTitle, List<BaseFragment> _fragmentList) {
        super(fm);
        this.tabsTitle = _tabsTitle;
        this.fragmentList = _fragmentList;
    }

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

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return tabsTitle[position];
    }
}

五、主Activity逻辑处理

activity_statistics.java作为统计页面的主控制类，承担了页面初始化、数据加载及Fragment管理等职责。 其关键代码实现如下：

package com.chy.chygdjg;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import com.chy.chygdjg.adapter.FragmentAdater;
import com.chy.chygdjg.fragment.BaseFragment;
import com.chy.chygdjg.fragment.CRFSFragment;
import com.chy.chygdjg.fragment.XZTDFragment;
import com.chy.chygdjg.fragment.YTTJFragment;
import com.chy.chygdjg.fragment.ZTTJFragment;
import com.google.android.material.tabs.TabLayout;
import java.util.ArrayList;
import java.util.List;

public class StatisticsActivity extends AppCompatActivity {

    private ImageView backImg;// 返回
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private FragmentAdater fragmentAdater;

    private String[] tabsTitle = {"状态统计","用途统计","出让方式","闲置土地"};
    private List<BaseFragment> fragmentList = new ArrayList<BaseFragment>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_statistics);

        init();
    }



    private void init(){
        // 返回按钮
        backImg = findViewById(R.id.backImg);
        backImg.setOnClickListener(backClick);
        // 横向滚动条-tabLayout
        tabLayout = findViewById(R.id.tabLayout);
        // 设置集合
        fragmentList.add(new ZTTJFragment());
        fragmentList.add(new YTTJFragment());
        fragmentList.add(new CRFSFragment());
        fragmentList.add(new XZTDFragment());
        // viewPager
        viewPager = findViewById(R.id.viewPager);
        fragmentAdater = new FragmentAdater(getSupportFragmentManager(),tabsTitle,fragmentList);
        viewPager.setAdapter(fragmentAdater);
        tabLayout.setupWithViewPager(viewPager);

    }

    /**
     * 返回事件
     * */
    View.OnClickListener backClick = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            finish();
        }
    };

}

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：Android Layout DROID view page