Cách tạo bố cục tab trong ứng dụng Android?

Ví dụ này giải thích cách tôi tạo Bố cục tab trong ứng dụng android.

Bước 1 - Tạo một dự án mới trong Android Studio, đi tới Tệp ⇒ Dự án Mới và điền tất cả các chi tiết cần thiết để tạo một dự án mới.

Bước 2 - Thêm phần phụ thuộc sau để tạo bố cục tab -

implementation 'com.android.support:design:28.0.0'

Bước 3 - Thêm mã sau vào res / layout / activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:tools="https://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">
   <android.support.design.widget.TabLayout
      android:id="@+id/tabLayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#1db995">
   </android.support.design.widget.TabLayout>
   <android.support.v4.view.ViewPager
      android:id="@+id/viewPager"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@id/tabLayout"
      android:layout_centerInParent="true"
      android:layout_marginTop="100dp"
      tools:layout_editor_absoluteX="8dp" />
</RelativeLayout>

Bước 4 - Thêm mã sau vào src / MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
public class MainActivity extends AppCompatActivity {
   TabLayout tabLayout;
   ViewPager viewPager;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      tabLayout = findViewById(R.id.tabLayout);
      viewPager = findViewById(R.id.viewPager);
      tabLayout.addTab(tabLayout.newTab().setText("Football"));
      tabLayout.addTab(tabLayout.newTab().setText("Cricket"));
      tabLayout.addTab(tabLayout.newTab().setText("NBA"));
      tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
      final MyAdapter adapter = new MyAdapter(this,getSupportFragmentManager(),
      tabLayout.getTabCount());
      viewPager.setAdapter(adapter);
      viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
      tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
         @Override
         public void onTabSelected(TabLayout.Tab tab) {
            viewPager.setCurrentItem(tab.getPosition());
         }
         @Override
         public void onTabUnselected(TabLayout.Tab tab) {
         }
         @Override
         public void onTabReselected(TabLayout.Tab tab) {
         }
      });
   }
}

Bước 5 - Tạo một lớp java (MyAdapter.java) và thêm mã sau -

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentManager;
class MyAdapter extends FragmentPagerAdapter {
   Context context;
   int totalTabs;
   public MyAdapter(Context c, FragmentManager fm, int totalTabs) {
      super(fm);
      context = c;
      this.totalTabs = totalTabs;
   }
   @Override
   public Fragment getItem(int position) {
      switch (position) {
         case 0:
            Football footballFragment = new Football();
         return footballFragment;
         case 1:
            Cricket cricketFragment = new Cricket();
         return cricketFragment;
         case 2:
            NBA nbaFragment = new NBA();
         return nbaFragment;
         default:
         return null;
      }
   }
   @Override
   public int getCount() {
      return totalTabs;
   }
}

Bước 6 - Bây giờ tạo các mảnh và bố cục (Nhấp chuột phải vào dự án>> Mới>> Phân mảnh>> Trống -

a) FootBall.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Football extends Fragment {
   public Football() {
      // Required empty public constructor
   }
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
      return inflater.inflate(R.layout.fragment_football, container, false);
   }
}

gment_football.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:tools="https://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".Football">
   <!-- TODO: Update blank fragment layout -->
   <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:textAlignment="center"
      android:text="Football Fragment"
      android:textSize="16sp"
      android:textStyle="bold"/>
</FrameLayout>

b) Cricket.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Cricket extends Fragment {
   public Cricket() {
      // Required empty public constructor
   }
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
      return inflater.inflate(R.layout.fragment_cricket, container, false);
   }
}

gment_cricket.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:tools="https://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".Cricket">
   <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:textAlignment="center"
      android:text="Cricket Fragment"
      android:textSize="16sp"
      android:textStyle="bold"/>
</FrameLayout>

c) NBA.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class NBA extends Fragment {
   public NBA() {
      // Required empty public constructor
   }
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
      return inflater.inflate(R.layout.fragment_nb, container, false);
   }
}

gment_nba.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:tools="https://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".NBA">
   <!-- TODO: Update blank fragment layout -->
   <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:textAlignment="center"
      android:text="NBA Fragment"
      android:textSize="16sp"
      android:textStyle="bold"/>
</FrameLayout>

Bước 7 - Thêm mã sau vào androidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
   package="app.com.sample">
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:supportsRtl="true"
      android:theme="@style/AppTheme">
      <activity android:name=".MainActivity">
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>
</manifest>

Hãy thử chạy ứng dụng của bạn. Tôi giả sử bạn đã kết nối thiết bị Di động Android thực tế với máy tính của mình. Để chạy ứng dụng từ android studio, hãy mở một trong các tệp hoạt động của dự án của bạn và nhấp vào biểu tượng Chạy từ thanh công cụ. Chọn thiết bị di động của bạn làm tùy chọn, sau đó kiểm tra thiết bị di động sẽ hiển thị màn hình mặc định của bạn -

Cách tạo bố cục tab trong ứng dụng Android?