TabLayout+ViewPager+Fragment实现底部
2019-06-21 本文已影响0人
dashingqi
简介
-
现在市面上很多App的界面样式（如下动图显示）实现都是此效果的，这样我们就来简单实现一个类似的效果
tv.gif
-
今天我们得主角是 TabLayout ViewPager 和 Fragment
实现代码
TabLayout
在使用TabLayout之前，我们先介绍几个关于它的属性，TabLayout是Android 中Material Design提供的！
- app:tabBackground
设置TabLayout的背景颜色和设置background属性的效果是一样的。
- app:tabIndicatorHeight
设置指示器的高度，如果不想显示指示器，可以设置为0dp
- app:tabSelectedTextColor
被选中时文字的颜色
- app:tabIndicatorColor
指示器的颜色
- app:tabMode
Tablayout的滑动模式 移动有两种模式 scrollable：就是上文中动态显示效果 fixed:默认模式，及时没有滑动的效果，将所有的标题在屏幕中都显示出来。
具体的实现代码
- 布局文件
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/mTabLayout"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="@color/colorAccent"
app:tabBackground="@color/colorPrimary"
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="#ffffff"
app:tabIndicatorColor="@color/colorAccent"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="@+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
- ViewPager的适配器的创建
public class MyFragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments;
private List<String> mTitles;
public MyFragmentAdapter(FragmentManager fm, List<Fragment> mFragments, List<String> mTitles) {
super(fm);
this.mFragments = mFragments;
this.mTitles = mTitles;
}
@Override
public Fragment getItem(int i) {
return mFragments.get(i);
}
@Override
public int getCount() {
return mFragments.size();
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
}
- 初始化数据将viewPager设置到TabLayout中
for (int i = 1; i <= 7; i++) {
mTitles.add("标题" + i);
}
for (int i = 1; i <= 7; i++) {
mFragments.add(MyFragment.newInstance("Fragment" + i));
}
}
private void initViewPager() {
MyFragmentAdapter myFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager(), mFragments, mTitles);
mViewPager.setAdapter(myFragmentAdapter);
mTabLayout.setupWithViewPager(mViewPager);
}
- Fragment中设置数据与获取数据
public class MyFragment extends Fragment {
private TextView mTvText;
private String value;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_my, container, false);
mTvText = view.findViewById(R.id.mTvText);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
getData();
if (value != null) {
mTvText.setText(value);
}
}
public static MyFragment newInstance(String data) {
MyFragment myFragment = new MyFragment();
Bundle bundle = new Bundle();
bundle.putString("myFragment", data);
myFragment.setArguments(bundle);
return myFragment;
}
private void getData() {
Bundle bundle = getArguments();
if (bundle != null) {
value = bundle.getString("myFragment");
}
}
}
结语
到这里就完事了，通过上面几个文件的代码就可以实现如此好看的UI效果，不错这就是Android平台的强大，也是Android端如此迷人之处，仅仅几个文件代码，就可以立马看到效果，
