不知道为什么,最近有些迷茫。大三的暑假马上就要到了,完全不知道应该怎么找实习,尤其还是我们这种大四居然还要上半学期课的。。。。真是焦虑、、、、
想着复习一下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 class MainActivity 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