ViewPager中常用的tab例子1
效果图示例：
===============================
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>
//样式的基本使用 -- 样式中定义布局控件的共同属性 然后引用 比较方便
// 2、在res/values/styles.xml样式布局 中 本程序共用属性如下
=========================
3、按钮(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>
=======================================
4、 .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();
}
}
}