安卓开发_慕课网_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.在应用程序结束后,数据仍旧会保存. ...

随机推荐

C#--常量
【转】 NoSQL初探之人人都爱Redis：（4）Redis主从复制架构初步探索
一.主从复制架构简介通过前面几篇的介绍中,我们都是在单机上使用Redis进行相关的实践操作,从本篇起,我们将初步探索一下Redis的集群,而集群中最经典的架构便是主从复制架构.那么,我们首先来了解一 ...
NOSQL学习笔记系列之MongoDB 一基础
主题:MongoDB 学习资料参考网址: 1.http://www.w3cschool.cc/mongodb/mongodb-tutorial.html 2.http://www.icoolxue.c ...
《Java4android》视频学习笔记——面向对象的应用（一）
---恢复内容开始--- 有一台HP打印机需要一个程序来实现开机,打印,关机这三个功能 class HPprinter { void open(){ System.out.println(" ...
Lock的实现之ReentrantLock详解
摘要 Lock在硬件层面依赖CPU指令,完全由Java代码完成,底层利用LockSupport类和Unsafe类进行操作: 虽然锁有很多实现,但是都依赖AbstractQueuedSynchroniz ...
iOS 获取网络图片的大小
一直都在找关于获取网络图片的大小的方法, 今天找到了一个能解决的办法 ,如下 1, 导入框架 #import <ImageIO/ImageIO.h> 2. 使用此方法得到image的siz ...
矩阵乘法&矩阵快速幂&矩阵快速幂解决线性递推式
矩阵乘法,顾名思义矩阵与矩阵相乘, 两矩阵可相乘的前提:第一个矩阵的行与第二个矩阵的列相等相乘原则: a b * A B = a*A+b*C a*c+b*D c d ...
Node.js的UnitTest单元测试
body{ font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif; } 在专业化的软件开发过程中,无论什么平台语言,现在都需要UnitTes ...
eventProxy
1.功能解决javascript回调地狱 fs.readFile('./file1.txt', 'utf8', function(err, content1){ fs.readFile('./fil ...
用fasterjson需要注意的地方
JSONArray.toJSONString()之后不是一个json,而是json中的一个数组 JSONObject是一个json JSON.toJSONString()不可多次使用,因为每次调用JS ...

安卓开发_慕课网_Fragment实现Tab(App主界面)

安卓开发_慕课网_Fragment实现Tab(App主界面)的更多相关文章

随机推荐

热门专题