安卓开发_慕课网_Fragment实现Tab(App主界面)
学习内容来自“慕课网”
这里用Fragment来实现APP主界面
思路：
底部横向排列4个LinearLayout，每个LinearLayout包含一个图片按钮和一个文字
1、默认显示第一个功能（微信）的图标为亮，其他三个为暗
2、点击相应的按钮，首先将所有的图标变暗，接着隐藏所有Fragment，再把点击的对应的Fragment显示出来，并把相应的图标显示亮
首先布局文件
activity_main.xml与ViewPager实现Tab的是不一样的
<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"/> <FrameLayout //与Viewpager实现Tab的不同点在这里
android:id="@+id/id_content"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=""
></FrameLayout> <include layout="@layout/bottom"/>
</LinearLayout>
其他布局文件都是一样的
头部部分：
<?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
四个功能点击布局(这里只贴一个，都一样的，只是显示的文字不同方便效果演示而已)：
<?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="微信"
android:textAppearance="?android:attr/textAppearanceMedium" /> </LinearLayout>
然后是java文件
MainActivity.java
package com.example.fragment_tab; 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.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.text.method.HideReturnsTransformationMethod;
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 LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAdd;
private LinearLayout mTabSet; //imagebutton
private ImageButton mImgWeixin;
private ImageButton mImgFrd;
private ImageButton mImgAdd;
private ImageButton mImgSet; //fragment
private Fragment mTab_1;
private Fragment mTab_2;
private Fragment mTab_3;
private Fragment mTab_4; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main); //初始化
init();
initEvent();
//默认显示第一个功能的界面(微信界面)
setSelect();
} private void initEvent() {
// TODO Auto-generated method stub
mTabWeixin.setOnClickListener(this);
mTabAdd.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabSet.setOnClickListener(this); } private void init() {
// TODO Auto-generated method stub
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); mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_image);
mImgAdd = (ImageButton) findViewById(R.id.id_tab_add_image);
mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_image);
mImgSet = (ImageButton) findViewById(R.id.id_tab_set_image); } //响应事件
@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){
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
//隐藏所有
hidFragment(transaction); //把图片设置为亮的 //设置内容区域
switch (i) {
case :
if(mTab_1 == null)
{
mTab_1 = new WeixinFragment();
transaction.add(R.id.id_content, mTab_1);
}
else
{
transaction.show(mTab_1); }
mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case :
if(mTab_2 == null)
{
mTab_2 = new AddFragment();
transaction.add(R.id.id_content, mTab_2);
}
else
{
transaction.show(mTab_2); }
mImgAdd.setImageResource(R.drawable.tab_address_pressed);
break;
case :
if(mTab_3 == null)
{
mTab_3 = new FrdFragment();
transaction.add(R.id.id_content, mTab_3);
}
else
{
transaction.show(mTab_3); }
mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case :
if(mTab_4 == null)
{
mTab_4 = new SetFragment();
transaction.add(R.id.id_content, mTab_4);
}
else
{
transaction.show(mTab_4); }
mImgSet.setImageResource(R.drawable.tab_settings_pressed);
break; default:
break; }
transaction.commit();
}
private void hidFragment(FragmentTransaction transaction) {
// TODO Auto-generated method stub
if(mTab_1 != null)
{
transaction.hide(mTab_1);
}
if(mTab_2 != null)
{
transaction.hide(mTab_2);
}
if(mTab_3 != null)
{
transaction.hide(mTab_3);
}
if(mTab_4 != null)
{
transaction.hide(mTab_4);
} } //将所有功能图标的界面设为暗色
private void resetImage() {
// TODO Auto-generated method stub
mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
mImgAdd.setImageResource(R.drawable.tab_address_normal);
mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
mImgSet.setImageResource(R.drawable.tab_settings_normal); } }
MainActivity
AddFragment.java
package com.example.fragment_tab; 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);
}
}
SetFragment.java
package com.example.fragment_tab; 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);
}
}
WeixinFragment.java
package com.example.fragment_tab; 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);
}
}
FrdFragment.java
package com.example.fragment_tab; 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);
} }
除了MainActivity.java的其他四个java文件都是相似的
效果图：
然后说下Fragment实现Tab与ViewPager实现Tab的不同点
1、用ViewPage的时候所有的布局都写在MainActivity.java，导致代码过长，不易写和修改
2、用Fragment的时候MainActivity只起到调用各布局的作用，具体（比如设置功能）的布局，响应事件，控件都由各自的Fragment处理，方便后期代码的维护
3、用ViewPage实现Tab可以使得中间内容部分左右滑动，而Fragment实现Tab则不能实现中间内容部分的左右滑动
安卓开发_慕课网_Fragment实现Tab(App主界面)的更多相关文章
- 安卓开发_慕课网_ViewPager实现Tab(App主界面)
学习内容来自“慕课网” 网站上一共有4种方法来实现APP主界面的TAB方法 这里学习第一种 ViewPager实现Tab 布局文件有7个, 主界面acitivity.layout <Linear ...
- 安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)
学习内容来自“慕课网” ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来.效果就是可以拖动内容区域来改变相应的功能图标亮暗 思路: Fragme ...
- 安卓开发_浅谈Fragment之ListFragment
ListFragment,即Fragment的一个子类,当我们用的一个Fragment只需要一个listview视图的时候使用 该类有几个特点: 1.ListFragment 本身具只有一个ListV ...
- 安卓开发_深入学习ViewPager控件
一.概述 ViewPager是android扩展包v4包(android.support.v4.view.ViewPager)中的类,这个类可以让用户左右切换当前的view. ViewPager特点: ...
- 安卓开发_浅谈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.在应用程序结束后,数据仍旧会保存. ...
随机推荐
- CentOS7 Tomcat安装
CentOS7 Tomcat安装 CentOS7 Tomcat安装 Download 从Tomcat下载apache-tomcat-8.0.18.tar.gz Install 安装 上传RPM文件到/ ...
- iOS宏定义的使用与规范
宏定义在很多方面都会使用,例如定义高度.判断iOS系统.工具类,还有诸如文件路径.服务端api接口文档.为了对宏能够快速定位和了解其功能,我们最好在定义的时候将其放入特定的头文件中 定义尺寸类的宏 D ...
- 【Swift学习】Swift编程之旅---可选链（二十一）
可选链Optional Chaining是一种可以在当前值可能为nil的可选值上请求和调用属性.方法及下标的方法.如果可选值有值,那么调用就会成功:如果可选值是nil,那么调用将返回nil.多个调用可 ...
- 抓取代理IP
写脚本从指定网站抓取数据的时候,免不了会被网站屏蔽IP.所以呢,就需要有一些IP代理.随便在网上找了一个提供免费IP的网站西刺做IP抓取.本次实践抓取的是其提供的国内匿名代理.可以打开网站查看一下源码 ...
- DirectShowLib directshownet 视频
using DirectShowLib; using System; using System.Collections; using System.Windows.Forms; namespace C ...
- child-selector解释
这个伪类选择器应该叫孩子选择器,意思是选择网页中所有父节点的第一个子节点,并且这第一个子字节点必须是指定标签元素 写法有 :first-child :last-child :nth-child(odd ...
- LINQ to SQL语句(2)之Select/Distinct
适用场景:o(∩_∩)o- 查询呗. 说明:和SQL命令中的select作用相似但位置不同,查询表达式中的select及所接子句是放在表达式最后并把子句中的变量也就是结果返回回来:延迟.Select/ ...
- 从C#到Objective-C，循序渐进学习苹果开发(1)--准备开发账号和开发环境
本随笔系列主要介绍从一个Windows平台从事C#开发到Mac平台苹果开发的一系列感想和体验历程,本系列文章是在起步阶段逐步积累的,希望带给大家更好,更真实的转换历程体验,因为一旦方方面面都精通了,也 ...
- ASP.NET MVC ValueProvider小结
在Model绑定中,Model的数据来源有很多种,在MVC里面则定义了一套ValueProvider的组件来处理Model数据来源多样性的问题,ValueProvider整个结构类似于字典(Dictr ...
- poj-2236-Wireless Network
Wireless Network Time Limit: 10000MS Memory Limit: 65536K Total Submissions: 24155 Accepted: 100 ...