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

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

首页框架——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”

1. build.gradle
   • 在dependencies块中添加：implementation ‘com.android.support:design:28.0.0’，用于引用TabLayout
2. activity_main.xml
   • 修改布局为LinearLayout
   • 添加app命名空间:xmlns:app=“http://schemas.android.com/apk/res-auto”
   • 添加TabLayout

3. 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
4. layout下创建四个layout
   • fragment_butler.xml
   • fragment_wechat.xml
   • fragment_pretty.xml
   • fragment_personal.xml
5. 创建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 mTitle;//选项卡标题
    private List 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());
    }
}

6. 完成，可以在模拟器查看界面效果了。