毕业设计：主界面（ViewPager + FragmentPagerAdapter）

一、主要思路

应用程序的主界面包含三个部分：顶部标题栏、底部标识栏和中间的内容部分。顶部标题栏内容基本不变，用于显示当前模块或者整个应用的名称；底部既能标识出当前Page，又能通过触发ImageButton来更改当前Page，效果和微信相同。最重要的是中间的内容部分，总的来说它是一个ViewPager，但是和传统的ViewPager不同，它的每一个Page包含的都是一个Fragment而不是简单的View。具体参照http://blog.csdn.net/lmj623565791/article/details/24740977。这里使用这个方案是因为我的每一个Page都有相对独立的功能，在以后的设计当中我希望能分开来实现每个模块，让整个应用程序结构更清晰。

二、activity_main

包含顶部栏、底部栏和中间的ViewPager，使用线性布局。这里需要注意的是，要将ViewPager设置为刚好占用除顶部、底部的剩下的区域，可以将android:layout_height设置为”0dp”，将android:layout_weight设置为”1”。

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

    <include layout="@layout/title_bar" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom_bar" />

</LinearLayout>

三、Fragment的布局和Java代码

布局没有什么好注意的。代码部分是新建一个（或者几个）类，继承Fragment，在方法onCreateView()中用inflater找出之前建立好的布局文件，将其返回。之后在MainActivity中需要实例化这几个对象，放到一个List里，然后绑定这个List、FragmentPagerAdapter和ViewPager，具体代码后面给出。

Fragment布局文件，另外几个类似：

<?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" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:layout_weight="1"
        android:text="this is the second tab!"
        android:textColor="#000000"
        android:textSize="30sp" />

</LinearLayout>

Fragment代码，另外几个类似：

package com.example.vcloud_3_25;

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

public class ShareFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        return inflater.inflate(R.layout.main_tab_2, container, false);
    }

}

四、bottom_bar.xml

注意布局嵌套。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_bottom_bar"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:layout_gravity="bottom"
    android:background="#f5f5f5" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/bottom_home"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:descendantFocusability="beforeDescendants"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/bottom_home_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#0000"
                android:clickable="false"
                android:src="@drawable/home_clicked" />

            <TextView
                android:id="@+id/bottom_home_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="云盘"
                android:textColor="#696969" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/bottom_share"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:descendantFocusability="beforeDescendants"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/bottom_share_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#0000"
                android:clickable="false"
                android:src="@drawable/friends_normal" />

            <TextView
                android:id="@+id/bottom_share_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="分享"
                android:textColor="#696969" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/bottom_task"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:descendantFocusability="beforeDescendants"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/bottom_task_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#0000"
                android:clickable="false"
                android:src="@drawable/download_normal" />

            <TextView
                android:id="@+id/bottom_task_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="任务"
                android:textColor="#696969" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/bottom_settings"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:descendantFocusability="beforeDescendants"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/bottom_settings_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#0000"
                android:clickable="false"
                android:src="@drawable/settings_normal" />

            <TextView
                android:id="@+id/bottom_settings_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="设置"
                android:textColor="#696969" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

四、MainActivity

package com.example.vcloud_3_25;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener {

    private LinearLayout mHome;
    private LinearLayout mShare;
    private LinearLayout mTask;
    private LinearLayout mSettings;

    private ImageButton mHomeIcon;
    private ImageButton mShareIcon;
    private ImageButton mTaskIcon;
    private ImageButton mSettingsIcon;

    private Fragment mHomeFragment;
    private Fragment mShareFragment;
    private Fragment mTaskFragment;
    private Fragment mSettingsFragment;

    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragments;

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

        initView();
        initEvents();
    }

    private void initEvents() {
        mHomeIcon.setOnClickListener(this);
        mShareIcon.setOnClickListener(this);
        mTaskIcon.setOnClickListener(this);
        mSettingsIcon.setOnClickListener(this);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int pos) {
                setSelect(pos);
            }

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

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });

        setSelect(0);
    }

    private void initView() {
        mHome = (LinearLayout) findViewById(R.id.bottom_home);
        mShare = (LinearLayout) findViewById(R.id.bottom_share);
        mTask = (LinearLayout) findViewById(R.id.bottom_task);
        mSettings = (LinearLayout) findViewById(R.id.bottom_settings);

        mHomeIcon = (ImageButton) findViewById(R.id.bottom_home_icon);
        mShareIcon = (ImageButton) findViewById(R.id.bottom_share_icon);
        mTaskIcon = (ImageButton) findViewById(R.id.bottom_task_icon);
        mSettingsIcon = (ImageButton) findViewById(R.id.bottom_settings_icon);

        mHomeFragment = new HomeFragment();
        mShareFragment = new ShareFragment();
        mTaskFragment = new TaskFragment();
        mSettingsFragment = new SettingsFragment();

        mViewPager = (ViewPager) findViewById(R.id.viewpager);

        mFragments = new ArrayList<Fragment>();

        mFragments.add(mHomeFragment);
        mFragments.add(mShareFragment);
        mFragments.add(mTaskFragment);
        mFragments.add(mSettingsFragment);

        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

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

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

        mViewPager.setAdapter(mAdapter);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
        case R.id.bottom_home_icon:
            setSelect(0);
            break;
        case R.id.bottom_share_icon:
            setSelect(1);
            break;
        case R.id.bottom_task_icon:
            setSelect(2);
            break;
        case R.id.bottom_settings_icon:
            setSelect(3);
            break;
        }
    }

    private void resetBottom() {
        mHomeIcon.setImageResource(R.drawable.home_normal);
        mShareIcon.setImageResource(R.drawable.friends_normal);
        mTaskIcon.setImageResource(R.drawable.download_normal);
        mSettingsIcon.setImageResource(R.drawable.settings_normal);
    }

    private void setSelect(int i) {
        resetBottom();
        switch (i) {
        case 0:
            mHomeIcon.setImageResource(R.drawable.home_clicked);
            break;
        case 1:
            mShareIcon.setImageResource(R.drawable.friends_clicked);
            break;
        case 2:
            mTaskIcon.setImageResource(R.drawable.download_clicked);
            break;
        case 3:
            mSettingsIcon.setImageResource(R.drawable.settings_onclicked);
            break;
        }
        mViewPager.setCurrentItem(i);
    }
}

六、图片资源来源

http://www.easyicon.net/