achieve effect
The effect is as follows. Use RadioGroup to achieve it. You cannot swipe left and right to switch pages. It is suitable for scenes where you need to switch pages in the navigation page. If you need a sliding effect, use ViewPager to achieve it.
Preparation
The following example is implemented according to the figure, and the specific number of pages can be modified as needed.
Since the icon is needed, download the icon to the drawable file in advance.
Define the style in advance
Create a new styles.xml under the values file, which is used as the layout style of the fragment. The code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="fragment">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:padding">5dp</item>
<item name="android:gravity">center</item>
<item name="android:textColor">@drawable/rb_text_color</item>
<item name="android:textSize">10dp</item>
<item name="android:textStyle">normal</item>
</style>
</resources>For the selection icon style of the home page, create a new rb_home_selector.xml under the drawable file, the code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/home2" android:state_selected="true" />
<item android:drawable="@drawable/home" />
</selector>
Personal page icon, create a new rb_mine_selector.xml under drawable, as follows:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/mine2" android:state_selected="true" />
<item android:drawable="@drawable/mine" />
</selector>When selecting the font style of the page, create a new rb_text_color.xml under drawable, as follows;
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#1296db"/>
<item android:color="#808080"/>
</selector>Use the replace method code to achieve
What is the replace method, using the replace method, when the fragment is switched, the current fragment will be destroyed, and then recreated when the next switch comes back, which is suitable for the scene where the fragment is only used once.
The activity_main.xml code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/fragment_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
/>
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/rg_group"
android:layout_alignParentBottom="true"
android:background="#ffff"
android:orientation="horizontal"
>
<RadioButton
android:id="@+id/rb_home"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
style="@style/fragment"
android:drawableTop="@drawable/rb_home_selector"
android:text="首页"
/>
<RadioButton
android:id="@+id/rb_mine"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
style="@style/fragment"
android:drawableTop="@drawable/rb_mine_selector"
android:text="我的"
/>
</RadioGroup>
</RelativeLayout>The MainActivity class is as follows:
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
private RadioButton rb_home,rb_mine;
private RadioGroup rg_group;
private List<Fragment> fragments;
private int position=0;
private static final String TAG = "MainActivity";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.getSupportActionBar().hide();//去除标题栏
rb_home=findViewById(R.id.rb_home);
rb_mine=findViewById(R.id.rb_mine);
rg_group=findViewById(R.id.rg_group);
//默认选中第一个
rb_home.setSelected(true);
rg_group.setOnCheckedChangeListener(this);
//初始化fragment
initFragment();
//默认布局，选第一个
defaultFragment();
}
private void defaultFragment() {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.fragment_layout,fragments.get(0));
transaction.commit();
}
private void setSelected() {
rb_home.setSelected(false);
rb_mine.setSelected(false);
}
private void initFragment() {
fragments = new ArrayList<>();
fragments.add(0,new homeFragment());
fragments.add(1,new mineFragment());
}
@Override
public void onCheckedChanged(RadioGroup group, int i) {
//获取fragment管理类对象
FragmentManager fragmentManager = getSupportFragmentManager();
//拿到fragmentManager的触发器
FragmentTransaction transaction = fragmentManager.beginTransaction();
switch (i) {
case R.id.rb_home:
position = 0;
//调用replace方法，将fragment,替换到fragment_layout这个id所在UI，或者这个控件上面来
//这是创建replace这个事件，如果想要这个事件执行，需要把这个事件提交给触发器
//用commit()方法
transaction.replace(R.id.fragment_layout, fragments.get(0));
//将所有导航栏设成默认色
setSelected();
rb_home.setSelected(true);
break;
case R.id.rb_mine:
position = 1;
transaction.replace(R.id.fragment_layout, fragments.get(1));
//将所有导航栏设成默认色
setSelected();
rb_mine.setSelected(true);
break;
}
//事件的提交
transaction.commit();
}
}Create a new fragment class as shown in the figure below, and create an xml file together
homeFragment.java code: the specific logic of this class writing page
public class homeFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_home, container, false);
return view;
}
}The mineFragment class is the same as above, slightly.
Just write the page layout as needed in fragment_home.xml and fragment_mine.xml.
Finish.
Use the add and hide methods
Use add, hide, and show methods to display hidden fragments. When switching back to the current fragment next time, the fragment will not be recreated. It is suitable for scenarios where fragments are used multiple times, such as the navigation bar.
The layout is the same as the layout of the above method.
Only modify the MainActivity class:
First judge whether there are fragments added, if not, add fragments (note that judgment is required, repeated additions will report an error), hide all fragments, and then display the currently selected fragments.
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
private RadioButton rb_home,rb_schedule,rb_circle,rb_rank,rb_mine;
private RadioGroup rg_group;
private List<Fragment> fragments;
private int position=0;
private static final String TAG = "MainActivity";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setStatusBar();//设置状态栏和标题栏
rb_home=findViewById(R.id.rb_home);
rb_schedule=findViewById(R.id.rb_schedule);
rb_circle=findViewById(R.id.rb_circle);
rb_rank=findViewById(R.id.rb_rank);
rb_mine=findViewById(R.id.rb_mine);
rg_group=findViewById(R.id.rg_group);
//默认选中第一个
rb_home.setSelected(true);
rg_group.setOnCheckedChangeListener(this);
//初始化fragment
initFragment();
//默认布局，选第一个
defaultFragment();
}
private void defaultFragment() {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.add(R.id.fragment_layout,fragments.get(0));
transaction.commit();
}
private void setSelected() {
rb_home.setSelected(false);
rb_schedule.setSelected(false);
rb_circle.setSelected(false);
rb_rank.setSelected(false);
rb_mine.setSelected(false);
}
private void initFragment() {
fragments = new ArrayList<>();
fragments.add(0,new HomeFragment());
fragments.add(1,new ScheduleFragment());
fragments.add(2,new CircleFragment());
fragments.add(3,new RankFragment());
fragments.add(4,new MineFragment());
}
@Override
public void onCheckedChanged(RadioGroup group, int i) {
//获取fragment管理类对象
FragmentManager fragmentManager = getSupportFragmentManager();
//拿到fragmentManager的触发器
FragmentTransaction transaction = fragmentManager.beginTransaction();
switch (i) {
case R.id.rb_home:
position = 0;
// transaction.replace(R.id.fragment_layout, fragments.get(0));
if(!fragments.get(0).isAdded())
transaction.add(R.id.fragment_layout,fragments.get(0));
hideFragment(transaction);
transaction.show(fragments.get(0));
//将所有导航栏设成默认色
setSelected();
rb_home.setSelected(true);
break;
case R.id.rb_schedule:
position = 1;
if(!fragments.get(1).isAdded())
transaction.add(R.id.fragment_layout,fragments.get(1));
hideFragment(transaction);
transaction.show(fragments.get(1));
//将所有导航栏设成默认色
setSelected();
rb_schedule.setSelected(true);
break;
case R.id.rb_circle:
position = 2;
if(!fragments.get(2).isAdded())
transaction.add(R.id.fragment_layout,fragments.get(2));
hideFragment(transaction);
transaction.show(fragments.get(2));
//将所有导航栏设成默认色
setSelected();
rb_circle.setSelected(true);
break;
case R.id.rb_rank:
position = 3;
if(!fragments.get(3).isAdded())
transaction.add(R.id.fragment_layout,fragments.get(3));
hideFragment(transaction);
transaction.show(fragments.get(3));
//将所有导航栏设成默认色
setSelected();
rb_rank.setSelected(true);
break;
case R.id.rb_mine:
position = 4;
if(!fragments.get(4).isAdded())
transaction.add(R.id.fragment_layout,fragments.get(4));
hideFragment(transaction);
transaction.show(fragments.get(4));
//将所有导航栏设成默认色
setSelected();
rb_mine.setSelected(true);
break;
}
//事件的提交
transaction.commit();
}
private void hideFragment(FragmentTransaction transaction){
if(fragments.get(0) != null){
transaction.hide(fragments.get(0));
}
if(fragments.get(1) != null){
transaction.hide(fragments.get(1));
}
if(fragments.get(2) != null) {
transaction.hide(fragments.get(2));
}
if(fragments.get(3) != null){
transaction.hide(fragments.get(3));
}
if(fragments.get(4) != null){
transaction.hide(fragments.get(4));
}
}
}