安卓开发_慕课网_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.在应用程序结束后,数据仍旧会保存. ...
随机推荐
- HTML5大数据可视化效果（二）可交互地铁线路图
前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...
- SNF开发平台WinForm之七-单据打印和使用说明-SNF快速开发平台3.3-Spring.Net.Framework
8.1运行效果: 8.2开发实现: 1. 先要创建.grf报表模版,指定数据列.存储位置:Reports\Template文件夹下 2. 之后在程序当中查出数据,之后把数据和打印模版 传入方法进行 ...
- IDL中histogram的应用
前面一段时间在使用Histogram时一直是不能更好的理解其中的奥秘,通过阅读帮助以及查看相应的文档,终于理解了其中的玄机,很多时候是因为在学习的时候英文不知道翻译成什么样的内容比较合理,这样就给后面 ...
- Lua面向对象设计
首先对于Lua语言,它没有打算被用来进行大型的程序设计,相反,Lua目标定于小型到中型的程序设计,通常是作为大型系统的一部分,所以它只提供了一套精简的元素,很多高级语言的概念都没有.这样Lua就成为了 ...
- ruby -- 问题解决（七）ActionController::InvalidAuthenticityToken解决办法
学习链接:http://cnkerry.iteye.com/blog/350718 解决方法一: class FooController < ApplicationController prot ...
- 使用 PSD Validator 在线校验 PSD 文件的质量
PSD Validator 可以帮助你在线校验 PSD 文件的质量,使用的规则来自 Photoshop Etiquette.Photoshop Etiquette 整理了 PSD 文件的规范,例如删 ...
- C语言中的经典例题用javascript怎么解？（一）
C语言中的经典例题用javascript怎么解?(一) 一.1+2+3+……+100=? <script type="text/javascript"> ...
- css-盒子模型
css-盒子模型 一.padding(内边距) 元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性.CSS padding 属性定义元素边框与元素内容之间的空白区域. ...
- sublime 插件zen coding
sublime的插件Zen Coding是一个编写html的神器,现在已经更名为Emmet了. 在sublime中的package需要搜索的是Emmet 相关网站: 官网 Zen Coding: 一种 ...
- BlocksKit初见:一个支持将delegate转换成block的Cocoa库
简介 项目主页: https://github.com/zwaldowski/BlocksKit BlocksKit 是一个开源的框架,对 Cocoa 进行了扩展,将许多需要通过 delegate 调 ...