Android知识点九(ViewPager + Fragment 实现底部菜单栏)

  1.common_title_layout.xml（头部）
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/common_title_bar_height"
android:background="#FA3E63" >

<ImageButton
android:id="@+id/left_ib"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="@android:color/transparent"
android:padding="5dp"
android:src="@drawable/com_return" />

<TextView
android:id="@+id/middle_title_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@android:color/transparent"
android:ellipsize="end"
android:gravity="center_horizontal"
android:maxEms="10"
android:padding="5dp"
android:singleLine="true"
android:text="测试1"
android:textColor="#FFFF"
android:textSize="@dimen/common_title_size"
android:textStyle="bold" />

</RelativeLayout>2.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"
android:background="@android:color/white" >

<include
android:id="@+id/common_title_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/common_title_bar_height"
android:layout_alignParentTop="true"
layout="@layout/common_title_layout" />

<LinearLayout
android:id="@+id/bottom_guide_layout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:baselineAligned="false"
android:orientation="horizontal" >

<!-- 测试1-->

<LinearLayout
android:id="@+id/heart_word_item"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:padding="3dp" >

<ImageView
android:id="@+id/heart_word_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/main_heart_word_selector" />

<TextView
android:id="@+id/heart_word_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/heart_word"
android:textColor="@drawable/main_guide_text_color_selector"
android:textSize="@dimen/common_text_size" />
</LinearLayout>
<!-- 测试2-->

<LinearLayout
android:id="@+id/record_item"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:padding="3dp" >

<ImageView
android:id="@+id/record_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/main_recored_selector" />

<TextView
android:id="@+id/record_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/record"
android:textColor="@drawable/main_guide_text_color_selector"
android:textSize="@dimen/common_text_size" />
</LinearLayout>
<!-- 测试3-->

<LinearLayout
android:id="@+id/paradise_item"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:padding="3dp" >

<ImageView
android:id="@+id/paradise_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/main_paradise_selector" />

<TextView
android:id="@+id/paradise_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/paradise"
android:textColor="@drawable/main_guide_text_color_selector"
android:textSize="@dimen/common_text_size" />
</LinearLayout>
<!-- 测试4-->

<LinearLayout
android:id="@+id/discover_item"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:padding="3dp" >

<ImageView
android:id="@+id/discover_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/main_discover_selector" />

<TextView
android:id="@+id/discover_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/discover"
android:textColor="@drawable/main_guide_text_color_selector"
android:textSize="@dimen/common_text_size" />
</LinearLayout>
<!-- 测试5-->

<LinearLayout
android:id="@+id/setting_item"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:padding="3dp" >

<ImageView
android:id="@+id/setting_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/main_setting_selector" />

<TextView
android:id="@+id/setting_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/setting"
android:textColor="@drawable/main_guide_text_color_selector"
android:textSize="@dimen/common_text_size" />
</LinearLayout>
</LinearLayout>

<View
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_above="@id/bottom_guide_layout"
android:background="@color/record_line_color" />

<android.support.v4.view.ViewPager
android:id="@+id/content_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/line"
android:layout_below="@id/common_title_bar"
android:fadingEdge="none"
android:overScrollMode="never" >
</android.support.v4.view.ViewPager>

</RelativeLayout>

3.MainActivity.java(启动页面)
public class MainActivity extends FragmentActivity {

private View mHeartWordView, mRecordView, mParadiseView, mDiscoverView,mSettingView;
private ImageView mHeartWordIV, mRecordIV, mParadiseIV, mDiscoverIV,mSettingIV;
private TextView mTitleTV, mHeartWordTV, mRecordTV, mParadiseTV,mDiscoverTV, mSettingTV;

private FragmentManager mFragmentManager;
private HeartWordFragment mWordFragment;
private DiscoverFragment mDiscoverFragment;
private RecordFragment mRecordFragment;
private SettingFragment mSettingFragment;
private ParadiseFragment mParadiseFragment;

private ArrayList<Fragment> mFragmentList;

private ViewPager mainPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

initView();
}

private void initView() {
BottomItemOnClickListener mClickListener = new BottomItemOnClickListener();

mTitleTV = (TextView) findViewById(R.id.middle_title_tv);

mHeartWordView = findViewById(R.id.heart_word_item);
mHeartWordIV = (ImageView) findViewById(R.id.heart_word_iv);
mHeartWordTV = (TextView) findViewById(R.id.heart_word_tv);
mRecordView = findViewById(R.id.record_item);
mRecordIV = (ImageView) findViewById(R.id.record_iv);
mRecordTV = (TextView) findViewById(R.id.record_tv);
mParadiseView = findViewById(R.id.paradise_item);
mParadiseIV = (ImageView) findViewById(R.id.paradise_iv);
mParadiseTV = (TextView) findViewById(R.id.paradise_tv);
mDiscoverView = findViewById(R.id.discover_item);
mDiscoverIV = (ImageView) findViewById(R.id.discover_iv);
mDiscoverTV = (TextView) findViewById(R.id.discover_tv);
mSettingView = findViewById(R.id.setting_item);
mSettingIV = (ImageView) findViewById(R.id.setting_iv);
mSettingTV = (TextView) findViewById(R.id.setting_tv);

mHeartWordView.setOnClickListener(mClickListener);
mRecordView.setOnClickListener(mClickListener);
mParadiseView.setOnClickListener(mClickListener);
mDiscoverView.setOnClickListener(mClickListener);
mSettingView.setOnClickListener(mClickListener);

mFragmentManager = getSupportFragmentManager();
mWordFragment = new HeartWordFragment();
mDiscoverFragment = new DiscoverFragment();
mRecordFragment = new RecordFragment();
mParadiseFragment = new ParadiseFragment();
mSettingFragment = new SettingFragment();

mFragmentList = new ArrayList<Fragment>();
mFragmentList.add(mWordFragment);
mFragmentList.add(mRecordFragment);
mFragmentList.add(mParadiseFragment);
mFragmentList.add(mDiscoverFragment);
mFragmentList.add(mSettingFragment);
mainPager = (ViewPager) findViewById(R.id.content_pager);
mainPager.setAdapter(new MainPagerAdapter(mFragmentManager));
// 初始化
mainPager.setCurrentItem(0);
updataBottomStatu(0);
/**
* 若禁止ViewPager滑动可以自定义ViewPager重写scrollTo方法
*/
mainPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
updataBottomStatu(position);
}

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

}

@Override
public void onPageScrollStateChanged(int arg0) {

}
});
}

protected class BottomItemOnClickListener implements OnClickListener {
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.heart_word_item: {
mainPager.setCurrentItem(0);
updataBottomStatu(0);
}
break;
case R.id.record_item: {
mainPager.setCurrentItem(1);
updataBottomStatu(1);
}
break;
case R.id.paradise_item: {
mainPager.setCurrentItem(2);
updataBottomStatu(2);
}
break;
case R.id.discover_item: {
mainPager.setCurrentItem(3);
updataBottomStatu(3);
}
break;
case R.id.setting_item: {
mainPager.setCurrentItem(4);
updataBottomStatu(4);
}
break;
}
}
}

private void setHeartWord(boolean isSelect) {
mHeartWordView.setSelected(isSelect);
mHeartWordIV.setSelected(isSelect);
mHeartWordTV.setSelected(isSelect);
}

private void setRecord(boolean isSelect) {
mRecordView.setSelected(isSelect);
mRecordIV.setSelected(isSelect);
mRecordTV.setSelected(isSelect);
}

private void setParadise(boolean isSelect) {
mParadiseView.setSelected(isSelect);
mParadiseIV.setSelected(isSelect);
mParadiseTV.setSelected(isSelect);
}

private void setDiscover(boolean isSelect) {
mDiscoverView.setSelected(isSelect);
mDiscoverIV.setSelected(isSelect);
mDiscoverTV.setSelected(isSelect);
}

private void setSetting(boolean isSelect) {
mSettingView.setSelected(isSelect);
mSettingIV.setSelected(isSelect);
mSettingTV.setSelected(isSelect);
}

private void updataBottomStatu(int index) {
switch (index) {
case 0:
if (!mHeartWordView.isSelected()) {
setTitle(R.string.angle_word);
setHeartWord(true);
setRecord(false);
setParadise(false);
setDiscover(false);
setSetting(false);
}
break;
case 1:
if (!mRecordView.isSelected()) {
setTitle(R.string.record);
setHeartWord(false);
setRecord(true);
setParadise(false);
setDiscover(false);
setSetting(false);
}
break;
case 2:
if (!mParadiseView.isSelected()) {
setTitle(R.string.paradise);
setHeartWord(false);
setRecord(false);
setParadise(true);
setDiscover(false);
setSetting(false);
}
break;
case 3:
if (!mDiscoverView.isSelected()) {
setTitle(R.string.discover);
setHeartWord(false);
setRecord(false);
setParadise(false);
setDiscover(true);
setSetting(false);
}
break;
case 4:
if (!mSettingView.isSelected()) {
setTitle(R.string.setting);
setHeartWord(false);
setRecord(false);
setParadise(false);
setDiscover(false);
setSetting(true);
}
break;
}
}

class MainPagerAdapter extends FragmentStatePagerAdapter {

public MainPagerAdapter(FragmentManager fm) {
super(fm);
}

@Override
public Fragment getItem(int arg0) {
return mFragmentList.get(arg0);
}

@Override
public int getCount() {
return mFragmentList == null ? 0 : mFragmentList.size();
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {

}

}

public void setTitle(CharSequence title) {
mTitleTV.setText(title);
}

public void setTitle(int resId) {
mTitleTV.setText(getString(resId));
}
}

4.HeartWordFragment.java(子界面)
public class HeartWordFragment extends Fragment {
private View rootView;
private TextView mytxt;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
rootView = inflater.inflate(R.layout.heart_word_layout, null);
initViews();
return rootView;
}

private void initViews() {
MainActivity mainActivity = (MainActivity) getActivity();
mainActivity.setTitle("测试2");
mytxt = (TextView) rootView.findViewById(R.id.mytxt);
mytxt.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
Toast.makeText(getActivity(), "点击了文本", Toast.LENGTH_LONG)
.show();
}
});
}
}

5.最后在给个drawable(main_heart_word_selector.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/heart_select" android:state_selected="true"></item>
<item android:drawable="@drawable/heart_normal"></item>
</selector>

6.效果