用Fragment+ViewPager搭建万能的android界面

android由于受限于屏幕的尺寸，我们尽可能的想要在界面上显示更多的东西。先来两张图

    

一个是360的，一个是汽车之家。今天这篇文章就来搭建这个框架，到时候只需要往里面填充内容就行了。搭建完了之后效果图。

   

当然了，不是专业美工，画面比较丑，哈哈。滑动条啊，图片呀自己加就行了，现在只负责打框架。步奏呀乱七八糟的就不说了，直接上代码。

MainActivity：

package com.sunnix.main;
import java.util.ArrayList;
import java.util.List;
import com.sunnix.fragment.HomePageFragment;
import com.sunnix.fragment.MinePageFragment;
import com.sunnix.fragment.RecommendPageFragment;
import com.sunnix.fragment.SearchPageFragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
import android.widget.TextView;
public class MainActivity extends FragmentActivity {
	private FrameLayout mMainFrameLayout;
	private TextView mHomePageTextView;
	private TextView mRecommendPageTextView;
	private TextView mSearchPageTextView;
	private TextView mMinePageTextView;
	private List<Fragment> mFragmentList=new ArrayList<Fragment>();		
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFragment();
        initView();
    }
    public void initFragment(){   	    	
    	HomePageFragment homePageFragment=new HomePageFragment();
    	RecommendPageFragment recommendPageFragment=new RecommendPageFragment();
    	SearchPageFragment searchPageFragment=new SearchPageFragment();
    	MinePageFragment minePageFragment=new MinePageFragment();
    	mFragmentList.add(homePageFragment);
    	mFragmentList.add(recommendPageFragment);
    	mFragmentList.add(searchPageFragment);
    	mFragmentList.add(minePageFragment);   	
    	FragmentManager fragmentManager=getSupportFragmentManager();
    	FragmentTransaction transaction=fragmentManager.beginTransaction();
    	transaction.add(R.id.mainFrameLayoutId, homePageFragment);
    	transaction.commit();   	
    }
    public void initView(){
    	mMainFrameLayout=(FrameLayout)findViewById(R.id.mainFrameLayoutId);    	
    	mHomePageTextView=(TextView)findViewById(R.id.homePageTextViewId);
    	mRecommendPageTextView=(TextView)findViewById(R.id.recommendPageTextViewId);
    	mSearchPageTextView=(TextView)findViewById(R.id.searchPageTextViewId);
    	mMinePageTextView=(TextView)findViewById(R.id.minePageTextViewId);    	
    	mHomePageTextView.setOnClickListener(new MyTextViewClickListener(0));
    	mRecommendPageTextView.setOnClickListener(new MyTextViewClickListener(1));
    	mSearchPageTextView.setOnClickListener(new MyTextViewClickListener(2));
    	mMinePageTextView.setOnClickListener(new MyTextViewClickListener(3));
    }
    class MyTextViewClickListener implements OnClickListener{
    	int location;
    	public MyTextViewClickListener(int location){
    		this.location=location;
    	}
		@Override
		public void onClick(View arg0) {
			FragmentManager fragmentManager=getSupportFragmentManager();
	    	FragmentTransaction transaction=fragmentManager.beginTransaction();
	    	transaction.replace(R.id.mainFrameLayoutId, mFragmentList.get(location));
	    	transaction.commit();
		}   	
    }  
}

MainActivity对应的Layout：

<LinearLayout 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:orientation="vertical"
    android:background="#ffffff">

    <FrameLayout
        android:id="@+id/mainFrameLayoutId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:background="#000000">
        <TextView
            android:id="@+id/homePageTextViewId"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="首页"/>
        <TextView
            android:id="@+id/recommendPageTextViewId"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="推荐"/>
        <TextView
            android:id="@+id/searchPageTextViewId"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="发现"/>
        <TextView
            android:id="@+id/minePageTextViewId"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="我的"/>
	</LinearLayout>
</LinearLayout>

然后创建四个Fragment，当用户点击底部的文字时，只需要吧相应的Fragment装入FrameLayout即可，第一个是首页，首页中包含了一个ViewPager，其他的比如：推荐、发现、我的，都是空白的，为了以示区别，不同的页写上相应页的名称。

首页：

package com.sunnix.fragment;
import java.util.ArrayList;
import java.util.List;
import com.sunnix.main.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class HomePageFragment extends Fragment{
	private ViewPager mHomePageViewPager;
	private List<View> mViewPagerList=new ArrayList<View>();
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View v=inflater.inflate(R.layout.home_page_fragment, null);
		mHomePageViewPager=(ViewPager)v.findViewById(R.id.homePageViewPager);
		initViewPager(inflater);
		return v;
	}
	public void initViewPager(LayoutInflater inflater){
		View gameView=inflater.inflate(R.layout.home_game_view, null);
		View softView=inflater.inflate(R.layout.home_soft_view, null);
		View rankView=inflater.inflate(R.layout.home_rank_view, null);
		View mustView=inflater.inflate(R.layout.home_must_view, null);
		mViewPagerList.clear();
		mViewPagerList.add(gameView);
		mViewPagerList.add(softView);
		mViewPagerList.add(rankView);
		mViewPagerList.add(mustView);
		mHomePageViewPager.setCurrentItem(0);
		mHomePageViewPager.setAdapter(new MyPageAdapter(mViewPagerList));
		mHomePageViewPager.setOnPageChangeListener(new MyPageListener());
	}
	class MyPageAdapter extends PagerAdapter{
		private List<View> list;
		public MyPageAdapter(List<View> list){
			this.list=list;
		}
		@Override
		public int getCount() {
			return list.size();
		}
		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0==arg1;
		}
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(list.get(position));
		}
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(list.get(position));
			return list.get(position);
		}				
	}
	class MyPageListener implements OnPageChangeListener{
		@Override
		public void onPageScrollStateChanged(int arg0) {			
		}
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {			
		}
		@Override
		public void onPageSelected(int arg0) {	
		}		
	}
}

对应的Layout文件：

<?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" 
    android:background="#ffffff">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:background="#66ffff">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="游戏"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="软件"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="排行"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="必备"/>
    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/homePageViewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>   
</LinearLayout>

推荐、发现、我的，这三个页都是空白的，就发一个吧：

import com.sunnix.main.R;

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

public class MinePageFragment extends Fragment{
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View v=inflater.inflate(R.layout.mine_page_fragment, null);
		return v;
	}
}

对应的Layout文件：

<?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" 
    android:background="#ffffff">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="minePage"
        android:textSize="15pt"/>  
</LinearLayout>

到这里呢，基本就结束了，大体思路就是树状结构，一层套一层。大概画了一个示意图

代码有的地方写不是很精练，也不是很健壮，List的非空判断等等，字数有限，在实际中自己加上。写的不好的地方欢迎指出。有需要源码的留下邮箱。