毕业设计：主界面（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); } }
