摘要:第一个首页框架的搭建。
首页框架——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());
}
}
- 完成,可以在模拟器查看界面效果了。