毕业设计：主界面（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);
}
}
六、图片资源来源
毕业设计：主界面（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 ...
随机推荐
- Spring Boot2.0之整合Redis
需要的maven依赖 jar包,是对Jedis的封装 maven依赖: <project xmlns="http://maven.apache.org/POM/4.0.0" ...
- Elasticsearch分布式安装启动失败
配置config目录下的 elasticsearch.yml http.cors.enabled: true http.cors.allow-origin: "*" #分布安装. ...
- java 读写Oracle Blob字段
许久没有分享代码了,把这段时间写的一个Java操作Blob字段,有日子没写Java了,就当作笔记记录一下.1. [代码][Java]代码 跳至 [1] [全屏预览]package com.wa ...
- oracle 删除用户命令和部分表空间操作
删除用户 drop user user_name cascade; 建立表空间 CREATE TABLESPACE data01DATAFILE '/oracle/oradata/db/DATA01. ...
- SILVERLIGHT实现对HTML DOM的访问
实现对HTML DOM的访问.Silverlight 2在命名空间System.Windows.Browser下内置了很多对于HTML DOM访问和操作的支持,我们最常用的一个对象是HtmlEleme ...
- ETL的考虑
做数据仓库系统,ETL是关键的一环.说大了,ETL是数据整合解决方案,说小了,就是倒数据的工具.回忆一下工作这么些年来,处理数据迁移.转换的工作倒还真的不少.但是那些工作基本上是一次性工作或者很小数据 ...
- POJ1474：Video Surveillance（求多边形的核）（占位）
A friend of yours has taken the job of security officer at the Star-Buy Company, a famous depart- me ...
- 数据库几种Top子句的使用方法
转自:https://blog.csdn.net/melody_susan/article/details/47011331
- 使用FPDF输出中文
① 下载FPDF相关资料=>https://github.com/DCgithub21/cd_FPDF ② 查看目录文件 注:ttf2pt1.zip为字体转换程序 ③ 运行example.ph ...
- ubuntu下安装vmtool
这是我遇到这个问题的解决办法-------无法通过vmware的设置安装vmtoll 1.关闭虚拟机2.编辑虚拟机,将CD/DVD选项改成自动检测(而不是之前指向的ubuntuxxx.iso)3.重启 ...