Android开发主页框架搭建

刚开始学Android时，一直想着搭建一个类似微信的主界面一样的框架，点击底部的按钮后切换到相应的界面，在学习了Android 几个月后，开始要做项目了，然后接到的第一个项目就有这样的要求（好像市面主流的app都是这样布局）。
经过几天的研究，最后我敲定了利用android.support.v4.view.ViewPager

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:id="@+id/ll_home"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ff1df8d2">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/topt_itle"
android:textColor="#fff"
android:textSize="20sp" />
</LinearLayout>

<RadioGroup
android:id="@+id/rg_home"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#fffceae5"
android:orientation="horizontal">

<RadioButton
android:id="@+id/rb_home_weibo"
style="@style/style_RadioButton"
android:drawableTop="@drawable/home_weibo_draw"
android:text="@string/weibo_text"
android:checked="true"/>

<RadioButton
android:id="@+id/rb_home_news"
style="@style/style_RadioButton"
android:drawableTop="@drawable/home_news_draw"
android:text="@string/news_text" />

<RadioButton
android:id="@+id/rb_home_my"
style="@style/style_RadioButton"
android:drawableTop="@drawable/home_my_draw"
android:text="@string/my_text" />
</RadioGroup>

<android.support.v4.view.ViewPager
android:id="@+id/vp_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@id/rg_home"
android:layout_below="@id/ll_home">

</android.support.v4.view.ViewPager>
</RelativeLayout>

主布局文件暂时没有涉及其他，所以比较简单，主要是一个LinerLayout布局作为顶部布局，实际可以根据需要进行改，然后底部直接是一个RadioGroup，在里面装入RadioButton，中间再放一个ViewPager。该文件中引用了大量的样式文件，还有一个图片选择器和颜色选择器，详情可以看工程源码。
2.颜色选择器colors.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/home_checked" />
<item android:state_checked="false" android:color="@color/home_unchecked" />
</selector>

选择器的属性很多，这里只做了选中和不被选中的效果，其他可以根据客户需求进行调整。图片选择器类似，不在重复列出。
3.建立Fragment布局，在创建Fragment时直接为其创建布局

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.hais.activity.hais_app.R;

public class WeiboFragment extends Fragment {
public WeiboFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_weibo, container, false);
}
}

因为还没开始写里面的东西，所有比较简单，布局xml文件和另外两个Fragment文件不再重复列出。
4.主要还是在MainActivity.java文件中处理

public class MainActivity extends FragmentActivity {
private RadioGroup rg;
private ViewPager vp;
/*
* 注意Fragment和viewpager中引入的包必须一直
* */
private List<Fragment> fragments = new ArrayList<>();
private FragmentPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initViewPager();
initEvent();
}
/*
* 初始化界面
* */
private void initView() {
rg = (RadioGroup) findViewById(R.id.rg_home);
vp = (ViewPager) findViewById(R.id.vp_home);
fragments.add(new WeiboFragment());
fragments.add(new NewsFragment());
fragments.add(new MyFragment());
}
/*
* 初始化ViewPager
* */
private void initViewPager() {
adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
};
vp.setOffscreenPageLimit(1);//缓存页面个数
vp.setCurrentItem(0);//默认选中第一个
vp.setAdapter(adapter);
}
private void initEvent() {
/*
*viewpager滑动时使radioButton选中状态
* */
vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switch(position){
case 0:
rg.check(R.id.rb_home_weibo);
break;
case 1:
rg.check(R.id.rb_home_news);
break;
case 2:
rg.check(R.id.rb_home_my);
break;
default:
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
/*
* 选中RadioGroup时切换界面
* */
rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int checkId) {
switch (checkId){
case R.id.rb_home_weibo:
vp.setCurrentItem(0,false);
break;
case R.id.rb_home_news:
vp.setCurrentItem(1,false);
break;
case R.id.rb_home_my:
vp.setCurrentItem(2,false);
break;
}
}
});
}
}

咋一看代码还听简单的哦，确实也简单，主要流程大概是收集到Fragment将其传给FragmentPagerAdapter，告诉其有几个页面。然后就是对ViewPager进行监听，监听其滑动的状态，然后给RadioGroup中的RadioButton赋值（滑动时底部tag跟着改变）。然后是监听RadioGroup，当选择不同的RadioButton时给取出对应的Fragment，简单的说就是两者相互关联。
到此，简单的app框架就搭建得差不多了，有点简单，还有缺点，望见谅。
对于部分app的滑动页面是不需要的滑动的，如QQ，淘宝等，如果需要禁止滑动需要对ViewPager进行自定义。说到自定义听起来很麻烦的样子，其实对与本功能，非常简单，只要将重写的onTouchEvent(MotionEvent arg0)和onInterceptTouchEvent(MotionEvent arg0)方法的返回值改为flase即可。