android.support.design.widget.TabLayout的使用

最新推荐文章于 2021-05-28 20:36:22 发布

原创最新推荐文章于 2021-05-28 20:36:22 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何在Android应用中使用TabLayout控件实现标签导航栏。包括TabLayout的基本配置方法、XML布局设置及Java代码实现。重点讲解了app:tabMode和app:tabGravity属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先依赖不然tableLayout控件没法调出：

compile 'com.android.support:design:26+'
在android 5.0之后，google把一些控件进行了集成，这里面就有
一个新的控件TabLayout，它就可以完成上面的功能了。
首先sdk的版本必须是22，要想使用这个控件，你必须下载或更新
sdk的版本，你要更新的22也就是5.1的版本，才会有这个控件的出现。

xml:布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--  
        android design library提供的TabLayout控件  
        tabIndicatorColor：菜单下方移动的横线的颜色  //不写默认为红色
        tabSelectedTextColor ：菜单被选中之后的颜色  
        tabTextColor : 菜单正常的颜色  
        app:tabTextAppearance : 添加样式，这里加了样式主要是为了在文字前面加一个图所用，就是把textAllCaps设置成false  
    -->
Android Material Design TabLayout属性app:tabMode和app: tabGravity
Android Material Design 中的TabLayout有两个比较有用的属性 app:tabMode、app:tabGravity，
（1）app:tabMode有两个值：fixed和scrollable。
（2）app:tabGravity有两个值：fill和center。
比较常用的是app:tabMode设置值scrollable，以及app:tabGravity设置值center。
比如，当app:tabMode设置值scrollable表示此TabLayout中当子view超出屏幕边界时候，将提供滑动以便滑出不可见的那些子view。
而app:tabGravity设置值center，在有些情况下，比如TabLayout中子view较少需要居中显示时候的情景。




    <android.support.design.widget.TabLayout
        android:id="@+id/tab_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/titleBlue"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/gray"
        app:tabTextColor="@color/white"
        app:tabGravity="center"
        app:tabMode="scrollable"
        app:tabTextAppearance="@style/tablayoutIcon"        />    <android.support.v4.view.ViewPager        android:id="@+id/vp_pager"        android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="1"        /></LinearLayout>

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private ViewPager vp;

    private List<String> list;

    List<Fragment> Fragmentlist = new ArrayList<Fragment>();
    private TabLayout table1;
    private framg f;

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

         //初始值
        indata();

         //滑动
        vp = (ViewPager) findViewById(R.id.vp);
         //获取Tablayout控件
        table1 = (TabLayout) findViewById(R.id.table);
          //实力适配器
        MyFragmentPagerAdapter my = new MyFragmentPagerAdapter(getSupportFragmentManager());
       //适配器
        vp.setAdapter(my);
        //设置TabLayout的模式
        table1.setTabMode(TabLayout.MODE_FIXED);
        //让tablayout和Viewpager关联;
        table1.setupWithViewPager(vp);

    }
    private void indata() {
        list = new ArrayList<String>();
        for (int i = 0; i < 4; i++) {
            list.add("首页" + i);//4个标题
            Fragmentlist.add(new framg());//4个frangment

        }
    }


    class MyFragmentPagerAdapter extends FragmentPagerAdapter {

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

        @Override
        public android.support.v4.app.Fragment getItem(int position) {

            return Fragmentlist.get(position);
        }

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

        //需要重写个返回标题的方法;
        @Override
        public CharSequence getPageTitle(int position) {
            return list.get(position);
        }
    }
}