TableLayout+ViewPager+Fragment开发标题栏索引

    今天尝试使用了一下原生的高级控件TableLayout和ViewPager还有Fragment撸一个可以滑动的标题索引栏。

    要使用这些高级控件我们先添加一下design包，如下图在AS中添加最新的design包：

                                         

                                        

                                            

       添加后就可以使用design包里面的UI控件了，上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"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabTextColor="@android:color/white"
        app:tabGravity="fill"
        android:background="@color/colorPrimary"
        android:id="@+id/tb_home"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_home"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">

    </android.support.v4.view.ViewPager>

</LinearLayout>

TabLayout属性：

app:tabSelectedTextColor=""    改变选中字体的颜色

app:tabIndicatorColor=""   改变指示器下标的颜色

app:tabTextColor="" 改变未选中字体的颜色

 

app:tabMode ="" 

布局中Tab的行为模式（behavior mode），有两种值：MODE_FIXED 和 MODE_SCROLLABLE。

MODE_FIXED:固定tabs，并同时显示所有的tabs。

MODE_SCROLLABLE：可滚动tabs，显示一部分tabs，在这个模式下能包含长标签和大量的tabs，最好用于用户不需要直接比较tabs。

 

app:tabGravity = ""

放置Tab的Gravity,有GRAVITY_CENTER 和 GRAVITY_FILL两种效果。顾名思义，一个是居中，另一个是尽可能的填充（注意，GRAVITY_FILL需要和MODE_FIXED一起使用才有效果）

        下面讲讲MainActivity的实现逻辑，我设置了4个滑动界面，所以就需要创建4个Fragment和4个Title。然后把它们存放在List里面，当然也是可以有数组来存放的，不过为了更好的拓展还是建议用List。

          然后findviwebyId找到控件，做一下ViewPager的预加载。原理是先获取到Fragment的总数创建出响应数目的空间，当滑动进去界面的时候再把数据放进去显示。

          因为ViewPager 继承的是ViewGroup，所以设置一个适配器，创建一个匿名的FragmentPagerAdapter,调用回调方法。把TableLayout绑定ViewPager就完成。代码如下：

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;

    private ViewPager viewPager;

    private List<Fragment> fragments;

    private List<String> titles;


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

        //去掉阴影
        getSupportActionBar().setElevation(0);

        initView();
        initData();
    }
    //初始化View
    private void initView() {

        titles = new ArrayList<>();
        titles.add(getBaseContext().getString(R.string.titles_item1));
        titles.add(getBaseContext().getString(R.string.titles_item2));
        titles.add(getBaseContext().getString(R.string.titles_item3));
        titles.add(getBaseContext().getString(R.string.titles_item4));


        fragments = new ArrayList<>();
        fragments.add(new Item1Fragment());
        fragments.add(new Item2Fragment());
        fragments.add(new Item3Fragment());
        fragments.add(new Item4Fragment());

    }

    //初始化数据
    private void initData() {
        tabLayout = findViewById(R.id.tb_home);
        viewPager = findViewById(R.id.vp_home);

        //预加载
        viewPager.setOffscreenPageLimit(fragments.size());

        //设置适配器
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            //选中的ITem
            @Override
            public Fragment getItem(int i) {
                return fragments.get(i);
            }
            //返回Item个数
            @Override
            public int getCount() {
                return fragments.size();
            }
            //设置标题
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return titles.get(position);
            }
        });

        tabLayout.setupWithViewPager(viewPager);
    }
}

然后是Fragment的类与XML

public class Item1Fragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_item1,null);
        return view;
    }
}

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@android:color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:textSize="30sp"
        android:text="@string/titles_item1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


</LinearLayout>

这样一个简单的标题栏索引就完成了，当然我们也可以做成底部的导航栏，有兴趣的可以去了解下。

原创链接：https://blog.csdn.net/weixin_40600325/article/details/83415835