首先以主页几乎都会用到的底部菜单作为第一个知识点吧。仍然是以ViewPager+Fragment作为整体框架。
首先要先了解以下几个知识点：
- ViewPager的用法；
- Fragment的使用；
- selector的用法；
为了减少底部tab按钮点击切换逻辑的处理和判断，这里直接用了RadioGroup节省了这一部分的代码。不多说，直接上代码：
先上selector部分的代码
tab按键的选择器，下面为首页按钮的的，其他两个类似
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:state_selected="true" android:drawable="@drawable/b_newhome_tabbar_press" />
<item android:state_pressed="false" android:state_checked="true" android:drawable="@drawable/b_newhome_tabbar_press" />
<item android:state_pressed="true" android:state_checked="true" android:drawable="@drawable/b_newhome_tabbar_press" />
<item android:drawable="@drawable/b_newhome_tabbar" />
</selector>
下面给出首页文字部分的选择器，三个tab都用这个
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:state_selected="true" android:color="@color/item_select"/>
<item android:state_checked="true" android:state_pressed="false" android:color="@color/item_select"/>
<item android:state_checked="true" android:state_pressed="true" android:color="@color/item_select"/>
<item android:color="@color/item_normal"/>
</selector>
Fragment部分
java代码部分，三个都是一样的，此处只给出一个
public class OneFragment extends Fragment {
private Context mContext;
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
this.mContext = activity;
}
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_one, null);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
@Override
public void setMenuVisibility(boolean menuVisible) {
super.setMenuVisibility(menuVisible);
if (this.getView() != null) {
this.getView().setVisibility(menuVisible ? View.VISIBLE : View.GONE);
}
}
@Override
public void onDestroy() {
super.onDestroy();
}
}
布局就不给了，很简单的线性布局内部一个TextView
MainActivity部分
java部分代码
public class MainActivity extends FragmentActivity implements OnCheckedChangeListener {
private RadioGroup tab_group;
private MyViewPager myViewPager;
private MyFragmentAdapter adapter;
private List<Fragment> list = new ArrayList<Fragment>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
private void initViews() {
tab_group = (RadioGroup) findViewById(R.id.tab_group);
myViewPager = (MyViewPager) findViewById(R.id.mContent);
tab_group.setOnCheckedChangeListener(this);
OneFragment oneFragment = new OneFragment();
TwoFragment twoFragment = new TwoFragment();
ThreeFragment threeFragment = new ThreeFragment();
list.add(oneFragment);
list.add(twoFragment);
list.add(threeFragment);
adapter = new MyFragmentAdapter(getSupportFragmentManager(), list);
myViewPager.setAdapter(adapter);
myViewPager.setOffscreenPageLimit(2);
myViewPager.setCurrentItem(0);
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.my_recorder:
myViewPager.setCurrentItem(0, false);
break;
case R.id.recorder_manager:
myViewPager.setCurrentItem(1, false);
break;
case R.id.recorder_upload:
myViewPager.setCurrentItem(2, false);
break;
default:
break;
}
}
@Override
protected void onDestroy() {
super.onDestroy();
}
}
界面布局activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<com.example.tabdemo.MyViewPager
android:id="@+id/mContent"
android:layout_width="match_parent"
android:layout_height="0.0dip"
android:layout_weight="1.0"/>
<RadioGroup
android:id="@+id/tab_group"
android:layout_width="match_parent"
android:layout_height="60.0dip"
android:orientation="horizontal">
<RadioButton
android:id="@+id/my_recorder"
android:layout_width="0.0dip"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/selector_newhome_drawable"
android:gravity="center"
android:text="首页"
android:textColor="@drawable/selector_right_textcolor"
android:textSize="14.0sp" />
<RadioButton
android:id="@+id/recorder_manager"
android:layout_width="0.0dip"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:button="@null"
android:drawableTop="@drawable/selector_newcare_drawable"
android:gravity="center"
android:text="关注"
android:textColor="@drawable/selector_right_textcolor"
android:textSize="14.0sp" />
<RadioButton
android:id="@+id/recorder_upload"
android:layout_width="0.0dip"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:button="@null"
android:drawableTop="@drawable/selector_newmine_drawable"
android:gravity="center"
android:text="我的"
android:textColor="@drawable/selector_right_textcolor"
android:textSize="14.0sp" />
</RadioGroup>
</LinearLayout>
FragmentAdapter部分的代码MyFragmentAdapter.java
public class MyFragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> list;
public MyFragmentAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.list = list;
}
public MyFragmentAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
}
以上就是这个tab组件所有的代码部分了，主要通过布局中的RadioGroup和两个selector，selector主要利用到了checked属性。MainActivity中通过对是否选中的判断来切换相应的页面。MyViewPager部分的代码就不给 了，这部分就是直接继承了V4包里的ViewPager,项目中此处不允许滑动，作了下不可滑动的处理。
好了，第一次记录到此结束。