安卓开发_慕课网_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.在应用程序结束后,数据仍旧会保存. ...
随机推荐
- ASP.NET 文件下载
using System; using System.Web; using System.IO; public partial class _Default : System.Web.UI.Page ...
- JS读书心得：《JavaScript框架设计》——第12章 异步处理
一.何为异步 执行任务的过程可以被分为发起和执行两个部分. 同步执行模式:任务发起后必须等待直到任务执行完成并返回结果后,才会执行下一个任务. 异步执行模式:任务发起后不等待任务执行完成,而是马上 ...
- 转自coolshell--vim的基本操作
开始前导语: 在正式转入python开发后,日常的工作中会和大量linux相关命令和工具接触,从另外一个层面,学习的东西相当的多,而VIM在整个的linux体系中所占据的角色就更不用说了,之前在处理g ...
- C#控件绑定数据源方式
1:控件数据源绑定泛型Dictionary<string,string> ): Dictionart<string,string> D=new Dictionary(strin ...
- Winform开发框架之读卡器和条码扫描枪的数据接收处理
在我们开发一些项目的时候,一般需要一些外围的设备进行数据处理,如ID/IC读卡器获取卡号.激光条码扫描枪.USB摄像头.USB方式的小票据打印机(POS打印机).USB来电录音盒.普通打印机等一系列附 ...
- 数据库中char, varchar, nvarchar的差异
char char是定长的,也就是当你输入的字符小于你指定的数目时,char(8),你输入的字符小于8时,它会再后面补空值.当你输入的字符大于指定的数时,它会截取超出的字符. nvarc ...
- "Hello World!" for Microsoft Windows
"Hello World!" for Microsoft Windows It's time to write your first application! The follow ...
- Nhibernate的第一个实例
第一个NhIbernate程序 1.目的: a) 链接到oracle数据库 b) 增删改 c) 基本查询.sql查询 d) 视图查询 e) 使用存储过程 f) 多表查询.级联查询 g) 级联增删改 2 ...
- JDBC增删改查和查唯一的完整代码
第一部分代码(实体类) package com.wf.entity; public class Hehe{ private int hehe_id; private String hehe_name; ...
- 用Apache 里面的ab做一个简单的压力测试
我用的是xampp环境包. D:\xampp\apache\bin 进入这路径, 找到ab.exe 尝试双击打开ab.exe 但不能如愿, 这两个都是一个压力的测试软件, 是apache自带的; 好 ...