Fragment+ViewPager+TabLayout
Fragment:把页面分为多个部分,提高页面利用率
ViewPager:实现视图左右滑动效果
TabLayout:可以实现带滑动效果的标题栏,灵活多变
第一部分:TabLayout

第二部分:ViewPager装载Fragment

首先,完成TabLayout
//添加控件
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent" />
//初始化
tabLayout.addTab(tabLayout.newTab().setText(tab));
//监听事件
tabLayout.addOnTabSelectedListener(this);
首先让TabLayout和ViewPager绑定在一起
//添加viewpager控件
tabLayout.setupWithViewPager(viewPager);
点击TabLayout,切换ViewPager
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
把Fragment和ViewPager绑定
//通过FragmentPagerAdapter 适配器,把Fragment作为数据填入到ViewPager中
public class MyPagerAdapter extends FragmentPagerAdapter {
//重写方法
}
思路解析:
运行(run)
加载布局文件
2:Fragment+ViewPager+TabLayout案例:
案例分析:
TabLayout + ViewPager 滑动切换和点击标签切换的一个效果。
TabLayout 支持横向滚动多标签设置,还可以支持指示器,支持与 ViewPager 进行联动。
导入需要的依赖包
页面布局中添加Tablayout和ViewPager
编写Fragment布局,创建Fragment对象
创建适配器,显示标题和内容
TabLayout 是属于 com.android.support:design 包的控件,所以需要依赖该包
<?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:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab_id"
app:tabSelectedTextColor="#E5AF35"
app:tabTextColor="#969696"
app:tabIndicatorColor="#E5AF35"
app:tabIndicatorHeight="5dp"
app:tabMode="scrollable"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_id"
android:layout_weight="8"
android:layout_width="match_parent"
android:layout_height="0dp">
</android.support.v4.view.ViewPager></LinearLayout>
从 xml 布局文件看,根布局为一个垂直的线性布局,包含 TabLayout 和 ViewPager。重点看一下 TabLayout 的几个常用属性值
Tablayout常用属性 |
app:tabBackground 标签布局的背景色 app:tabIndicatorColor 指示器的颜色 app:tabIndicatorHeight 指示器的高度(如果不需要指示器可以设置为0dp) app:tabMode 显示模式:默认 fixed(固定),scrollable(可横向滚动) app:tabPadding 标签内边距 app:tabSelectedTextColor 标签选中的文本颜色 app:tabTextAppearance 标签文本样式 app:tabTextColor 标签未选中的文本颜色 |
public class MainActivity extends AppCompatActivity {
private TabLayout tabId;
private ViewPager vpId;
private List<Fragment> list = new ArrayList<>();
private List<String> titles = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
tabId = findViewById(R.id.tab_id);
vpId = findViewById(R.id.vp_id);
list.add(new OneFragment());
list.add(new TwoFragment());
list.add(new OneFragment());
list.add(new TwoFragment());
titles.add("视频");
titles.add("新闻");
titles.add("图片");
titles.add("留言");
MyFragmentAdapter myFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager(), list, titles);
vpId.setAdapter(myFragmentAdapter);
//把viewPager和tabLayout绑定在一起,注释掉看看效果.
tabId.setupWithViewPager(vpId);
public class MyFragmentAdapter extends FragmentStatePagerAdapter {
private List<Fragment> list;
private List<String> titles;
public MyFragmentAdapter(FragmentManager fm, List<Fragment> list, List<String> titles) {
super(fm);
this.list = list;
this.titles = titles;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Fragment getItem(int i) {
return list.get(i);
}
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}}
public class OneFragment extends Fragment {
public OneFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_one, container, false);
}}
implementation 'com.github.bumptech.glide:glide:3.7.0'
implementation 'com.youth.banner:banner:1.4.9'
<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="200dp">
</com.youth.banner.Banner>
public class MainActivity extends AppCompatActivity implements OnBannerListener {
private Banner banner;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
banner = findViewById(R.id.banner);//一定要布局文件之后获取ID
List<Integer> imageList = new ArrayList<>();
int[] imageIDs = new int[]{R.drawable.gao, R.drawable.yun, R.drawable.img1};
List<String> nameList = new ArrayList<>();
String[] names = new String[]{"1", "2", "3", "4"};
imageList.add(imageIDs[0]);
imageList.add(imageIDs[1]);
imageList.add(imageIDs[2]);
nameList.add(names[0]);
nameList.add(names[1]);
nameList.add(names[2]);
banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
//圆点指示器(标题inside)
banner.setBannerTitles(nameList);
banner.setImages(imageList);
banner.setImageLoader(new MyLoader());
//设置图片加载器
banner.setBannerAnimation(Transformer.FlipHorizontal);
//动画
banner.setOnBannerListener(this);
//点击图片事件
banner.setDelayTime(1000);
banner.isAutoPlay(true);
banner.setIndicatorGravity(BannerConfig.CENTER);
banner.start();
}
4:
EventBus
implementation 'org.greenrobot:eventbus:3.1.1'
public class MessageWrap {
public final String message;
public static MessageWrap getInstance(String message) {
return new MessageWrap(message);
}
private MessageWrap(String message) {
this.message = message;
}
}
@Route(path = BaseConstants.LIBRARY_EVENT_BUS_ACTIVITY1)
public class EventBusActivity1 extends CommonActivity<ActivityEventBus1Binding> {
@Override
protected void doCreateView(Bundle savedInstanceState) {
// 为按钮添加添加单击事件
getBinding().btnReg.setOnClickListener(v -> EventBus.getDefault().register(this));
getBinding().btnNav2.setOnClickListener( v ->
ARouter.getInstance()
.build(BaseConstants.LIBRARY_EVENT_BUS_ACTIVITY2)
.navigation());
}
@Subscribe(threadMode = ThreadMode.MAIN)
public void onGetMessage(MessageWrap message) {
getBinding().tvMessage.setText(message.message);
}
}
@Subscribe(threadMode = ThreadMode.MAIN, sticky = true)
public void onGetStickyEvent(MessageWrap message) {
String txt = "Sticky event: " + message.message;
getBinding().tvStickyMessage.setText(txt);
}
private void publishStickyontent() {
String msg = getBinding().etMessage.getText().toString();
EventBus.getDefault().postSticky(MessageWrap.getInstance(msg));
ToastUtils.makeToast("Published : " + msg);
}