【幻化万千戏红尘】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属性简介

1. app:tabMode="scrollable"设置导航栏是否为滚动模式
2. 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);

        }

    }

}