首页 > 其他分享 >Android Studio实现TabLayout

Android Studio实现TabLayout

时间：2024-02-13 20:22:06浏览次数：24  
标签：xml return fragment Fragment Studio import Android public TabLayout

通过AS实现TabLayout的效果记录如下：

  1. 完成了TabLayout布局
  2. 完成了Activity向Fragment传输数据
  3. 完成了Fragment监听数据变化实时更新数据

其效果图如下：

首先，先创建一个Activity，创建Java与xml布局文件（此处不做上述UI，只做简单的TabLayout）

DevInformationActivity.java

public class DevInformationActivity extends AppCompatActivity {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_devinformation);
        
        //选项卡部分--------------------------------
        //获取选项卡
        TabLayout tabLayout = findViewById(R.id.tab_layout);
        ViewPager viewPager = findViewById(R.id.view_pager);

        adapter = new PageAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);


        // 设置TabLayout的ViewPager
        tabLayout.setupWithViewPager(viewPager);
    }
}

activity_devinformation.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/style_page_background"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/style_card_round"
            android:orientation="horizontal"
            android:padding="10dp"
            android:layout_marginTop="10dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tab_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabMode="fixed"
                    app:tabGravity="fill"

                    app:tabRippleColor="@color/white"

                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintStart_toStartOf="parent"

                    app:tabTextColor="#8c8c8c"
                    app:tabSelectedTextColor="@color/black"
                    app:tabIndicatorFullWidth="true"

                    app:tabIndicator="@drawable/style_tab_line"
                    app:tabIndicatorColor="@color/colorPrimary">
                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="信息"/>
                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="设置"/>
                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="地图"/>
                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="关于"/>

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

                <androidx.viewpager.widget.ViewPager
                    android:id="@+id/view_pager"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    app:layout_constraintTop_toBottomOf="@+id/tab_layout">
                </androidx.viewpager.widget.ViewPager>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

上面的代码中有一个样式文件app:tabIndicator="@drawable/style_tab_line"其实现如下

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="40dp"
        android:height="5dp"
        android:gravity="center">
        <shape>
            <corners android:radius="5dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>

新建一个新的类

PageAdapter.java

package com.example.pld_mob.util;


import android.os.Bundle;

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

import com.example.pld_mob.DeviceAboutActivity;
import com.example.pld_mob.DeviceInfoActivity;
import com.example.pld_mob.DeviceMapActivity;
import com.example.pld_mob.DeviceSetActivity;

public class PageAdapter extends FragmentPagerAdapter {

    private final String[] TAB_TITLES = {"信息", "设置", "地图", "关于"};

    public PageAdapter(FragmentManager fragmentManager) {
        super(fragmentManager);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                // 使用 fragment_page.xml 布局创建第一个选项卡的内容
                return new DeviceInfoActivity();
            case 1:
                // 使用 fragment_page.xml 布局创建第二个选项卡的内容
                return new DeviceSetActivity();
            case 2:
                // 使用 fragment_page.xml 布局创建第二个选项卡的内容
                return new DeviceMapActivity();
            case 3:
                // 使用 fragment_page.xml 布局创建第二个选项卡的内容
                return new DeviceAboutActivity();
            default:
                return null;
        }
    }
    @Override
    public int getCount() {
        return TAB_TITLES.length;
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return TAB_TITLES[position];
    }
}

这样的话就可以在DevInformationActivity实例化PageAdapter了，但PageAdapter中的DeviceInfoActivity、DeviceSetActivity、DeviceMapActivity、DeviceAboutActivity几个都是继承于Fragment的类，也就是相应的几个TabLayout的子页面，其实现如下（此处只举例一个）（PS:别被类名称误导此处是继承于Fragment，返回的是View视图）

DevInfoActivity.java

public class DeviceInfoActivity extends Fragment {
    Context mContext;
    View view;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = getActivity();
    }

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // 使用 fragment_page.xml 布局文件来创建视图
        view = inflater.inflate(R.layout.activity_deviceinfo, container, false);

        return view;
    }
}

activity_deviceinfo.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_height="match_parent"
    tools:context=".DeviceInfoActivity">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="信息页面"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

注意，四个页面就创建够四个页面，别缺不然会卡死。

根据以上代码之后应该就可以完成选项卡切换了，之后就是数据传输，其实现过程如下（主要是通过ViewModel实现）：

新建如下类ViewModelUtil.java

public class ViewModeUtil extends ViewModel{
    // 数据可以是LiveData, StateFlow, 或者其他任何你想要共享的东西
    private final MutableLiveData<List<String>> DevInfoData = new MutableLiveData<>();

    public void setSharedData(List<String> data) {
        DevInfoData.setValue(data);
    }

    public LiveData<List<String>> getSharedData() {
        return DevInfoData;
    }
}

此处数据传输的是List<String>这样扩展性会更强。

其使用方法如下：

//实例化ViewModelUtil类
ViewModel DevInfoViewModel;

//新建List<String>数据组
List<String> PLD_INF_BUFF;

//在你的按钮回调或者一些回调函数中执行以下代码
PLD_STA_Buff.add(0,"AA");
PLD_STA_Buff.add(1,"BB");
PLD_STA_Buff.add(2,"CC");
PLD_STA_Buff.add(3,"DD");

//将数据更新
DevInfoViewModel.setSharedData(PLD_INF_Buff);

//另外需要单独写一个成员函数
public ViewModeUtil getDevInfoViewModel() {
    return DevInfoViewModel;
}

在子页面中DevInfoActivity.java中获取DevInformationActivity中的DevInfoViewModel其如下：

DevInformationActivity DevInfoActivity;
DevInfoActivity = ((DevInformationActivity) requireActivity());
ViewModeUtil DevInfoViewModel = DevInfoActivity.getDevInfoViewModel();
 // 观察LiveData数据变化
DevInfoViewModel.getSharedData().observe(getViewLifecycleOwner(), Data -> {
    Data.get(0);
    Data.get(0);
    Data.get(0);
    
    //把这些数据打印出来
});

这样就可以获取到数据了，在Activity中设置数据后，Fragment中就会更新数据并进入Observe，在该函数中进行一些数据操作，比如写入TextView等等。

 

标签：xml,return,fragment,Fragment,Studio,import,Android,public,TabLayout
From： https://www.cnblogs.com/lesterbor/p/18014768

相关文章

  • 【踩坑】Unity Android(安卓)平台 Render texture 有残留，即使调用 DiscardContents 还
    在编辑器环境下OK，打包成PC客户端也OK，但是打包成apk，在安卓手机上运行的时候就会有残留。 我的代码如下。主要是在LateUpdate()中，修改特定摄像机的cullmask，在捕捉到制定的rendertexture上（即此处的m_levelUnitRT）。 voidLateUpdate(){if(m_levelU......
  • Android系统版本号对照表
    Android系统版本号对照表 系统名称系统版本号字母Android1434UAndroid1333TAndroid12L32SAndroid1231SAndroid1130RAndroid1029QAndroid928PieAndroid8.127OreoAndroid8.026OreoAndroid7.1......
  • Android Studio 只启动安卓模拟器的脚本实现
    基本上都是参考：https://blog.csdn.net/qq_39970857/article/details/122186784一.找到SDK安装路径这俩张懒得画图，是偷的）二.win+r打开cmd(反正不用管理权限，随便怎么打开)......
  • pixel2 Android11 Https 抓包记录
    关键词：pixel2Android11MagiskhttpcanaryHttps最近需要抓HTTPS，手里设备有pixel2，4，6都是高版本。查找了下资料，配置环境，记录下。前置条件1.设备一台已Root，Magisk方案需要物料：1.winadb环境。参见：https://www.cnblogs.com/myred/p/14506909.html2.winopenssl环境。......
  • Android Graphics 多屏同显/异显 - 新年预告
    春节将至，首先祝愿朋友们新年快乐！AndroidGraphics多屏同显/异显-新年预告 -- 点我阅读节前发布最后一篇文章，预告下阶段将要分享的研究成果，主要是Android多屏同显/异显的一些知识。为了能讲清楚底层逻辑，又不要惑于上层复杂的AMS/WMS，特意写作了C++版本的多屏互动的演示......
  • android FrameLayout、LinearLayout和RelativeLayout的学习
    一、FrameLayout目的：FrameLayout是一个设计用来存放单个子项的简单容器。它通常被用来堆叠视图，即将多个元素重叠在一起。布局：子视图堆叠在一起，默认情况下都是放置在左上角，但可以通过android:layout_gravity属性改变子视图的位置。性能：由于FrameLayout结构简单，所以相对来说比较......
  • Visual Studio部署matplotlib绘图库的C++版本
      本文介绍在VisualStudio软件中配置、编译C++环境下matplotlibcpp库的详细方法。  matplotlibcpp库是一个C++环境下的绘图工具，其通过调用Python接口，实现在C++代码中通过matplotlib库的命令绘制各类图像。由于其需要调用Python接口，因此在配置matplotlibcpp库时有些较为麻烦......
  • 如何导出 Visual Studio Code 的扩展应用，并离线安装？
    1.离线情形VisualStudioCode的扩展应用安装位置在文件夹.vscode/extensions下。不同平台，它位于：Windows%USERPROFILE%.vscode\extensionsMac~/.vscode/extensionsLinux~/.vscode/extensions离线使用时，直接复制粘贴即可。2.有网情况方法1：账号同步使用VisualStudio......
  • 【译】介绍 MSTest Runner – CLI、Visual Studio 等
    原文|AmauryLevé,MarcoRossignoli,JakubJareš翻译|郑子铭我们很高兴推出MSTestrunner，这是一个用于MSTest测试的新型轻量级运行程序。这个新的运行程序使测试更加便携和可靠，使测试运行得更快，并且可扩展，为您提供点菜测试体验，以添加成功所需的工具。它是什么？MSTes......
  • Android发布，全志T507四核[email protected]工业平台，含税仅168元起！
    近年来，Android系统在工业自动化、仪器仪表、医疗、安防等工业领域的使用日趋广泛。为了满足广大工业用户的需求，创龙科技针对全志T507-H工业平台进行了Android系统适配。 创龙科技T507-H工业核心板SOM-TLT507性价比很高，四核[email protected]架构，国产化率100%（提供赛宝实验室认证......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99