安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)
学习内容来自“慕课网”
ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来。效果就是可以拖动内容区域来改变相应的功能图标亮暗
思路：
Fragment作为内容区域
点击功能按钮，想将所有的图标变为暗色图标，再调用相应的Fragment，并使对应的图标变亮
效果图：
布局文件部分
activity_main.xml
<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"
>
<include layout="@layout/top"/> <android.support.v4.view.ViewPager //这里是关键部分
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=""
android:id="@+id/id_viewpager"> </android.support.v4.view.ViewPager> <include layout="@layout/bottom"/>
</LinearLayout>
activity_main
以下布局文件部分是固定的，和前两种方法用到的是一样的，做过前两种方法的可以直接复制代码
头部部分：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@drawable/title_bar"
android:layout_height="45dp"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:text="微信"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold" /> </LinearLayout>
top.xml
底部部分
<?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="55dp"
android:background="@drawable/bottom_bar"
android:orientation="horizontal" > <LinearLayout
android:id="@+id/id_tab_weixin"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight=""
android:orientation="vertical"
>
<ImageButton
android:id="@+id/id_tab_weixin_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_weixin_pressed"
android:clickable="false"
android:background="#00000000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffff"
/>
</LinearLayout> <LinearLayout
android:id="@+id/id_tab_add"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight=""
android:orientation="vertical"
>
<ImageButton
android:id="@+id/id_tab_add_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="@drawable/tab_address_normal"
android:background="#00000000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通信录"
android:textColor="#ffffff"
/>
</LinearLayout> <LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight=""
android:orientation="vertical"
>
<ImageButton
android:id="@+id/id_tab_frd_image"
android:layout_width="wrap_content"
android:clickable="false"
android:layout_height="wrap_content"
android:src="@drawable/tab_find_frd_normal"
android:background="#00000000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="朋友"
android:textColor="#ffffff"
/>
</LinearLayout> <LinearLayout
android:id="@+id/id_tab_set"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight=""
android:orientation="vertical"
>
<ImageButton
android:id="@+id/id_tab_set_image"
android:layout_width="wrap_content"
android:clickable="false"
android:layout_height="wrap_content"
android:src="@drawable/tab_settings_normal"
android:background="#00000000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置"
android:textColor="#ffffff"
/>
</LinearLayout>
</LinearLayout>
bottom.xml
四个对应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:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="微信" //四个 tab_01,tab_01,tab_03,tab_04只是这里显示的文字不同而已
android:textAppearance="?android:attr/textAppearanceMedium" /> </LinearLayout>
tab_01
.java文件部分：
主activity
MainActivity.java
package com.example.tab_three; import java.util.ArrayList;
import java.util.List; import android.os.Bundle;
import android.app.Activity;
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.Menu;
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 ViewPager mViewPager;
private FragmentPagerAdapter mAdapter; //ViewPager适配器
private List<Fragment> mFragments; private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAdd;
private LinearLayout mTabSet; private ImageButton mImageWeixin;
private ImageButton mImageFrd;
private ImageButton mImageAdd;
private ImageButton mImageSet; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main); initView();
initEvent();
setSelect(); } private void initEvent() {
// TODO Auto-generated method stub
mTabWeixin.setOnClickListener(this);
mTabAdd.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabSet.setOnClickListener(this);
} private void initView() {
// TODO Auto-generated method stub
//初始化
mViewPager = (ViewPager) findViewById(R.id.id_viewpager); mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabAdd = (LinearLayout) findViewById(R.id.id_tab_add);
mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
mTabSet = (LinearLayout) findViewById(R.id.id_tab_set); mImageWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_image);
mImageAdd = (ImageButton) findViewById(R.id.id_tab_add_image);
mImageFrd = (ImageButton) findViewById(R.id.id_tab_frd_image);
mImageSet = (ImageButton) findViewById(R.id.id_tab_set_image); //数据的初始化
mFragments = new ArrayList<Fragment>();
Fragment mTab_01 = new WeixinFragment();
Fragment mTab_02 = new AddFragment();
Fragment mTab_03 = new FrdFragment();
Fragment mTab_04 = new SetFragment(); mFragments.add(mTab_01);
mFragments.add(mTab_02);
mFragments.add(mTab_03);
mFragments.add(mTab_04); mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
{ @Override
public int getCount() {
// TODO Auto-generated method stub
//返回数据源的个数
return mFragments.size(); } @Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return mFragments.get(arg0);
}
}; mViewPager.setAdapter(mAdapter);
//监听内容区域的滑动效果
mViewPager.setOnPageChangeListener(new OnPageChangeListener() { @Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
int currentItem = mViewPager.getCurrentItem();
resetImage();
switch (currentItem) {
case :
mImageWeixin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case :
mImageAdd.setImageResource(R.drawable.tab_address_pressed);
break;
case :
mImageFrd.setImageResource(R.drawable.tab_find_frd_pressed);
break; case :
mImageSet.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
} } @Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub } @Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub }
});
} @Override
public void onClick(View v) {
// TODO Auto-generated method stub
//先切换图片至暗色
resetImage();
switch (v.getId()) {
case R.id.id_tab_weixin:
setSelect();
break;
case R.id.id_tab_add:
setSelect();
break;
case R.id.id_tab_frd:
setSelect();
break;
case R.id.id_tab_set:
setSelect();
break; default:
break;
}
}
private void setSelect(int i) {
// TODO Auto-generated method stub
//设置将点击的那个功能图标为亮色
//切换内容区域
resetImage();
switch (i) {
case :
mImageWeixin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case :
mImageAdd.setImageResource(R.drawable.tab_address_pressed);
break;
case :
mImageFrd.setImageResource(R.drawable.tab_find_frd_pressed);
break; case :
mImageSet.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
mViewPager.setCurrentItem(i); } //将所有功能图标的界面设为暗色
private void resetImage() {
// TODO Auto-generated method stub
mImageWeixin.setImageResource(R.drawable.tab_weixin_normal);
mImageAdd.setImageResource(R.drawable.tab_address_normal);
mImageFrd.setImageResource(R.drawable.tab_find_frd_normal);
mImageSet.setImageResource(R.drawable.tab_settings_normal); } }
MainActivity
四个相似的.java文件
WeixinFragment.java
package com.example.tab_three; import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; public class WeixinFragment extends Fragment{ @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub return inflater.inflate(R.layout.tab_1, container,false);
}
}
WeixinFragment.java
SetFragment.java
package com.example.tab_three; import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; public class SetFragment extends Fragment{ @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub return inflater.inflate(R.layout.tab_4, container,false);
}
}
SetFragment.java
FrdFragment.java
package com.example.tab_three; import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; public class FrdFragment extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.tab_3, container,false);
} }
FrdFragment.xml
AddFragment.java
package com.example.tab_three; import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; public class AddFragment extends Fragment{ @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub return inflater.inflate(R.layout.tab_2, container,false);
}
}
AddFragment.xml
安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)的更多相关文章
- 安卓开发_慕课网_ViewPager实现Tab(App主界面)
学习内容来自“慕课网” 网站上一共有4种方法来实现APP主界面的TAB方法 这里学习第一种 ViewPager实现Tab 布局文件有7个, 主界面acitivity.layout <Linear ...
- 安卓开发_慕课网_Fragment实现Tab(App主界面)
学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...
- 安卓开发_深入学习ViewPager控件
一.概述 ViewPager是android扩展包v4包(android.support.v4.view.ViewPager)中的类,这个类可以让用户左右切换当前的view. ViewPager特点: ...
- 安卓开发_浅谈Fragment之ListFragment
ListFragment,即Fragment的一个子类,当我们用的一个Fragment只需要一个listview视图的时候使用 该类有几个特点: 1.ListFragment 本身具只有一个ListV ...
- 安卓开发_浅谈ListView（SimpleAdapter数组适配器）
安卓开发_浅谈ListView(ArrayAdapter数组适配器) 学习使用ListView组件和SimapleAdapter适配器实现一个带图标的ListView列表 总共3部分 一.MainAc ...
- 安卓开发_浅谈Android动画（四）
Property动画 概念:属性动画,即通过改变对象属性的动画. 特点:属性动画真正改变了一个UI控件,包括其事件触发焦点的位置 一.重要的动画类及属性值: 1. ValueAnimator 基本属 ...
- 安卓开发_数据存储技术_sqlite
一.SQLite SQLite第一个Alpha版本诞生于2000年5月,它是一款轻量级数据库,它的设计目标是嵌入式的,占用资源非常的低,只需要几百K的内存就够了.SQLite已经被多种软件和产品使用 ...
- 安卓开发_浅谈ListView（自定义适配器）
ListView作为一个实际开发中使用率非常高的视图,一般的系统自带的适配器都无法满足开发中的需求,这时候就需要开发人员来自定义适配器使得ListView能够有一个不错的显示效果 有这样一个Demo ...
- 安卓开发_数据存储技术_SharedPreferences类
SharedPreferences类 供开发人员保存和获取基本数据类型的键值对. 该类主要用于基本类型,例如:booleans,ints,longs,strings.在应用程序结束后,数据仍旧会保存. ...
随机推荐
- linux下的daemon进程
转自:http://www.cnblogs.com/xuxm2007/archive/2011/07/29/2121280.html #include <unistd.h> int d ...
- asp.net 客户端上传文件全路径获取方法
asp.net 获取客户端上传文件全路径方法: eg:F:\test\1.doc 基于浏览器安全问题,浏览器将屏蔽获取客户端文件全路径的方法,只能获取到文件的文件名,如果需要获取全路径则需要另想其他 ...
- 网络拥塞控制与NS2仿真
准备工作: 1. 安装virtual box 虚拟机,并安装虚拟机增强功能,并配制共享文件夹. 共享文件夹自动挂载后的路径为/media/sf_xxx文件夹,xxx为所起的文件名. 解决virtual ...
- eclipse开发web应用程序步骤（图解）
*运行环境(也就是服务器的选择) 环境搭建好之后开始编写web程序!然后右键->Run as -> Run on Server!
- java简单统计.java文件中的有效代码行，空行，注释行
package regxdemo; import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundExc ...
- 轻量型ORM框架Dapper的使用
在真实的项目开发中,可能有些人比较喜欢写SQL语句,但是对于EF这种ORM框架比较排斥,那么轻量型的Dapper就是一个不错的选择,即让你写sql语句了,有进行了关系对象映射.其实对于EF吧,我说下我 ...
- Fast Image Cache – iOS 应用程序高性能图片缓存
Fast Image Cache 是一种在 iOS 应用程序中高效.持续.超快速的存储和检索图像的解决方案.任何良好的 iOS 应用程序的用户体验都应该是快速,平滑滚动的,Fast Image Cac ...
- 在eclipse中配置python插件
最好离线下载python的离线包.名字叫——org.python.pydev.feature-1.6.3.2010100513 此包里面有两个文件夹 features 和 plugins,分别把2包中 ...
- js关于对象键值为数字型时输出的对象自动排序问题的解决方法
一.对象键值为数字型时输出的对象自动排序问题如: var objs = { "1603":{id:"1603"}, "1702" ...
- SQL 分类统计函数
SELECT TransactionNumber,SUM(CASE WHEN ReasonLevel=0 THEN TransactionNumber ELSE 0 end ) a ...