带新手快速开发AndroidApp（2）- 首页框架——TabLayout布局搭建

本文链接：https://blog.csdn.net/mouyong/article/details/88345842

摘要：第一个首页框架的搭建。

首页框架——TabLayout布局搭建

什么是TabLayout
- Google在14年Google I/O上推出全新的设计语言——Material Design。一并推出了一系列实现Material Design效果的控件库——Android Design Support Library。其中TabLayout就是之一
TabLayout布局
- ButlerFragment（管家服务）
- WechatFragment（微信精选）
- GirlFragment(美女社区）
- UserFragment（个人中心）
- ViewPager(实现左右滑动的效果)
- 样式（需要定义一个app样式源）
  - xmlns:app=“http://schemas.android.com/apk/res-auto”

build.gradle
- 在dependencies块中添加：implementation ‘com.android.support:design:28.0.0’，用于引用TabLayout

activity_main.xml

修改布局为LinearLayout
添加app命名空间:xmlns:app=“http://schemas.android.com/apk/res-auto”
添加TabLayout

<!-- TabLayout
 tabGravity:最顶端的选项卡的对齐方式
    centre：居中对齐
    fill:两端对齐（我觉得这个解释更好）
 tabMode:最顶端的选项卡的行为模式
    scrollable：可滑动，向左对齐，但是选项卡较少时在右边会出现白边
    fixed：固定，每个选项卡平均分配空间。
 tabTextColor:选项卡文字的颜色
 tabSelectedTextColor:被选项卡选中后文字的颜色
 -->
<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/mTabLayout"
    android:background="@color/colorPrimary"
    app:tabGravity="fill"
    app:tabMode="fixed"
    app:tabTextColor="@android:color/white"
    app:tabSelectedTextColor="@color/colorAccent"></android.support.design.widget.TabLayout>

fragment包下创建四个fragment

ButlerFragment

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

WechatFragment
GirlFragment
UserFagment

layout下创建四个layout

fragment_butler.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/smart_manager"
        android:textSize="30sp"/>
</LinearLayout>

fragment_wechat.xml
fragment_pretty.xml
fragment_personal.xml

创建MainActivity

/**
 * 项目名：  NewbieFollowMe
 * 包名：    com.speakermore.newbiefollowme.utils
 * 文件名：  MainActivity
 * 创建者：  默然说话(mouyong)
 * 创建时间：2019-2-11 10:36
 * 类功能简介：主Activity，负责初始化界面加载
*/
public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;//选项卡
    private ViewPager mViewPager;//让选项卡可以左右滑动的控件
    private List<Integer> mTitle;//选项卡标题
    private List<Fragment> mFragment;//选项卡界面


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //去掉阴影:0表示不要阴影
        // （查了下，好像是说Elevation有高度的作用，设置为0时阴影会躲到后面看不见了。）
        getSupportActionBar().setElevation(0);
        initDate();
        initView();
    }

    /**
     * 初始化View
     */
    private void initView() {
        mTabLayout = findViewById(R.id.mTabLayout);
        mViewPager = findViewById(R.id.mViewPager);

        //预加载
        mViewPager.setOffscreenPageLimit(mFragment.size());

        //设置适配器
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            //选中的item
            @Override
            public Fragment getItem(int i) {
                return mFragment.get(i);
            }
            //选项卡总数
            @Override
            public int getCount() {
                return mFragment.size();
            }

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return getResources().getString(mTitle.get(position));
            }
        });
        //绑定
        mTabLayout.setupWithViewPager(mViewPager);
    }

    /**
     * 初始化界面数据
     * 1. 选项卡数据
     * 2. 四个选项卡Fragment
     */
    private void initDate() {
        //选项卡标题
        mTitle = new ArrayList<>();
        mTitle.add(R.string.smart_manager);
        mTitle.add(R.string.wechat_selection);
        mTitle.add(R.string.pretty_community);
        mTitle.add(R.string.personal_center);
        //选项卡界面
        mFragment = new ArrayList<>();
        mFragment.add(new ButlerFragment());
        mFragment.add(new WeChatFragment());
        mFragment.add(new PrettyFragment());
        mFragment.add(new PersonalFragment());
    }
}