文档章节

底部滑动导航

ldfowjemr
 ldfowjemr
发布于 2016/01/10 22:47
字数 1216
阅读 45
收藏 1

先来看看我们想实现的效果图:
这样的页面实现起来其实很简单的,首先我们从布局入手:
1:顶部导航栏布局
2:中部显示内容布局
3:底部标签布局
/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://blog.csdn.net/wwj_748/article/details/44224945

ldfowjemr
粉丝 7
博文 43
码字总数 10600
作品 0
海淀
私信 提问
谢谢您帮我解答一下,谢谢谢谢谢谢谢

@邓凡平 你好,想跟你请教个问题:@邓凡平 你好,想跟你请教个问题:android中,如何实现顶部有一个导航的菜单,中间可以滑动切换,然后底部有也有一个菜单,但是底部菜单要跳转到其他的地方...

邓思学
2013/08/07
175
2
全新的手势,侧滑返回、全局右滑返回都OUT啦!

前言 Android快速开发框架-ZBLibrary 最近将以前的全局右滑返回手势改成了 底部左右滑动手势。 为什么呢?为了解决滑动返回手势的问题。 目前有3种滑动返回手势 一、侧滑返回 代表app: 微信...

孤独的探索号
2016/06/12
1K
1
android开发底部导航栏隐藏问题

背景:在一个普通类中(非继承Activity等),点击截界面上某一按钮隐藏底部导航栏(Back、Home、多任务切换),再次点击让其出现; 实现:隐藏view.setSystemUiVisibility( View.SYSTEM_UI_...

WYRiver
2015/09/11
5.2K
0
解释automaticallyAdjustsScrollViewInsets,extendedLayoutIncludesOpaqueBars,edgesForExtendedLayout的不同

从iOS7开始,控制器就默认添加了全屏属性,因此,你就有更多的方式去操作view的布局,具体用到的属性包括: edgesForExtendedLayout automaticallyAdjustsScrollViewInsets extendedLayoutIn...

CoderDancer
2016/12/15
0
0
Android 的 TabBar 扩展--JPTabBar

一个强大的TabBar,实现市面上APP基本上所拥有的功能,代码简单构造容易!只需不足5行代码就把基本的界面搭建出来了,附上效果图: 主要功能特色: 多种Tab切换的动画效果 实现底部导航中间按钮...

MrJpeng
2016/11/17
3.7K
5

没有更多内容

加载失败,请刷新页面

加载更多

IDEA Maven project: 'xxx/pom.xml' already exists in VFS

Failed to create a Maven project: ‘xxx/pom.xml‘ already exists in VFS idea创建项目后,发现项目有问题,删除后重新创建,提示错误如下。 解决办法 1.通过idea打开任意一个项目 2.File...

国产大熊猫
52分钟前
7
0
Flutter之 State 生命周期

State 的生命周期,指的是在用户参与的情况下,其关联的 Widget 所经历的,从创建到显示,再到更新最后到停止,直至销毁等各个阶段 不同的阶段涉及到特定的任务处理 State 的生命周期流程如下...

過愙
58分钟前
11
0
零基础一年拿下BAT三家offer

背景 1、本人本科一本双非垫底的那种,硕士211。本硕电子通信,完全0基础,转行一年。 2、研一上第一学期上课+外派到老师合作公司写MATLAB。去年4月开始学习Java。 起步 1、实话说,刚决定转...

gzc426
今天
6
0
并行和并发的区别

并行和并发的区别 并行(Parallel)的重点在于同一时间点多个任务同时进行; 并发(Concurrent)的重点在于同一时间段有多个任务执行,不要求某个时间点有多个任务同时进行。...

StupidZhe
今天
38
0
java内存泄漏问题

所谓内存泄露就是指一个不再被程序使用的对象或变量一直被占据在内存中。Java中有垃圾回收机制,它可以保证一对象不再被引用的时候,即对象编程了孤儿的时候,对象将自动被垃圾回收器从内存中...

Bb进阶
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部