鱼鱼Chen之学写自己的apk（八）使用ViewPager和Fragment实现流行的底部导航

不知道为什么，最近有些迷茫。大三的暑假马上就要到了，完全不知道应该怎么找实习，尤其还是我们这种大四居然还要上半学期课的。。。。真是焦虑、、、、

想着复习一下Fragment，然后就想到了做个类似很流行的底部导航的效果。也不是很难，之前用到了PageAdapter，而这边直接用到了FragmentPageAdapter



一、分析一下结构



还是很清晰的，3个自定义的Fragment类，一个自定义的适配器，主Activity，然后是对应的布局文件。

二、先完成3个自定义的Fragment

比如虫宝宝的Fragment和xml布局

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="match_parent" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/chongbaobao"
android:text="野生的虫宝宝出现了！"
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"
android:textSize="22sp" />

<ImageView
android:id="@+id/chongbaobao"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:background="@drawable/chongbaobao" />

</RelativeLayout>

Fragment

public class CbbFragment extends Fragment {
private long currentTime = -1;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_cbb, container, false);
ImageView cbbView = (ImageView) view.findViewById(R.id.chongbaobao);
cbbView.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
if ((System.currentTimeMillis() - currentTime) > 1500) {
Toast.makeText(getActivity(), "再点一次可以让虫宝宝进化！",
Toast.LENGTH_SHORT).show();
currentTime=System.currentTimeMillis();
}else {
((MainActivity)getActivity()).getevolution(1);
}
}
});
return view;
}
}

其实只要

View view = inflater.inflate(R.layout.fragment_cbb, container, false);
return view;

这两句就可以了，其余的部分的代是我写的关于在Fragment里切换的方法，有兴趣的可以自己看看，这边最后再做解释。

剩下两个类似，就不上代码了。

三、主布局

因为Fragment其实是用适配器装到ViewPager里了，所以这边只要有两部分就好

<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="com.dota.example.fishychenoffragment.MainActivity" >

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/relativeLayout_Bottom">
</android.support.v4.view.ViewPager>

<LinearLayout
android:id="@+id/linearLayout_Bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/background_bottombar" >

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >

<ImageButton
android:id="@+id/btnCBB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@drawable/chongbaobao_selector" />

<TextView
android:id="@+id/textCBB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/chongbaobao"
android:textColor="@color/blue"
android:textSize="25sp"
android:textStyle="bold" />
</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >

<ImageButton
android:id="@+id/btnBBJ"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@drawable/baobaojian_selector" />

<TextView
android:id="@+id/textBBJ"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/baobaojian"
android:textColor="@color/blue"
android:textSize="25sp"
android:textStyle="bold" />
</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >

<ImageButton
android:id="@+id/btnBMC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@drawable/baomuchong_selector" />

<TextView
android:id="@+id/textBMC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/baomuchong"
android:textColor="@color/blue"
android:textSize="25sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>

</RelativeLayout>

四、主活动

我用了几个大方法把所有要执行的都装好了，一个个上

首先是自定义的方法，初始化

private void init() {
btnCBB = (ImageButton) findViewById(R.id.btnCBB);
btnBBJ = (ImageButton) findViewById(R.id.btnBBJ);
btnBMC = (ImageButton) findViewById(R.id.btnBMC);
textCBB = (TextView) findViewById(R.id.textCBB);
textBBJ = (TextView) findViewById(R.id.textBBJ);
textBMC = (TextView) findViewById(R.id.textBMC);
viewPager = (ViewPager) findViewById(R.id.viewPager);
mFragment = new ArrayList<Fragment>();
cbbFragment = new CbbFragment();
bbjFragment = new BbjFragment();
bmcFragment = new BmcFragment();
mFragment.add(cbbFragment);
mFragment.add(bbjFragment);
mFragment.add(bmcFragment);
adapter = new MyFragmentPageAdapter(getSupportFragmentManager(),
mFragment);
viewPager.setAdapter(adapter);
btnCBB.setOnClickListener(this);
btnBBJ.setOnClickListener(this);
btnBMC.setOnClickListener(this);
}

这边用Fragment的原理跟之前的不一样，之前用的Transaction（事务）的replace方法来动态插入Fragment，这边直接使用list将Fragment全部装在ViewPager里（虽然不算静态，但是其实是一次性填充好的）。另外，要注意的是，这个的Fragment等都要用v4的那个，即

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;

MainActivity extends FragmentActivity

为什么呢？很简单，因为我们等会儿要用到自定义的FragmentPageAdapter。

getSupportFragmentManager()方法是用来传入FragmentManager对象，mFragment传入list对象，等会儿用到。

五、来看看自定义的适配器

public class MyFragmentPageAdapter extends FragmentPagerAdapter{
private FragmentManager fm;
private List<Fragment> mFragments;
public MyFragmentPageAdapter(FragmentManager fm,List<Fragment> mFragment) {
super(fm);
this.fm=fm;
this.mFragments=mFragment;
}

@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}

@Override
public int getCount() {
return mFragments.size();
}

}

构造方法里用到了直接传进来的两个参数，这边是继承至FragmentPageAdapter。实现两个抽象方法

六、重回主活动

private void initButtonImage() {
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linearLayout_Bottom);
for (int i = 0; i < mFragment.size(); i++) {
ImageView imageView = (ImageView) ((LinearLayout) linearLayout
.getChildAt(i)).getChildAt(0);
TextView textView = (TextView) ((LinearLayout) linearLayout
.getChildAt(i)).getChildAt(1);
if (i == currentIndex) {
imageView.setEnabled(false);
textView.setTextColor(getResources().getColor(R.color.purple));
} else {
imageView.setEnabled(true);
textView.setTextColor(getResources().getColor(R.color.blue));
}
}
}

这个方法，就是让当前选中的Fragment对应的底部Button表现不同的样式，selector.xml如下

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

<item android:drawable="@drawable/chongbaobao_lost" android:state_enabled="true"/>
<item android:drawable="@drawable/chongbaobao" android:state_enabled="false"/>

</selector>

剩下两个同理。

然后是onclick事件，也是为了实现这个方法。currentIndex参数是用来记忆当前选中的Fragment

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btnCBB:
currentIndex = 0;
initButtonImage();
viewPager.setCurrentItem(0);
break;
case R.id.btnBBJ:
currentIndex = 1;
initButtonImage();
viewPager.setCurrentItem(1);
break;
case R.id.btnBMC:
currentIndex = 2;
initButtonImage();
viewPager.setCurrentItem(2);
break;

default:
break;
}
}

oncreate方法，将该调用的调用，并实现页面改变监听器

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
initButtonImage();
viewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override
public void onPageSelected(int position) {
currentIndex = position;
initButtonImage();
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub

}

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}
});
}

只要在滑动页面时，改变对应底部Button就可以了。

完整的主Activity代码

public classMainActivity extends FragmentActivity implements OnClickListener {
private ImageButton btnCBB, btnBBJ, btnBMC;
private TextView textCBB, textBBJ, textBMC;
private ViewPager viewPager;
private MyFragmentPageAdapter adapter;
private CbbFragment cbbFragment;
private BbjFragment bbjFragment;
private BmcFragment bmcFragment;
private List<Fragment> mFragment;
private int currentIndex = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
initButtonImage();
viewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override
public void onPageSelected(int position) {
currentIndex = position;
initButtonImage();
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub

}

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}
});
}

private void init() {
btnCBB = (ImageButton) findViewById(R.id.btnCBB);
btnBBJ = (ImageButton) findViewById(R.id.btnBBJ);
btnBMC = (ImageButton) findViewById(R.id.btnBMC);
textCBB = (TextView) findViewById(R.id.textCBB);
textBBJ = (TextView) findViewById(R.id.textBBJ);
textBMC = (TextView) findViewById(R.id.textBMC);
viewPager = (ViewPager) findViewById(R.id.viewPager);
mFragment = new ArrayList<Fragment>();
cbbFragment = new CbbFragment();
bbjFragment = new BbjFragment();
bmcFragment = new BmcFragment();
mFragment.add(cbbFragment);
mFragment.add(bbjFragment);
mFragment.add(bmcFragment);
adapter = new MyFragmentPageAdapter(getSupportFragmentManager(),
mFragment);
viewPager.setAdapter(adapter);
btnCBB.setOnClickListener(this);
btnBBJ.setOnClickListener(this);
btnBMC.setOnClickListener(this);
}

private void initButtonImage() {
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linearLayout_Bottom);
for (int i = 0; i < mFragment.size(); i++) {
ImageView imageView = (ImageView) ((LinearLayout) linearLayout
.getChildAt(i)).getChildAt(0);
TextView textView = (TextView) ((LinearLayout) linearLayout
.getChildAt(i)).getChildAt(1);
if (i == currentIndex) {
imageView.setEnabled(false);
textView.setTextColor(getResources().getColor(R.color.purple));
} else {
imageView.setEnabled(true);
textView.setTextColor(getResources().getColor(R.color.blue));
}
}
}

public void getevolution(int nextPosition) {
viewPager.setCurrentItem(nextPosition);
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btnCBB:
currentIndex = 0;
initButtonImage();
viewPager.setCurrentItem(0);
break;
case R.id.btnBBJ:
currentIndex = 1;
initButtonImage();
viewPager.setCurrentItem(1);
break;
case R.id.btnBMC:
currentIndex = 2;
initButtonImage();
viewPager.setCurrentItem(2);
break;

default:
break;
}
}
}

七、甜点补充

上面主活动中，有个方法没解释。getevolution()，还记得之前在Fragment里写的一大串吗？就是想用来测试能否在Fragment里改变Activity里的组件的方法。这个方法就是在Fragment里双击图片可以切换page

完整的代码

百度云链接：http://pan.baidu.com/s/1sjqhOaL