Android學習筆記

Android基礎開發——布局

文章目錄

• • Android學習筆記
  • • Android基礎開發——布局
    • • 56. TabLayout 選項卡布局
      • • 56.1 簡介
        • 56.2 TabItem
        • 56.3 TabLayout布局
        • 56.4 結合ViewPager實現切換效果

56. TabLayout 選項卡布局

官方文檔

https://developer.android.google.cn/reference/com/google/android/material/tabs/package-summary

56.1 簡介

TabLayout 提供了一個水平布局來顯示選項卡。

• Tab：TabLayout中的item，可以通過newTab()創建。
• TabView：Tab的實例，是一個包含ImageView和TextView的線性布局。
• TabItem：一種特殊的“視圖”，在TabLayout中可以顯式聲明Tab

56.2 TabItem

TabItem 是一個特殊的“視圖”，它允許您在布局中聲明選項卡項。這個視圖實際上并沒有添加到 TabLayout，它只是一個允許設置選項卡項的文本、圖標和自定義布局的虛擬視圖。

56.3 TabLayout布局

TabLayout 提供了一個水平布局來顯示選項卡。

布局文件

<?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="match_parent"tools:context=".MainActivity"><com.google.android.material.tabs.TabLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"tools:ignore="MissingConstraints"><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="選項卡1" /><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="選項卡2" /><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="選項卡3"/></com.google.android.material.tabs.TabLayout></LinearLayout>

運行

56.4 結合ViewPager實現切換效果

定義四個布局文件

layout1.xml

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayoutxmlns: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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="View1"android:textSize="30sp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

其他三個雷同

主布局文件

activity_main.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=".MainActivity"><androidx.viewpager.widget.ViewPagerandroid:id="@+id/view_pager"android:layout_width="match_parent"android:layout_height="match_parent"><com.google.android.material.tabs.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_constraintBottom_toBottomOf="parent" /></androidx.viewpager.widget.ViewPager></androidx.constraintlayout.widget.ConstraintLayout>

適配器

MyAdapter.java

package com.dingjiaxiong.mytablayout;import android.content.Context; import android.view.View; import android.view.ViewGroup;import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.viewpager.widget.PagerAdapter;import java.util.List;public class MyAdapter extends PagerAdapter {private List<View> listView;private List<String> listTabTitle;private Context context;public MyAdapter(List<View> listView, List<String> listTabTitle, Context context) {this.listView = listView;this.listTabTitle = listTabTitle;this.context = context;}@Nullable@Overridepublic CharSequence getPageTitle(int position) {return listTabTitle.get(position);}@Overridepublic int getCount() {return listView.size();}@NonNull@Overridepublic Object instantiateItem(@NonNull ViewGroup container, int position) {container.addView(listView.get(position),0);return listView.get(position);}@Overridepublic void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {container.removeView(listView.get(position));}@Overridepublic boolean isViewFromObject(@NonNull View view, @NonNull Object object) {return view == object;} }

調用代碼

MainActivity.java

package com.dingjiaxiong.mytablayout;import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.ViewPager; import androidx.viewpager2.widget.ViewPager2;import android.os.Bundle; import android.view.LayoutInflater; import android.view.View;import com.google.android.material.tabs.TabLayout;import java.util.ArrayList; import java.util.List;public class MainActivity extends AppCompatActivity {private TabLayout tabLayout;private ViewPager viewpager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);viewpager = findViewById(R.id.view_pager);tabLayout = findViewById(R.id.tab_layout);LayoutInflater layoutInflater = getLayoutInflater();View view1 = layoutInflater.inflate(R.layout.layout1, null);View view2 = layoutInflater.inflate(R.layout.layout2, null);View view3 = layoutInflater.inflate(R.layout.layout3, null);View view4 = layoutInflater.inflate(R.layout.layout4, null);List<View> viewList = new ArrayList<>();viewList.add(view1);viewList.add(view2);viewList.add(view3);viewList.add(view4);List<String> listTabTitle = new ArrayList<>();listTabTitle.add("選項卡1");listTabTitle.add("選項卡2");listTabTitle.add("選項卡3");listTabTitle.add("選項卡4");MyAdapter myAdapter = new MyAdapter(viewList,listTabTitle,this);viewpager.setAdapter(myAdapter);} }

運行

總結

以上是生活随笔為你收集整理的Android学习笔记 56. TabLayout 选项卡布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。