Android 5.0 新控件 TabLayout實現導航欄

TabLayout 是 Android Support Design 庫裏的新控件，因此使用 TabLayout 須要先導入 Design 庫。

implementation 'com.android.support:design:28.+'
複製代碼

效果圖：

activity_main.xml

<?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" android:orientation="vertical" tools:context=".MainActivity">

    <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="@color/colorAccent" app:tabMode="scrollable" app:tabSelectedTextColor="@color/colorAccent" app:tabTextColor="@color/colorPrimary"/>

    <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent"/>

</LinearLayout>
複製代碼

MainActivity.java

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

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private List<String> titles = new ArrayList<>();
    private List<String> contents = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TabLayout tabLayout = findViewById(R.id.tabLayout);
        ViewPager viewPager = findViewById(R.id.viewPager);

        for (int i = 0; i < 10; i++) {
            titles.add("tab" + i);
            contents.add("tab" + i);
            tabLayout.addTab(tabLayout.newTab());
        }

        viewPager.setAdapter(new PagerAdapter(getSupportFragmentManager(), titles, contents));

        tabLayout.setupWithViewPager(viewPager);
    }


}

複製代碼

PageAdapter.java

import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

public class PagerAdapter extends FragmentPagerAdapter {
    private List<String> titles;
    private List<String> contents;

    public PagerAdapter(FragmentManager fm, List<String> titles, List<String> contents) {
        super(fm);
        this.titles = titles;
        this.contents = contents;
    }

    @Override
    public Fragment getItem(int i) {
        return PageFragment.newInstance(contents.get(i));
    }

    @Override
    public int getCount() {
        return titles.size();
    }

    /** * 設置標籤標題 * * @param position * @return */
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

複製代碼

PageFragment.java

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


public class PageFragment extends Fragment {


    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        TextView tv = view.findViewById(R.id.tv);
        tv.setText(getArguments().getString("content"));
        return view;
    }

    public static PageFragment newInstance(String msg) {
        PageFragment fragment = new PageFragment();
        Bundle bundle = new Bundle();
        bundle.putString("content", msg);
        fragment.setArguments(bundle);
        return fragment;
    }
}

複製代碼

fragment_page

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">

    <TextView android:id="@+id/tv" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"/>

</android.support.constraint.ConstraintLayout>
複製代碼

可能碰見的問題：

• 1. 若是出現滑動卡頓問題？

fragment裏面沒有引入佈局文件。

• 2. 標題不顯示的問題？

沒有在adapter中設置 getPageTitle。

About Me

• 簡書

• 掘金

• Github