Android 5.0 新控件 TabLayout实现导航栏

416 阅读1分钟

TabLayout 是 Android Support Design 库里的新控件,所以使用 TabLayout 需要先导入 Design 库。

implementation 'com.android.support:design:28.+'

效果图:

TabLayout

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里面没有引入布局文件。

    1. 标题不显示的问题?

没有在adapter中设置 getPageTitle。






About Me