1、先看下效果,ViewPager+Fragment使得页面的切换效果更佳自然,可以加底部tab按钮的单击切换效果,比较实用。
2、实现方法
(1)布局activity_main_viewpager
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v4.view.ViewPager
android:id="@+id/main_viewpager_vp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/white"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal"
android:layout_marginTop="1dp"
android:background="@color/white"
>
<LinearLayout
android:id="@+id/main_viewpager_message_ll"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="@+id/main_viewpager_message_iv"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:src="@mipmap/"
/>
<!--此处为下角标布局-->
<LinearLayout
android:id="@+id/main_viewpager_point_ll"
android:layout_width="18dp"
android:layout_height="18dp"
android:background="@drawable/raduios_red_bg_1"
android:layout_marginBottom="-10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:gravity="center"
android:layout_gravity="center_horizontal"
>
<TextView
android:id="@+id/main_viewpager_point_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="99"
android:textSize="10sp"
android:textColor="@color/white"
/>
</LinearLayout>
<TextView
android:id="@+id/main_viewpager_message_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/text_color_detail"
android:textSize="12sp"
android:text="消息"
android:layout_gravity="bottom|center_horizontal"
/>
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/main_viewpager_hr_ll"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="@+id/main_viewpager_hr_iv"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:src="@mipmap/"
/>
<LinearLayout
android:layout_width="18dp"
android:layout_height="18dp"
android:background="@drawable/raduios_red_bg_1"
android:layout_marginBottom="-10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:visibility="gone"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="99"
android:textSize="10sp"
android:textColor="@color/white"
/>
</LinearLayout>
<TextView
android:id="@+id/main_viewpager_hr_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/text_color_detail"
android:textSize="12sp"
android:text="HR"
android:layout_gravity="bottom|center_horizontal"
/>
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/main_viewpager_my_ll"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="@+id/main_viewpager_my_iv"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:src="@mipmap/"
/>
<LinearLayout
android:layout_width="18dp"
android:layout_height="18dp"
android:background="@drawable/raduios_red_bg_1"
android:layout_marginBottom="-10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:visibility="gone"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="99"
android:textSize="10sp"
android:textColor="@color/white"
/>
</LinearLayout>
<TextView
android:id="@+id/main_viewpager_my_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/text_color_detail"
android:textSize="12sp"
android:text="MY"
android:layout_gravity="bottom|center_horizontal"
/>
</FrameLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
(2)布局适配器PagerMainAdapter
public class PagerMainAdapter extends FragmentPagerAdapter {
private final List<Fragment> frags;
public PagerMainAdapter(FragmentManager fm, List<Fragment> frags) {
super(fm);
this.frags = frags;
}
@Override
public Fragment getItem(int position) {
return frags.get(position);
}
@Override
public int getCount() {
return frags.size();
}
}
(3)页面使用
/**
* Created by rjj on 2019/1/10
*/
public class PagerMainActivity extends BaseActivity implements View.OnClickListener {
@BindView(R.id.main_viewpager_vp)
ViewPager main_vp;
private List<Fragment> mFragments;
@Override
protected int getLayoutId() {
return R.layout.activity_main_viewpager;
}
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
StatusBarUtil1.setImmersiveStatusBar(this,true);
StatusBarUtil1.setStatusBarColor(this, getResources().getColor(R.color.white));
EventBus.getDefault().register(this);
}
@Override
protected void initView() {
ButterKnife.bind(this);
mFragments=new ArrayList<>();
mFragments.add(new OAFragment());
mFragments.add(new HRFragment());
mFragments.add(new MFragment());
// 设置填充器
main_vp.setAdapter(new PagerMainAdapter(getSupportFragmentManager(),mFragments));
// 设置缓存页面数
main_vp.setOffscreenPageLimit(3);
main_vp.setCurrentItem(1);//初始化页面
//初始化tab样式
message_iv.setBackgroundResource(R.mipmap.oa_icon_pre);
//滑动方法
main_vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
break;
case 1:
break;
case 2:
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
//底部tab的单击方法
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.main_viewpager_message_ll:
main_vp.setCurrentItem(0);//显示当前页内容
break;
case R.id.main_viewpager_hr_ll:
main_vp.setCurrentItem(1);
break;
case R.id.main_viewpager_my_ll:
main_vp.setCurrentItem(2);
}
}
}
3、其中的fragment页面
public class HRFragment extends BaseFragment {
@Override
protected void initView() {
}
@Override
protected int getLayoutId() {
return R.layout.fragment_e;
}
}