RadioGroup+RadioButton个人认为是最好实现图文导航栏的所以写了这个demo,希望对各位有些帮助
实现的效果
在activity_main中
<RadioGroup
android:id="@+id/radio_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginBottom="10dp">
<RadioButton
android:id="@+id/raio_button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/tab_viewpager_screeplay_bg_icon1"
android:text="tab1"
android:checked="true"
android:textColor="@color/main_tab_btn_text"
android:drawablePadding="4dp"
android:textSize="10sp"
android:gravity="center"/>
<RadioButton
android:id="@+id/raio_button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/tab_viewpager_screeplay_bg_icon1"
android:text="tab2"
android:textColor="@color/main_tab_btn_text"
android:drawablePadding="4dp"
android:textSize="10sp"
android:gravity="center"/>
<RadioButton
android:id="@+id/raio_button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/tab_viewpager_screeplay_bg_icon1"
android:text="tab3"
android:textColor="@color/main_tab_btn_text"
android:drawablePadding="4dp"
android:textSize="10sp"
android:gravity="center"/>
<RadioButton
android:id="@+id/raio_button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/tab_viewpager_screeplay_bg_icon1"
android:text="tab4"
android:textColor="@color/main_tab_btn_text"
android:drawablePadding="4dp"
android:textSize="10sp"
android:gravity="center" />
<RadioButton
android:id="@+id/raio_button5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/tab_viewpager_screeplay_bg_icon1"
android:text="tab5"
android:textColor="@color/main_tab_btn_text"
android:drawablePadding="4dp"
android:textSize="10sp"
android:gravity="center"/>
</RadioGroup>
<androidx.viewpager.widget.ViewPager
android:layout_below="@id/radio_group"
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"/>
点击图片的切换tab_viewpager_screeplay_bg_icon1放在drawable文件内
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/icon_script_kill_no" android:state_checked="false"/>
<item android:drawable="@mipmap/icon_script_kill"/>
</selector>
点击文字颜色的变换main_tab_btn_text放在color文件内
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/black" android:state_checked="true"/>
<item android:color="#ff83888e"/>
</selector>
在MainActivity中
public class MainActivity extends AppCompatActivity {
private RadioGroup mGroup;
private ViewPager mPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}
private void initView() {
mGroup = (RadioGroup) findViewById(R.id.radio_group);
mPager = (ViewPager) findViewById(R.id.viewpager);
}
private void initData() {
ArrayList<Fragment> list = new ArrayList<>();
list.add(new Fragment1());
list.add(new Fragment2());
list.add(new Fragment3());
list.add(new Fragment4());
list.add(new Fragment5());
mPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {//这里如果是在Fragment中写导航栏getSupportFragmentManager()需要换成getFragmentManager()
@NonNull
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
});
mGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId){
case R.id.raio_button1:
mPager.setCurrentItem(0);
break;
case R.id.raio_button2:
mPager.setCurrentItem(1);
break;
case R.id.raio_button3:
mPager.setCurrentItem(2);
break;
case R.id.raio_button4:
mPager.setCurrentItem(3);
break;
case R.id.raio_button5:
mPager.setCurrentItem(4);
break;
}
}
});
mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mGroup.check(mGroup.getChildAt(position).getId());
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//设置mPager预加载页面数
mPager.setOffscreenPageLimit(4);
//设置默认首页
mPager.setCurrentItem(0);
}
}```