一、主要思路

应用程序的主界面包含三个部分：顶部标题栏、底部标识栏和中间的内容部分。顶部标题栏内容基本不变，用于显示当前模块或者整个应用的名称；底部既能标识出当前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/

毕业设计：主界面（ViewPager + FragmentPagerAdapter）的更多相关文章

Viewpager模仿微信主布局的三种方式 ViewPager,Fragment,ViewPager+FragmentPagerAdapter
效果大概就是这样很简单 : 1 创建 top 和bottom 2主界面布局添加top 和bottom 中间添加一个ViewPage 3 给ViewPager 和底部View设置点击事件源码下载 ...
Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24740977 Android如今实现Tab类型的界面方式越来越多,今天就把常见的 ...
Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager
文章地址: Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager 1.使用ViewPager + PagerAdapter 每个页面的内容都 ...
Android应用经典主界面框架之二:仿网易新闻client、CSDN client (Fragment ViewPager)
另外一种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表.使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View.而是Fragment.所 ...
App主界面Tab实现方法
ViewPager + FragmentPagerAdapter 这里模仿下微信APP界面的实现国际惯例,先看下效果图: activity_main.xml 布局文件: <?xml ver ...
Android ActionBar应用实战，高仿微信主界面的设计
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对 ...
使用Vitamio打造自己的Android万能播放器（3）——本地播放（主界面、播放列表）
前言打造一款完整可用的Android播放器有许多功能和细节需要完成,也涉及到各种丰富的知识和内容,本章将结合Fragment.ViewPager来搭建播放器的主界面,并实现本地播放基本功能.系列文章 ...
Android 高仿微信6.0主界面带你玩转切换图标变色
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41087219,本文出自:[张鸿洋的博客] 1.概述学习Android少不了模仿 ...
三种实现Android主界面Tab的方式
在平时的Android开发中,我们经常会使用Tab来进行主界面的布局.由于手机屏幕尺寸的限制,合理使用Tab可以极大的利用屏幕资源,给用户带来良好的体验.学会Tab的使用方法已经成为学习Android ...

随机推荐

express 中文文档
express() 创建一个express应用程序 var express = require('express'); var app = express(); app.get('/', functi ...
Oracle:ORA-01790: expression must have same datatype as corresponding expression
今天有现场报sql错误,错误sql语句类似 select * from tableA where (exists 条件A or exists 条件B), 单独执行 select * f ...
Python的多进程锁的使用
很多时候,我们需要在多个进程中同时写一个文件,如果不加锁机制,就会导致写文件错乱这个时候,我们可以使用multiprocessing.Lock() 我一开始是这样使用的: import multip ...
介绍一下Extern “C”，它的作用是什么?
Extern “C”是由C++提供的一个连接交换指定符号,用于告诉C++这段代码是C函数.这是因为C++编译后库中函数名会变得很长,与C生成的不一致,造成C++不能直接调用C函数,加上extren “ ...
C# 中==和Equal的区别
http://new-fighter.iteye.com/blog/1634800 今天突然看到一种情况,颠覆了我对这比较使用方法的判断. 于是开始在网上找资料,但几乎都是Java的,好不容易找到一个 ...
Managed C++ wtypes.h DATE 转化为 .net的 DateTime
http://stackoverflow.com/questions/570224/how-do-i-convert-from-mfcs-coledatetime-to-c-sharp-datetim ...
bzoj 4557: [JLoi2016]侦察守卫【树形dp】
设f[u][i]为u点向下覆盖至少i层并且处理完u的子树的最小代价,f[u][i]为u点向上覆盖至少i层并且处理完u的子树的最小代价转移的话显然f[u][i]+=f[v][i-1],但是f[u][0 ...
Mac上搭建直播服务器Nginx+rtmp，实现手机推流、拉流
转载自http://www.cnblogs.com/jys509/p/5649066.html 简介 nginx是非常优秀的开源服务器,用它来做hls或者rtmp流媒体服务器是非常不错的选择,本人在网 ...
C# 多线程（转）
C#多线程一.基本概念 1.进程首先打开任务管理器,查看当前运行的进程: 从任务管理器里面可以看到当前所有正在运行的进程.那么究竟什么是进程呢? 进程(Process)是Windows系统中的 ...
c++ 语法解析
大小 size()是取字符串长度的,跟length()用法相同 size_t其实是一种类型,类似于无符号整形(unsignted int).可以理解成unsignted int size,当unsig ...

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