Imitate Netease cloud bottom navigation class switching, similarly micro-letters, using RadioButton + Fragment
is such, each button click, switch to the corresponding media content to display different content Fragement
- RadioButton layout of the four first written
activity_main_bottom.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!--Radio组-->
<RadioGroup
android:id="@+id/main_bottom_radio_group"
android:layout_width="match_parent"
android:layout_height="65dp"
android:orientation="horizontal"
android:layout_gravity="bottom"
>
<!--首页-->
<RadioButton
android:id="@+id/main_home_radioBtn"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:gravity="center_horizontal|bottom"
android:text="@string/tab_bottom_home"
android:drawableTop="@drawable/bottom_home_img"
style="@style/tab_bottom"
android:checked="true"
/>
<!--全部课程-->
<RadioButton
android:id="@+id/main_allcourse_radioBtn"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:gravity="center_horizontal|bottom"
android:text="@string/tab_bottom_allcourse"
android:drawableTop="@drawable/bottom_allcourse"
style="@style/tab_bottom"
/>
<!--学习中心-->
<RadioButton
android:id="@+id/main_mystudy_radioBtn"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:gravity="center_horizontal|bottom"
android:text="@string/tab_bottom_mystudy"
android:drawableTop="@drawable/bottom_mystudy"
android:textAlignment="center"
style="@style/tab_bottom"
/>
<!--账号-->
<RadioButton
android:id="@+id/main_account_radioBtn"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:gravity="center_horizontal|bottom"
android:text="@string/tab_bottom_account"
android:drawableTop="@drawable/bottom_account"
style="@style/tab_bottom"
/>
</RadioGroup>
</LinearLayout> ## RadioButton的style统一样式 ##
style下的tab_bottom.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<!--底部导航栏radio风格-->
<style name="tab_bottom">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">match_parent</item>
<item name="android:textSize">16dp</item>
<item name="android:layout_weight">1.0</item>
<item name="android:background">@null</item>
<item name="android:paddingTop">2dp</item>
<item name="android:textColor">@drawable/bottom_textcolor</item>
<item name="android:singleLine">true</item>
<item name="android:button">@null</item>
</style>
</resources>
Which defines a color document reads as follows:
@ drawable / bottom_textcolor.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/bottomChecked"></item>
<item android:state_checked="false" android:color="@color/bottomUnChecked"></item>
</selector>These are on the bottom of the navigation layout and format settings
2. Next Set 4 Fragment, is to click on the different buttons to display the corresponding content
(1) to define the four layout files based on their content, where simple definition, select one of
fragment_course.xml, for example, which contains a picture, the other three can be changed according to their own preferences.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:icon="http://schemas.android.com/apk/res-auto"
android:id="@+id/course_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
>
<ImageView
android:id="@+id/course_bg1"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#06f"
android:src="@mipmap/b1"
/>
</LinearLayout>After completing the layout is good for them to write their own four classes
is also very simple, with all the same courses as an example, the following code:
FragmentCourse.java
“`
package com.huixue.study;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Administrator on 2016/6/3.
*全部课程的Fragment
*/
public class FragmentCourse extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){
View view = inflater.inflate(R.layout.fragment_course,container,false);
return view;
}
}
"` The other three only need to modify the layout to inflate loaded
- The next step is activity_main.xml and MainActivity thing
(1): activity_main.xml
middle using a Viewpager to load the next fragment
theLoaded written above the bottom of the layout. This master layout should be very clear it ~
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:icon="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical"
android:weightSum="1"
>
<include layout="@layout/activity_main_top"></include>
<!--中间使用viewpager-->
<android.support.v4.view.ViewPager
android:id="@+id/main_view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</android.support.v4.view.ViewPager>
<!--底部导航栏布局 开始-->
<LinearLayout
android:id="@+id/bottom_layout"
android:layout_width="match_parent"
android:layout_height="65dp"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:layout_gravity="center"
>
<!--引入底部导航-->
<include layout="@layout/activity_main_bottom"></include>
</LinearLayout>
</LinearLayout>- MainActivity code, some places have written notes, should be able to understand:
MainActivity.java:
“`
package com.huixue.study;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import com.huixue.study.adapter.MyFragmentPageAdapter;
import java.util.ArrayList;
public class MainActivity extends FragmentActivity{
//viewpager 控件
private ViewPager main_viewPager;
//radioGroup 控件
private RadioGroup main_bottom_radioGroup;
//4个RadioButton控件
private RadioButton radio_home,radio_course,radio_study,radio_account;
//Fragment动态数组
private ArrayList<Fragment> main_FragmentsList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// / is not set the title bar /
// = the ActionBar the actionBar getSupportActionBar ();
// actionBar.hide ();
// initial interface functions, each control function is to obtain ID
initView ();
// initialize function viewPager
} // over the onCreate
public void initView () {
main_bottom_radioGroup = (RadioGroup) the findViewById (R.id.main_bottom_radio_group);
radio_home = (the RadioButton) the findViewById (R.id.main_home_radioBtn);
radio_course = (the RadioButton) the findViewById (R.id.main_allcourse_radioBtn);
= radio_study (the RadioButton) the findViewById (R.id.main_mystudy_radioBtn);
radio_account = (the RadioButton) the findViewById (R.id.main_account_radioBtn);
//radiogroup监听,匿名内部类
main_bottom_radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener(){
@Override
public void onCheckedChanged(RadioGroup radioGroup, int checkId) {
//监听那个radioButton的被选中，根据radio的ID改变页面
switch (checkId){
case R.id.main_home_radioBtn:
/*
* 使用setCurrentitem第二个参数控制切换动画（暂时不明白）
* true：打开
* false:关闭
* */
main_viewPager.setCurrentItem(0,false);
break;
case R.id.main_allcourse_radioBtn:
main_viewPager.setCurrentItem(1,false);
break;
case R.id.main_mystudy_radioBtn:
main_viewPager.setCurrentItem(2,false);
break;
case R.id.main_account_radioBtn:
main_viewPager.setCurrentItem(3,false);
break;
}
}
}
);
/*Viewpager*/
main_viewPager = (ViewPager)findViewById(R.id.main_view_pager);
//bottom下的四个fragmnet
FragmentHome fragmentHome =new FragmentHome();
FragmentCourse fragmentCourse = new FragmentCourse();
FragmentStudy fragmentStudy =new FragmentStudy();
FragmentAccount fragmentAccount = new FragmentAccount();
main_FragmentsList = new ArrayList<Fragment>();
main_FragmentsList.add(fragmentHome);
main_FragmentsList.add(fragmentCourse);
main_FragmentsList.add(fragmentStudy);
main_FragmentsList.add(fragmentAccount);
//设置适配器,将添加完所有fragment的list传递给适配器
main_viewPager.setAdapter(new MyFragmentPageAdapter(getSupportFragmentManager(),main_FragmentsList));
//设置显示第一个Fragment
main_viewPager.setCurrentItem(0);
//设置页面监听,setOnPageChangeListener过时，使用了addOnPageChangeListener代替
main_viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener(){
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//修改这个,根据position获取当前页面，选择那个radiobutton被选中
@Override
public void onPageSelected(int position) {
switch (position){
case 0:
main_bottom_radioGroup.check(R.id.main_home_radioBtn);
break;
case 1:
main_bottom_radioGroup.check(R.id.main_allcourse_radioBtn);
break;
case 2:
main_bottom_radioGroup.check(R.id.main_mystudy_radioBtn);
break;
case 3:
main_bottom_radioGroup.check(R.id.main_account_radioBtn);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
);
}//initView over
}
All over, and if there are willing to share, please contact, I am also a beginner, if wrong place, please point out a lot
Study reference this article: http://blog.csdn.net/shenyuanqing/article/details/46670761 Thank you ~ ~
