Android TabLayout加背景

简介

TabLayout是Android提供的一种用于实现Tab切换的控件,常用于底部导航栏或顶部导航栏。TabLayout可以与ViewPager结合使用,实现页面的切换和显示。本文将介绍如何给TabLayout添加背景,以优化用户界面的显示效果。

实现步骤

步骤一:准备资源文件

首先,需要准备一张背景图片作为TabLayout的背景。可以选择一张合适的图片,推荐使用高清晰度的图片以保证显示效果。

步骤二:创建TabLayout

在布局文件中创建一个TabLayout控件,并设置其宽度和高度。在代码中引用该控件,并通过findViewById()方法获取其实例。

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/tab_background"
    />

步骤三:设置背景

在代码中,通过调用setBackgroundResource()方法给TabLayout设置背景图片。

TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.setBackgroundResource(R.drawable.tab_background);

步骤四:使用TabLayout

在使用TabLayout之前,需要先创建Tab对象,并添加到TabLayout中。可以使用newTab()方法创建Tab对象,然后调用setText()方法设置标题,最后调用addTab()方法将Tab添加到TabLayout中。

TabLayout.Tab tab1 = tabLayout.newTab().setText("Tab 1");
TabLayout.Tab tab2 = tabLayout.newTab().setText("Tab 2");
TabLayout.Tab tab3 = tabLayout.newTab().setText("Tab 3");

tabLayout.addTab(tab1);
tabLayout.addTab(tab2);
tabLayout.addTab(tab3);

步骤五:与ViewPager结合使用

如果需要与ViewPager结合使用,可以调用setupWithViewPager()方法将TabLayout与ViewPager关联起来。ViewPager是一个用于实现页面切换的控件,可以在其中添加多个Fragment。

ViewPager viewPager = findViewById(R.id.view_pager);
viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));

tabLayout.setupWithViewPager(viewPager);

完整代码示例

以下是一个完整的代码示例,展示了如何给TabLayout添加背景。

// MainActivity.java
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

        TabLayout tabLayout = findViewById(R.id.tab_layout);
        tabLayout.setBackgroundResource(R.drawable.tab_background);

        TabLayout.Tab tab1 = tabLayout.newTab().setText("Tab 1");
        TabLayout.Tab tab2 = tabLayout.newTab().setText("Tab 2");
        TabLayout.Tab tab3 = tabLayout.newTab().setText("Tab 3");

        tabLayout.addTab(tab1);
        tabLayout.addTab(tab2);
        tabLayout.addTab(tab3);

        ViewPager viewPager = findViewById(R.id.view_pager);
        viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));

        tabLayout.setupWithViewPager(viewPager);
    }
}

// MyPagerAdapter.java
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyPagerAdapter extends FragmentPagerAdapter {

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new Fragment1();
            case 1:
                return new Fragment2();
            case 2:
                return new Fragment3();
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return 3;
    }
}

// Fragment1.java
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment1 extends Fragment {

    public Fragment1() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_1, container, false);
    }
}

// fragment_1.xml
<FrameLayout xmlns:android="
    xmlns:tools="
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">