Bagaimana untuk melaksanakan TabLayout dengan ikon dalam Android?

TabLayout dengan ikon telah menjadi komponen UI yang popular dalam pembangunan Android. Ia memudahkan navigasi dalam aplikasi dengan menyediakan tab yang dibentangkan secara mendatar. Setiap tab mewakili kategori atau ciri yang berbeza dan boleh dipertingkatkan secara visual dengan menambahkan ikon. Gabungan ikon dan label memudahkan pengguna memahami tujuan setiap tab.

Dengan memilih tab, kandungan yang sepadan akan dipaparkan. Ini biasanya dilakukan dalam ViewPager. Untuk melaksanakan TabLayout dengan ikon, anda perlu membuat reka letak yang diperlukan dan mengurus serpihan atau aktiviti untuk setiap kandungan tab. Ia juga melibatkan penyesuaian penampilan agar sesuai dengan reka bentuk aplikasi. Penyelesaian navigasi ini bukan sahaja meningkatkan pengalaman pengguna tetapi juga meningkatkan kebolehgunaan aplikasi dengan menyediakan antara muka yang mesra pengguna dan menarik secara visual.

Susun atur tab

TabLayout ialah komponen UI dalam rangka kerja Android yang menyediakan pengguna dengan cara yang mesra pengguna untuk bekerja dengan tab yang disusun secara mendatar. Ciri serba boleh ini sering digunakan untuk mengatur dan mendayakan navigasi yang lancar antara berbilang skrin atau bahagian dalam aplikasi. Setiap label mewakili kategori atau ciri yang berbeza, dan pengguna boleh bertukar dengan mudah dengan hanya mengetik label yang sepadan.

TabLayout ialah komponen yang biasa digunakan dengan ViewPager. ViewPager bertanggungjawab untuk mengurus kandungan yang berkaitan dengan setiap tab. Gabungan ini membolehkan navigasi lancar antara serpihan atau aktiviti yang berbeza berdasarkan tab yang dipilih. Selain itu, TabLayout menawarkan pelbagai pilihan penyesuaian seperti menambah ikon, menetapkan label teks dan menggunakan gaya. Ciri-ciri ini menjadikannya boleh disesuaikan dan serba boleh untuk memenuhi pelbagai reka bentuk dan keperluan aplikasi.

Kaedah

Dalam Android, terdapat pelbagai cara untuk melaksanakan TabLayout, kami akan melihat beberapa cara biasa untuk melaksanakannya:

• Kaedah 1: Menggunakan paparan tersuai item tab

• Kaedah 2: Gunakan tetapan TabLayout lalai dengan ikon

Kaedah 1: Gunakan paparan tersuai sebagai item tab

Salah satu cara untuk menggabungkan TabLayout dengan ikon dalam Android ialah menggunakan paparan tersuai untuk setiap item tab. Kaedah ini memerlukan mereka bentuk fail susun atur XML yang unik untuk item tab, yang termasuk ImageView untuk ikon dan TextView untuk tajuk. Dalam Aktiviti atau Fragmen anda, anda boleh menyediakan TabLayout di sebelah ViewPager dan kemudian membuat paparan tab tersuai untuk setiap tab individu.

Paparan tersuai untuk setiap tab membolehkan anda mendapatkan semula dengan mudah. Dalam paparan ini, anda boleh menemui komponen ImageView dan TextView, menyesuaikan ikon dan tajuk mengikut keperluan. Dengan menggunakan paparan tersuai, pengguna mempunyai kawalan yang lebih besar ke atas penampilan dan reka letak item tab dalam TabLayout, membolehkan mereka memaparkan ikon yang sepadan dengan tajuk dengan lancar.

Algoritma

• Fail susun atur XML aktiviti atau serpihan utama harus dibuat yang termasuk TabLayout dan ViewPager.

Selain itu, fail susun atur XML yang berasingan harus dibuat untuk item tab tersuai, yang mengandungi ImageView dan TextView untuk memaparkan ikon dan tajuk masing-masing.

• Untuk mendapatkan rujukan TabLayout dan ViewPager dalam aktiviti atau serpihan, ID masing-masing harus digunakan

• ViewPager perlu menggunakan penyesuai yang sesuai untuk mengendalikan kandungan tab

Untuk menyambungkan TabLayout dengan ViewPager, anda boleh menggunakan kaedah setupWithViewPager().

• Gunakan gelung untuk mengulangi setiap tab dalam TabLayout. Untuk setiap tab, dapatkan semula objek Tabnya dan sesuaikan paparannya menggunakan kaedah setCustomView().

• Dalam paparan tersuai ini, cari ImageView dan TextView menggunakan ID masing-masing.

• Tetapkan maklumat ikon dan tajuk yang berkaitan untuk setiap tab dengan memanggil kaedah seperti setImageResource() dan setText() pada ImageView dan TextView

• Ulangi langkah secara berulang untuk semua tab mengkonfigurasi paparan tersuai mereka dengan ikon dan tajuk yang dikehendaki mengikut keperluan. Pilihan penyesuaian tersedia untuk melaraskan penampilan dan tingkah laku TabLayout kepada keperluan khusus.

• Selain itu, ciri lain boleh disepadukan, seperti bertindak balas kepada acara pemilihan tab atau mengemas kini kandungan dalam ViewPager berdasarkan perubahan tab.

Contoh

// activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.TabLayout
      android:id="@+id/tab_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      app:tabGravity="fill"
      app:tabMode="fixed"
      app:tabIndicatorHeight="0dp" />

   <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/view_pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_above="@id/tab_layout" />

</RelativeLayout>

//MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

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

public class MainActivity extends AppCompatActivity {

   private static final String[] tabTitles = {"Tab 1", "Tab 2", "Tab 3"};
   private static final int[] tabIcons = {R.drawable.ic_tab1, R.drawable.ic_tab2, R.drawable.ic_tab3};

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

      TabLayout tabLayout = findViewById(R.id.tab_layout);
      ViewPager2 viewPager = findViewById(R.id.view_pager);
      viewPager.setAdapter(new ViewPagerAdapter(this));

      new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
         tab.setIcon(tabIcons[position]);
         tab.setText(tabTitles[position]);
      }).attach();
   }
}

// ViewPagerAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class ViewPagerAdapter extends RecyclerView.Adapter<ViewPagerAdapter.ViewHolder> {

   private final Context context;

   public ViewPagerAdapter(Context context) {
      this.context = context;
   }

   @NonNull
   @Override
   public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
      View view = LayoutInflater.from(context).inflate(R.layout.item_view_pager, parent, false);
      return new ViewHolder(view);
   }

   @Override
   public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
      holder.textView.setText("Page " + (position + 1));
   }

   @Override
   public int getItemCount() {
      return 3; // Change this value based on the number of tabs
   }

   public static class ViewHolder extends RecyclerView.ViewHolder {
      TextView textView;

      public ViewHolder(View itemView) {
         super(itemView);
         textView = itemView.findViewById(R.id.textView);
      }
   }
}
ic_tab1.png, ic_tab2.png, ic_tab3.png in res/drawable

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

   <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textAppearance="?android:textAppearanceLarge" />

</LinearLayout>

Output

Kaedah 2: Gunakan tetapan TabLayout lalai dengan ikon

Cara lain untuk melaksanakan TabLayout dengan ikon dalam Android ialah memanfaatkan tetapan TabLayout lalai, yang menyokong termasuk ikon. Pendekatan ini menghapuskan keperluan untuk membuat paparan tersuai kerana ia membolehkan ikon diberikan terus ke setiap tab.

Selepas mengkonfigurasi TabLayout dengan ViewPager, anda boleh menyemak imbas setiap tab dengan mudah dan menentukan sumber ikon yang diperlukan menggunakan kaedah setIcon().

Dengan memanfaatkan pendekatan ini, anda boleh memanfaatkan kefungsian terbina dalam TabLayout untuk mengurus pemilihan dan penggayaan tab sambil memudahkan pelaksanaan. Pendekatan mudah ini memudahkan perkaitan ikon dengan tab dalam TabLayout, membantu mencapai perwakilan visual yang anda inginkan tanpa pengubahsuaian tambahan.

算法

• 需要为主 Activity 或片段创建 XML 布局文件。这包括合并 TabLayout 和 ViewPager 组件。

• 首先，在您的活动或片段中获取对TabLayout和ViewPager的引用。

• 接下来，使用适当的适配器设置ViewPager来处理选项卡的内容。使用setupWithViewPager()方法将TabLayout与ViewPager连接起来

• 然后，迭代 TabLayout 中的每个选项卡并使用 getTabAt() 方法检索它们各自的 Tab 对象。

• 如果 Tab 对象不为 null，则可以通过使用 setIcon() 设置图标来自定义其外观。

• 此外，根据您对TabLayout的期望外观和行为进行任何必要的调整

• 最后，处理可能需要的任何附加功能，例如响应选项卡选择电子事件或根据选项卡更改更新 ViewPager 中的内容。

程序

// activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.TabLayout
      android:id="@+id/tab_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      app:tabGravity="fill"
      app:tabMode="fixed"
      app:tabIndicatorHeight="0dp" />

   <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/view_pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_above="@id/tab_layout" />

</RelativeLayout>

// MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

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

public class MainActivity extends AppCompatActivity {

   private static final int[] tabIcons = {
         R.drawable.ic_tab1,
         R.drawable.ic_tab2,
         R.drawable.ic_tab3
   };

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

      TabLayout tabLayout = findViewById(R.id.tab_layout);
      ViewPager2 viewPager = findViewById(R.id.view_pager);
      viewPager.setAdapter(new ViewPagerAdapter(this));

      TabLayoutMediator mediator = new TabLayoutMediator(tabLayout, viewPager,
            (tab, position) -> tab.setIcon(tabIcons[position])
      );
      mediator.attach();
   }
}

// ViewPagerAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class ViewPagerAdapter extends RecyclerView.Adapter<
ViewPagerAdapter.ViewHolder> {

   private final Context context;

   public ViewPagerAdapter(Context context) {
      this.context = context;
   }

   @NonNull
   @Override
   public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
      View view = LayoutInflater.from(context).inflate(R.layout.item_view_pager, parent, false);
      return new ViewHolder(view);
   }

   @Override
   public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
      holder.textView.setText("Page " + (position + 1));
   }

   @Override
   public int getItemCount() {
      return 3; // Change this value based on the number of tabs
   }

   public static class ViewHolder extends RecyclerView.ViewHolder {
      TextView textView;

      public ViewHolder(View itemView) {
         super(itemView);
         textView = itemView.findViewById(R.id.textView);
      }
   }
}

ic_tab1.png, ic_tab2.png, ic_tab3.png in res/drawable

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

   <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textAppearance="?android:textAppearanceLarge" />

</LinearLayout>

输出

结论

总之，TabLayout 与图标的合并可以通过两种主要方法来实现：利用选项卡项的自定义视图或使用默认的 TabLayout 设置。自定义视图方法通过为每个选项卡项创建不同的 XML 布局文件来提供更大的灵活性和个性化。相反，默认设置通过直接将图标分配给各个选项卡来简化流程。

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan TabLayout dengan ikon dalam Android?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!