【幻化万千戏红尘】qianfeng-Android-Day19_导航栏制作
Fragment、ViewPager实现TAB导航条效果
制作Tab书签导航条（书签选项卡）有多种方法：
【特别提示：】注意几种创建Tab书签导航中Fragment生命周期的变化。
1、TabActivity+TabHost（已经过期）
2、Fragment + RadioGroup 【必要时首选】
3、Fragment + ViewPager + RadioGroup自定义固定导航条 【推荐使用】
4、Fragment + ViewPager 带滑动导航条 【推荐使用】
一、Fragment+RadioGroup实现导航效果
（一）、效果说明：
- 自定义导航条；
- 导航条固定位置，不发生左右侧滑。
（二）、实现步骤：
1、特殊的布局文件；
- 有一个LinearLayout节点用来替换Fragment
- 在LinearLayout节点下方可自定义布局，布局内可放置TextView及ImageView等控件来自定义导航条效果，但是一般推荐使用RadioGroup+RadioButton。
- 给RadioButton设置背景选择器，让RadioButton在不同状态下显示不同颜色。
2、初始化自定义选项卡导航条，并为选项卡设置单击监听事件（实际是RadioGroup的setOnCheckedChangeListener）；
（三）、示例代码：
1、布局文件的代码：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="org.mobiletrain.navigation.MainActivity">
<RadioGroup
android:id="@+id/rg"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:background="#FFFFFF"
android:gravity="center"
android:orientation="horizontal">
<RadioButton
android:id="@+id/chat"
android:checked="true"
style="@style/my_rb_style"
android:text="聊天"/>
<RadioButton
android:id="@+id/friend"
style="@style/my_rb_style"
android:text="好友"/>
<RadioButton
android:id="@+id/find"
style="@style/my_rb_style"
android:text="发现"/>
<RadioButton
android:id="@+id/home"
style="@style/my_rb_style"
android:text="我"/>
</RadioGroup>
<LinearLayout
android:id="@+id/ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/rg"
android:orientation="horizontal"></LinearLayout>
</RelativeLayout>
2、MainActivity核心代码：
public class MainActivity extends AppCompatActivity {
private Fragment currentFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rg);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
Fragment fragment = null;
switch (checkedId) {
case R.id.chat:
fragment = new ChatFragment();
break;
case R.id.friend:
fragment = new FriendFragment();
break;
case R.id.find:
fragment = new FindFragment();
break;
case R.id.home:
fragment = new HomeFragment();
break;
}
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
//判断fragment是否添加到事务中
if (fragment.isAdded()) {
//将当前的Fragment隐藏，然后显示新的Fragment
transaction.hide(currentFragment).show(fragment);
} else {
//隐藏当前Fragment,同时添加新的Fragment
transaction.hide(currentFragment).add(R.id.ll, fragment);
}
transaction.commit();
currentFragment = fragment;
}
});
currentFragment = new ChatFragment();
getSupportFragmentManager().beginTransaction().add(R.id.ll, currentFragment).commit();
}
}
二、Fragment + ViewPager+RadioGroup实现Tab效果：
（一）、Fragment+ViewPager+RadioGroup实现选项卡的步骤：
1、特殊的布局文件；
- 有一个ViewPager节点用来装载Fragment
- 在ViewPager节点下方可自定义布局，布局内可放置TextView及ImageView等控件来自定义导航条效果，但是一般推荐使用RadioGroup+RadioButton。
- 给RadioButton设置背景选择器，让RadioButton在不同状态下显示不同颜色。
2、初始化自定义选项卡导航条，并为选项卡设置单击监听事件（实际是RadioGroup的setOnCheckedChangeListener）；
3、初始化ViewPager;
- 创建ViewPager对象：通过findViewById()方法来实现即可；
- 定义ViewPager中的数据源List<Fragment>;
- 自定义适配器，要继承于FragmentPagerAdapter，而不是PagerAdapter；
- 为ViewPager对象设置适配器；
- 给ViewPager设置监听器（addOnPageChangeListener）。
（二）、示例代码：
1、布局文件示例代码：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="org.mobiletrain.navigation.MainActivity">
<RadioGroup
android:id="@+id/rg"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:background="#FFFFFF"
android:gravity="center"
android:orientation="horizontal">
<RadioButton
android:id="@+id/chat"
android:checked="true"
style="@style/my_rb_style"
android:text="聊天"/>
<RadioButton
android:id="@+id/friend"
style="@style/my_rb_style"
android:text="好友"/>
<RadioButton
android:id="@+id/find"
style="@style/my_rb_style"
android:text="发现"/>
<RadioButton
android:id="@+id/home"
style="@style/my_rb_style"
android:text="我"/>
</RadioGroup>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/rg"
android:orientation="horizontal"></android.support.v4.view.ViewPager>
</RelativeLayout>
2、MainActivity中的核心代码：
public class MainActivity extends AppCompatActivity {
private List<Fragment> list;
private List<RadioButton> radioButtons;
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.vp);
initData();
MyAdapter adapter = new MyAdapter(getSupportFragmentManager(), list);
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
radioButtons.get(position).setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initData() {
list = new ArrayList<>();
ChatFragment chatFragment = new ChatFragment();
FriendFragment friendFragment = new FriendFragment();
FindFragment findFragment = new FindFragment();
HomeFragment homeFragment = new HomeFragment();
list.add(chatFragment);
list.add(friendFragment);
list.add(findFragment);
list.add(homeFragment);
radioButtons = new ArrayList<>();
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rg);
//getChildCount()获得父容器中子控件的个数
for (int i = 0; i < radioGroup.getChildCount(); i++) {
RadioButton radioButton = (RadioButton) radioGroup.getChildAt(i);
radioButtons.add(radioButton);
}
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.chat:
viewPager.setCurrentItem(0);
break;
case R.id.friend:
viewPager.setCurrentItem(1);
break;
case R.id.find:
viewPager.setCurrentItem(2);
break;
case R.id.home:
viewPager.setCurrentItem(3);
break;
}
}
});
}
}
三、TabLayout+ViewPager+Fragment
采用Android5.0中新技术material design中的TabLayout来快速实现导航栏效果（注意不是TableLayout）。
（一） .TabLayout属性简介
- app:tabMode="scrollable"设置导航栏是否为滚动模式
- tabLayout.setupWithViewPager(viewPager);将TabLayout和ViewPager绑定到一起。
（二）.布局文件代码：
<?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="org.mobiletrain.navigation4.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
app:tabMode="scrollable"></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tab_layout"></android.support.v4.view.ViewPager>
</RelativeLayout>
（三）.Activity核心代码：
public class MainActivity extends AppCompatActivity {
private String[] titles;
private List<Fragment> fragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
initView();
}
private void initView() {
ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
MyAdapter adapter = new MyAdapter(getSupportFragmentManager(), fragments, titles);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
}
private void initData() {
titles = new String[]{"聊天", "好友", "发现", "我","123","456","789"};
fragments = new ArrayList<>();
for (int i = 0; i < titles.length; i++) {
Fragment fragment = BaseFragment.getInstance("123---" + titles[i]);
fragments.add(fragment);
}
}
}
