iT邦幫忙

2022 iThome 鐵人賽

DAY 27
0
Mobile Development

Android Studio - 30天菜鳥筆記系列 第 27

Android Studio菜鳥筆記 - Day27 - Tablayout

  • 分享至 

  • xImage
  •  

Tablayout是表個選單,可以與ViewPager搭配一起使用
首先拉一個Tablayout與ViewPager2至我們的xml
Tablayout裡可以放入個TabItem,我這裡是放三個

<?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=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Monday" />

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tuesday" />

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Wednesday" />
        </com.google.android.material.tabs.TabLayout>

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

接著是要創建三個Fragment(因為Tabltem只有3個)與一個ViewPager的Adapter


創建後的程式碼在上一篇有介紹,若還沒有去看的人可以先去看一下

前面都完成後就要將Tablayout與ViewPager連動

這裡以TabLayoutMediator來連動,將Tablayout與ViewPager丟入到裡面就會去自動連結了
裡面可以寫入Tabitem各自的名稱
最後要記得.attach()

new TabLayoutMediator(tab, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                if (position == 0) tab.setText("首頁");
                if (position == 1) tab.setText("最新消息");
                if (position == 2) tab.setText("介紹");
            }
        }).attach();

點擊事件

tab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //選中Tab時
                Toast.makeText(MainActivity.this, tab.getText(), Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //未選中Tab時

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //再次選中tab時
            }
        });

完整程式碼

package com.example.viewpager_demo;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.widget.Toast;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

public class MainActivity extends AppCompatActivity {
    private ViewPager2 viewPager;
    private TabLayout tab;
    private FragmentViewPagerAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = findViewById(R.id.viewpager);
        tab = findViewById(R.id.tab);

        adapter = new FragmentViewPagerAdapter(this);
        viewPager.setAdapter(adapter);
        viewPager.setCurrentItem(0);

        new TabLayoutMediator(tab, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                if (position == 0) tab.setText("首頁");
                if (position == 1) tab.setText("最新消息");
                if (position == 2) tab.setText("介紹");
            }
        }).attach();

        //點擊事件
        tab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Toast.makeText(MainActivity.this, tab.getText(), Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }
}


上一篇
Android Studio菜鳥筆記 - Day26 - ViewPager2+Fragment
下一篇
Android Studio菜鳥筆記 - Day28 - RecyclerView
系列文
Android Studio - 30天菜鳥筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言