ViewPager中經常使用的tab例子1

效果圖示例：

===============================

一、res/layout下的 activity_main.xml佈局 

代碼

<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="${relativePackage}.${activityClass}" >

    <android.support.v4.view.ViewPager

        android:id="@+id/viewPager"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

    <!-- 不使用Button而使用RadioGroup是爲了在代碼中好控制 Button控件些

    RadioButton的一些集體屬性也能夠在res/values/styles.xml裏設置

    而後在這裏引用設置好的樣式就行 -->

    <RadioGroup 

        android:id="@+id/radioGroup"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:gravity="center"

        android:background="#000"

        android:orientation="horizontal">

        

       <RadioButton android:id="@+id/leftRadio"

           android:layout_width="0dp"

           android:layout_weight="1"

           android:layout_height="wrap_content"

           android:background="@drawable/navbar_tab_l_bg"

           android:text="左邊"

           style="@style/tabs_style"

           />

       

        <RadioButton android:id="@+id/middleRadio"

           android:layout_width="0dp"

           android:layout_weight="1"

           android:layout_height="wrap_content"

           android:background="@drawable/navbar_tab_m_bg"

           android:text="中間"

           style="@style/tabs_style"

           />

        

         <RadioButton android:id="@+id/rightRadio"

           android:layout_width="0dp"

           android:layout_weight="1"

           android:layout_height="wrap_content"

           android:background="@drawable/navbar_tab_r_bg"

           android:text="右邊"

           style="@style/tabs_style"

           />

            

    </RadioGroup>

</RelativeLayout>

//樣式的基本使用 -- 樣式中定義佈局控件的共同屬性 而後引用 比較方便

//  二、在res/values/styles.xml樣式佈局 中 本程序共用屬性以下

=========================

三、按鈕(RadioButton)用到的圖片本身找， 而後放到res/drawable下，這裏用到6張 ， 左邊2張 ， 中間2張 ， 右邊2張，

 2張中一張是沒點擊或沒選 中的 顏色淺一些 ， 一張點擊或 選中的 顏色深一些。

    有 了按鈕(RadioButton)圖片,就能夠在res/drawable下設置圖片的樣式 了

    3個樣式佈局 一個左邊按鈕  一箇中間按鈕  一個右邊按鈕

1）navbar_tab_l_bg.xml 樣式佈局

代碼

<?xml version="1.0" encoding="utf-8"?>

<!-- Android中的Selector主要是用來改變ListView和Button控件的默認背景 -->

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_checked="true" android:drawable="@drawable/navbar_tab_l_pressed"/>

    <item android:state_checked="false" android:drawable="@drawable/navbar_tab_l_normal"/>

</selector>

-------------------------------

2）navbar_tab_m_bg.xml樣式佈局

代碼

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_checked="true" android:drawable="@drawable/navbar_tab_m_pressed"/>

    <item android:state_checked="false" android:drawable="@drawable/navbar_tab_m_normal"/>

</selector>

---------------------------------

3）navbar_tab_r_bg.xml樣式佈局

代碼

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_checked="true" android:drawable="@drawable/navbar_tab_r_pressed"/>

    <item android:state_checked="false" android:drawable="@drawable/navbar_tab_r_normal"/>

</selector>

=======================================

 

四、    .java 源文件有4個 1個左邊碎片  一箇中間碎片  一個右邊碎片 

         一個MainActivity

LeftFragment.java類

代碼

public class LeftFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater,

@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

TextView text_left = new TextView(getActivity());

text_left.setText("這是leftfragment");

text_left.setTextSize(40);

return text_left;

}

}

=====================

MiddleFragment.java類

代碼

public class MiddleFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater,

@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

TextView text_middle = new TextView(getActivity());

text_middle.setText("這是middlefragment");

text_middle.setTextSize(40);

return text_middle;

}

}

=========================

RightFragment.java 類

代碼

public class RightFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater,

@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

TextView text_right = new TextView(getActivity());

text_right.setText("這是rightfragment");

text_right.setTextSize(40);

return text_right;

}

}

========================

MainActivity類

代碼

public class MainActivity extends FragmentActivity {

private ViewPager viewPager;

private MyFragmentPagerAdapter adapter;

private RadioGroup radioGroup;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        

        this.viewPager = (ViewPager) this.findViewById(R.id.viewPager);

        this.radioGroup = (RadioGroup) this.findViewById(R.id.radioGroup);

        //ViewPager中Fragment(碎片)的切換用FragmentPagerAdapter適配器

        //ViewPager中圖片的切換用PagerAdapter適配器

        adapter = new MyFragmentPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(adapter);

        

        viewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override

public void onPageSelected(int position) {

//滑動的時 RadioButton也要改變

RadioButton check_radio = (RadioButton) radioGroup.getChildAt(position);

   check_radio.setChecked(true);

}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override

public void onPageScrollStateChanged(int arg0) {

}

});

        //RadioGroup的點擊事件監聽

        radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {

@Override

public void onCheckedChanged(RadioGroup arg0, int checkId) {

//RadioGroup點擊時ViewPager也要改變

for(int i = 0;i<radioGroup.getChildCount();i++){

RadioButton check_radio = (RadioButton) radioGroup.getChildAt(i);

if(check_radio.getId() == checkId){

viewPager.setCurrentItem(i);

}

}

}

});

    }

    

    //這個適配器類繼承於FragmentPagerAdapter類

    class MyFragmentPagerAdapter extends FragmentPagerAdapter{

    private List<Fragment> list = new ArrayList<Fragment>();

    //繼承FragmentPagerAdapter類的 類是沒有無慘構造函數的

public MyFragmentPagerAdapter(FragmentManager fm) {

super(fm);

//初始化須要的數據

list.add(new LeftFragment());

list.add(new MiddleFragment());

list.add(new RightFragment());

}

@Override

public Fragment getItem(int position) {

return list.get(position);

}

@Override

public int getCount() {

return list.size();

}

   

    }

}