安卓开发_慕课网_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 MVC使用SSI来实现页面静态化
页面静态化分为两种:伪静态和真静态,这里主要介绍的是真静态. 进入正题之前先简单介绍一下SSI和shtml: 1).SSI是Server Side Include的简称(服务器端嵌入) 2).shtm ...
- Spring @Transactional propagation 各个属性值的含义
REQUIRED:业务方法需要在一个容器里运行.如果方法运行时,已经处在一个事务中,那么加入到这个事务,否则自己新建一个新的事务. NOT_SUPPORTED:声明方法不需要事务.如果方法没有关联到一 ...
- 了解WP的传感器
之前看到老大的一个QQ签名,说想写一个WP的程序,可是后来,后来就没有后来了.我去年打算学一下WP程序开发的,一年了也无任何进展,我可不想后来,后来就没有后来.于是抽时间来接触一下.虽然都是用CShs ...
- 不需要写代码，文件夹右键cmd定位指定目录
引子 这篇文章其实本来不是这样的,因为我用C#的代码实现了一个程序,后面才突然发现,我太傻太天真了,明明不需要写程序和写代码的,结果自己把自己二住了. 我们来看看效果图. 由于,我自己的原因,这个功能 ...
- SSH实例(2)
在WebContent\WEB-INF\下新建两个文件:applicationContext.xml和web.xml. web.xml: <?xml version="1.0" ...
- Delphi 10.1 Berlin UTF8String Test
Delphi 10.1 Berlin UTF8String Test procedure TForm1.Button1Click(Sender: TObject); var s: UTF8String ...
- PopupWindow的使用
如图是效果图 2种常用PopupWindow的使用 下载地址:http://download.csdn.net/detail/qq_29774291/9683258 第一个展示一个下拉的Lis ...
- 线程Thread的基础知识学习
一.线程的基本概念 1.线程是一个程序内部的顺序控制流. 2.Java的线程是通过java.lang.Thread类来实现的. 3.VM启动时会有一个由主方法{public static void m ...
- Linux命令详解之—more命令
Linux more命令同cat命令一样,多用来查看文件内容,本文就为大家介绍下Linux more命令的用法. 更多Linux命令详情请看:Linux命令速查手册 Linux的more命令类似 ca ...
- maven url
aliyun阿里云Maven仓库地址--加速你的maven构建 maven仓库用过的人都知道,国内有多么的悲催.还好有比较好用的镜像可以使用,尽快记录下来.速度提升100倍. http://mav ...