Counting from java, I have been studying Android for a year. From the beginning of the information is full of confusion, I do not know why? Switch to Android? No confidence at all. give up? Did n’t my hard work for a year go to waste? No gossip.
Most apps have a navigation bar at the bottom, like WeChat and QQ. I used to use textView to add some messy things, the code coupling is high, the implementation is complicated, and the reusability is low. Because the basic things are almost learned, recently started to contact some simple projects, and found that the framework is really a good thing. Although it is more difficult to get started, it is very convenient for later maintenance, code reuse, and horizontal expansion. Spike my cottage Bar ...
This is the bottom Bar that I extracted from an open source project and implemented with FragmentTabHost + RadioGroup. It is separated to facilitate later search. Let's go to the picture first.
Briefly talk about the principle: the bottom three buttons are RadioGroup, FragmentTabHost is connected to the main view (the largest piece on the screen) through the setup method, and the addTab method of FragmentTabHost can add Fragment to FragmentTabHost to switch the display. Then in the event monitoring of RadioGroup, you can switch the displayed Fragment through FragmentTabHost's setCurrentTab method.
Activity layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/frameLayout_nr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"></FrameLayout>
<android.support.v4.app.FragmentTabHost
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"></android.support.v4.app.FragmentTabHost>
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rbHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:drawablePadding="4dp"
android:drawableTop="@drawable/home"
android:gravity="center"
android:text="主页"
android:textColor="@drawable/text"
android:textSize="16sp" />
<RadioButton
android:id="@+id/rbMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="4dp"
android:drawableTop="@drawable/message"
android:gravity="center"
android:text="信息"
android:textColor="@drawable/text"
android:textSize="16sp" />
<RadioButton
android:id="@+id/rbProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="4dp"
android:drawableTop="@drawable/profile"
android:gravity="center"
android:text="我的"
android:textColor="@drawable/text"
android:textSize="16sp" />
</RadioGroup>
</LinearLayout>
The FrameLayout layout in the layout is used to associate the FragmentTabHost display content, which is the largest block in the screen mentioned above.
Not much to say about FragmentTabHost, it should be noted that android: visibility = ”gone”, because FragmentTabHost was originally a slider layout, we do not want to display the slider, so FragmentTabHost is hidden from display. Why put a component and hide it? Because we are going to use some methods of FragmentTabHost, in short, we can use the setCurrentTab method to switch and display some Fragments in FragmentTabHost that we associate in advance.
Next is a RadioGroup, which contains three RadioButtons, which are the three at the bottom Button. Among them, android: drawableTop = ”@ drawable / profile” and
android: textColor = ”@ drawable / text” set the key color switch:
Picture status switch
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/ic_tabbar_home_selected" android:state_checked="true"/>
<item android:drawable="@mipmap/ic_tabbar_home_normal" android:state_checked="false"/>
</selector>Text state switching
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#ffab00" android:state_checked="true"/>
<item android:color="#000" android:state_checked="false"/>
</selector>Next, we need to provide three Fragments to the three RadioButtons. We only need to display some simple things to tell ourselves that the interface has been switched. The source code is not posted.
Then Activity
public class MainActivity extends AppCompatActivity{
private FrameLayout frameLayout_nr;
private FragmentTabHost tabHost;
private RadioGroup radioGroup;
private Class fragments[];
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initialize();
}
private void initialize(){
fragments = new Class[]{HomeFragment.class,MessageFragment.class,ProfileFragment.class};
frameLayout_nr = (FrameLayout)findViewById(R.id.frameLayout_nr);
tabHost = (FragmentTabHost) findViewById(R.id.tab);
radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
tabHost.setup(getApplicationContext(),getSupportFragmentManager(),R.id.frameLayout_nr); //tabHost关联上下文，FragmentManager和显示区域
for (int i = 0; i < fragments.length ; i++) { //向TabHost中添加fragment和标志位
TabHost.TabSpec tabSpec = tabHost.newTabSpec(String.valueOf(i)).setIndicator(String.valueOf(i));
tabHost.addTab(tabSpec,fragments[i],null);
}
tabHost.setCurrentTab(0);//设置初始选中项
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId){
case R.id.rbHome:
tabHost.setCurrentTab(0);
break;
case R.id.rbMessage:
tabHost.setCurrentTab(1);
break;
case R.id.rbProfile:
tabHost.setCurrentTab(2);
break;
}
}
});
}
}Now run your code and you will see the effect shown in the picture at the beginning. Try it now!
A thousand miles begins with a single step!
