`
modabobo
  • 浏览: 502528 次
文章分类
社区版块
存档分类
最新评论

Android UI-实现底部切换标签(fragment)

 
阅读更多

Android UI-实现底部切换标签(fragment)


前言

本篇博客要分享的一个UI效果——实现底部切换标签,想必大家在一些应用上面遇到过这种效果了,最典型的就是微信了,可以左右滑动切换页面,也可以点击标签页滑动页面,它们是如何实现的呢,本篇博客为了简单只介绍如何实现点击底部切换标签页。
先来看看我们想实现的效果图:
这样的页面实现起来其实很简单的,首先我们从布局入手:
分为三部分
第一部分:顶部导航栏布局
第二部分:中部显示内容布局
第三部分:底部标签布局

/BottomTabDemo/res/layout/activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RelativeLayout
        android:id="@+id/rl_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <!-- 顶部 -->

        <RelativeLayout
            android:id="@+id/top_tab"
            android:layout_width="match_parent"
            android:layout_height="50dip"
            android:background="@color/topbar_bg" >

            <ImageView
                android:id="@+id/iv_logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:focusable="false"
                android:src="@drawable/zhidao_logo"
                android:contentDescription="@null" />

        </RelativeLayout>

        <!-- 底部tab -->

        <LinearLayout
            android:id="@+id/ll_bottom_tab"
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:layout_alignParentBottom="true"
            android:gravity="center_vertical"
            android:orientation="horizontal" 
            android:baselineAligned="true">

            <RelativeLayout
                android:id="@+id/rl_know"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0" >

                <ImageView
                    android:id="@+id/iv_know"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/btn_know_nor" 
                    android:contentDescription="@null"/>

                <TextView
                    android:id="@+id/tv_know"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/iv_know"
                    android:layout_centerHorizontal="true"
                    android:text="@string/bottom_tab_know"
                    android:textColor="@color/bottomtab_normal"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/rl_want_know"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0" >

                <ImageView
                    android:id="@+id/iv_i_want_know"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/btn_wantknow_nor"
                    android:contentDescription="@null" />

                <TextView
                    android:id="@+id/tv_i_want_know"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/iv_i_want_know"
                    android:layout_centerHorizontal="true"
                    android:text="@string/bottom_tab_wantknow"
                    android:textColor="@color/bottomtab_normal"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/rl_me"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0" >

                <ImageView
                    android:id="@+id/iv_me"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/btn_my_nor"
                    android:contentDescription="@null" />
                

                <TextView
                    android:id="@+id/tv_me"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/iv_me"
                    android:layout_centerHorizontal="true"
                    android:text="@string/bottom_tab_my"
                    android:textColor="@color/bottomtab_normal"
                    android:textSize="12sp" />
            </RelativeLayout>
        </LinearLayout>

        <!-- 内容部分, fragment切换 -->

        <LinearLayout
            android:id="@+id/content_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/line"
            android:layout_below="@+id/top_tab"
            android:orientation="vertical" >
        </LinearLayout>

        <View
            android:id="@+id/line"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_above="@id/ll_bottom_tab"
            android:background="@color/line" />
    </RelativeLayout>
    
</FrameLayout>
以上是布局代码,下面就介绍如何通过点击标签切换Fragment:
我们会发现,初始的时候是选中第一个标签页,图片和字体的颜色区别于另外两个标签页,所以我们要做的就是切换标签的时候,就改变标签的状态
主要改两个内容:
  • 图片
  • 文字颜色

然后我们切换标签显示的是不同的Fragment,这里我们有三个Fragment,所以我们定义三个不同的Fragment界面:
/BottomTabDemo/src/com/xiaowu/bottomtab/demo/ZhidaoFragment.java
/BottomTabDemo/src/com/xiaowu/bottomtab/demo/IWantKnowFragment.java
/BottomTabDemo/src/com/xiaowu/bottomtab/demo/MeFragment.java
每个Fragment对应不同的布局文件:
/BottomTabDemo/res/layout/main_tab1_fragment.xml
/BottomTabDemo/res/layout/main_tab2_fragment.xml
/BottomTabDemo/res/layout/main_tab3_fragment.xml

ok,这些定义好之后,我们就在主界面上编写切换的代码了,如何对Fragment进行切换呢,定义以下方法:
/**
	 * 添加或者显示碎片
	 * 
	 * @param transaction
	 * @param fragment
	 */
	private void addOrShowFragment(FragmentTransaction transaction,
			Fragment fragment) {
		if (currentFragment == fragment)
			return;

		if (!fragment.isAdded()) { // 如果当前fragment未被添加,则添加到Fragment管理器中
			transaction.hide(currentFragment)
					.add(R.id.content_layout, fragment).commit();
		} else {
			transaction.hide(currentFragment).show(fragment).commit();
		}

		currentFragment = fragment;
	}


完整代码如下:
/BottomTabDemo/src/com/xiaowu/bottomtab/demo/MainActivity.java
package com.xiaowu.bottomtab.demo;



import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * 主Activity
 * 
 * @author wwj_748
 * 
 */
public class MainActivity extends FragmentActivity implements OnClickListener {

	// 三个tab布局
	private RelativeLayout knowLayout, iWantKnowLayout, meLayout;

	// 底部标签切换的Fragment
	private Fragment knowFragment, iWantKnowFragment, meFragment,
			currentFragment;
	// 底部标签图片
	private ImageView knowImg, iWantKnowImg, meImg;
	// 底部标签的文本
	private TextView knowTv, iWantKnowTv, meTv;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		initUI();
		initTab();
	}

	/**
	 * 初始化UI
	 */
	private void initUI() {
		knowLayout = (RelativeLayout) findViewById(R.id.rl_know);
		iWantKnowLayout = (RelativeLayout) findViewById(R.id.rl_want_know);
		meLayout = (RelativeLayout) findViewById(R.id.rl_me);
		knowLayout.setOnClickListener(this);
		iWantKnowLayout.setOnClickListener(this);
		meLayout.setOnClickListener(this);

		knowImg = (ImageView) findViewById(R.id.iv_know);
		iWantKnowImg = (ImageView) findViewById(R.id.iv_i_want_know);
		meImg = (ImageView) findViewById(R.id.iv_me);
		knowTv = (TextView) findViewById(R.id.tv_know);
		iWantKnowTv = (TextView) findViewById(R.id.tv_i_want_know);
		meTv = (TextView) findViewById(R.id.tv_me);

	}

	/**
	 * 初始化底部标签
	 */
	private void initTab() {
		if (knowFragment == null) {
			knowFragment = new ZhidaoFragment();
		}

		if (!knowFragment.isAdded()) {
			// 提交事务
			getSupportFragmentManager().beginTransaction()
					.add(R.id.content_layout, knowFragment).commit();

			// 记录当前Fragment
			currentFragment = knowFragment;
			// 设置图片文本的变化
			knowImg.setImageResource(R.drawable.btn_know_pre);
			knowTv.setTextColor(getResources()
					.getColor(R.color.bottomtab_press));
			iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);
			iWantKnowTv.setTextColor(getResources().getColor(
					R.color.bottomtab_normal));
			meImg.setImageResource(R.drawable.btn_my_nor);
			meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));

		}

	}

	@Override
	public void onClick(View view) {
		switch (view.getId()) {
		case R.id.rl_know: // 知道
			clickTab1Layout();
			break;
		case R.id.rl_want_know: // 我想知道
			clickTab2Layout();
			break;
		case R.id.rl_me: // 我的
			clickTab3Layout();
			break;
		default:
			break;
		}
	}

	/**
	 * 点击第一个tab
	 */
	private void clickTab1Layout() {
		if (knowFragment == null) {
			knowFragment = new ZhidaoFragment();
		}
		addOrShowFragment(getSupportFragmentManager().beginTransaction(), knowFragment);
		
		// 设置底部tab变化
		knowImg.setImageResource(R.drawable.btn_know_pre);
		knowTv.setTextColor(getResources().getColor(R.color.bottomtab_press));
		iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);
		iWantKnowTv.setTextColor(getResources().getColor(
				R.color.bottomtab_normal));
		meImg.setImageResource(R.drawable.btn_my_nor);
		meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));
	}

	/**
	 * 点击第二个tab
	 */
	private void clickTab2Layout() {
		if (iWantKnowFragment == null) {
			iWantKnowFragment = new IWantKnowFragment();
		}
		addOrShowFragment(getSupportFragmentManager().beginTransaction(), iWantKnowFragment);
		
		knowImg.setImageResource(R.drawable.btn_know_nor);
		knowTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));
		iWantKnowImg.setImageResource(R.drawable.btn_wantknow_pre);
		iWantKnowTv.setTextColor(getResources().getColor(
				R.color.bottomtab_press));
		meImg.setImageResource(R.drawable.btn_my_nor);
		meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));

	}

	/**
	 * 点击第三个tab
	 */
	private void clickTab3Layout() {
		if (meFragment == null) {
			meFragment = new MeFragment();
		}
		
		addOrShowFragment(getSupportFragmentManager().beginTransaction(), meFragment);
		knowImg.setImageResource(R.drawable.btn_know_nor);
		knowTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));
		iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);
		iWantKnowTv.setTextColor(getResources().getColor(
				R.color.bottomtab_normal));
		meImg.setImageResource(R.drawable.btn_my_pre);
		meTv.setTextColor(getResources().getColor(R.color.bottomtab_press));
		
	}

	/**
	 * 添加或者显示碎片
	 * 
	 * @param transaction
	 * @param fragment
	 */
	private void addOrShowFragment(FragmentTransaction transaction,
			Fragment fragment) {
		if (currentFragment == fragment)
			return;

		if (!fragment.isAdded()) { // 如果当前fragment未被添加,则添加到Fragment管理器中
			transaction.hide(currentFragment)
					.add(R.id.content_layout, fragment).commit();
		} else {
			transaction.hide(currentFragment).show(fragment).commit();
		}

		currentFragment = fragment;
	}

}

源码下载:http://download.csdn.net/detail/wwj_748/8495621


转载请注明:IT_xiao小巫
博客地址:http://blog.csdn.net/wwj_748
移动开发狂热者群:299402133
分享到:
评论

相关推荐

    底部切换标签 Activity+子fragment

    Android UI-实现底部切换标签之方式二 ──Activity(底部采用radioGroup+radiobutton)添加5个子fragment

    底部切换标签(方式二)Activity+Fragment

    Android UI-实现底部切换标签之方式二 ──Activity(底部采用FragmentTabHost)添加5个子Fragment

    Android UI实现底部切换标签fragment

    主要为大家详细介绍了Android UI实现底部切换标签的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    Android --viewpager结合Fragment实现常用应用UI框架(包含下拉刷新功能)

    实现类似微信--底部按钮点击后,实现上部页面切换功能。自定义ViewPager结合Fragment、RadioGroup实现

    Android--UI-新手必备源码master.zip

    包括Android布局,弹窗,配色,单击事件,UI,精美炫酷的activity切换动画和空间动画,是新手必备的源码,内含相关的Dome 25件。 - - 文件夹 PATH 列表 卷序列号为 4E8D-6931 C:. │ .txt │ Android-UI-新手必备...

    Android 基于TabLayout实现的TAB页效果 仿今日头条.rar

    Android 基于TabLayout实现的TAB页导航切换效果 仿今日头条底部的TAB选项卡效果,TabLayout与ViewPager结合使用可以达到点击tab更新ViewPager、滑动ViewPager更新Tab的效果。这种效果现在在PC端、移动设备端已经很...

    android项目整体UI框架

    1.自定义android项目底部任务栏 2.实用Fragment切换 3.项目整体架构

    snowdream-books-android-1.2.zip

    底部菜单栏 切换——Fragment运用 –-主页(显示新闻列表)——ListView –-设置(退出应用、退出登录、清空缓存)——Activity管理、SharePreference –-我的(账号安全、新闻收藏夹)——SQLite 新闻列表下拉...

    安卓精美UI,通用布局,纯布局无功能实现

    本例子是一个不错应用开发的ui框架,有自定义android项目底部任务栏和实用的Fragment切换四个页面基本可以包括一个简单项目的整体架构,例子只是纯布局,没有任何的功能实现,项目编码UTF-8默认编译版本4.4.2有简单...

    Android碎片fragment实现静态加载的实例代码

    在利用底部标题栏进行首页UI的切换的时候就需要用到碎片,因此碎片在安卓开发当中十分广泛,这篇博客将会与你讲解如何实现静态加载碎片,除了静态加载碎片,还具有动态加载碎片的方式,两种方式不同的方式都进行理解...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    (1)针对多窗口类浏览器模式问题,指出并分析了该问题存在的原因,利用Activity的运行机制,通过Fragment栈对主要模块的Webview进行管理,实现对不同模块之间切换的控制。 (2)针对跨域数据交互问题,指出并分析了...

    Android例子源码可以通用出来的项目整体架构

    本例子是一个不错应用开发的ui框架,有自定义android项目底部任务栏和实用的Fragment切换四个页面基本可以包括一个简单项目的整体架构,例子只是纯布局,没有任何的功能实现,项目编码UTF-8默认编译版本4.4.2有简单...

    安卓通用型整体架构源码.zip

    安卓通用型整体架构源码是一个不错应用开发的ui框架,有自定义android项目底部任务栏和实用的Fragment切换四个页面基本可以包括一个简单项目的整体架构,例子只是纯布局,没有任何的功能实现,项目编码UTF-8默认编译...

    KJFrameForAndroid快速开发框架

    Topology拓扑部分 包含一个使用IOC设计思想的控件初始化方式:可通过注解的方式进行UI绑定,与设置监听,在Activity和Fragment中均可以通过一行代码绑定控件并实现点击监听;还包含了在目前应用开发中常见的布局界面...

    安卓通用型整体架构

    安卓通用型整体架构源码是一个不错应用开发的ui框架,有自定义android项目底部任务栏和实用的Fragment切换四个页面基本可以包括一个简单项目的整体架构,例子只是纯布局,没有任何的功能实现,项目编码UTF-8默认编译...

Global site tag (gtag.js) - Google Analytics