Android UI实现底部切换标签fragment

 更新时间:2016年12月13日 17:18:05   作者:IT_xiao小巫  
这篇文章主要为大家详细介绍了Android UI实现底部切换标签的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

本篇博客要分享的一个UI效果——实现底部切换标签,想必大家在一些应用上面遇到过这种效果了,最典型的就是微信了,可以左右滑动切换页面,也可以点击标签页滑动页面,它们是如何实现的呢,本篇博客为了简单只介绍如何实现点击底部切换标签页。

先来看看我们想实现的效果图: 


 

这样的页面实现起来其实很简单的,首先我们从布局入手:
 分为三部分
 第一部分:顶部导航栏布局
 第二部分:中部显示内容布局
 第三部分:底部标签布局

 /BottomTabDemo/res/layout/activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<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进行切换呢,定义以下方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
  * 添加或者显示碎片
  *
  * @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 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
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://xiazai.jb51.net/201612/yuanma/AndroidBottomTab(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:http://blog.csdn.net/wwj_748/article/details/44224945

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • Android中实现TCP和UDP传输实例

    Android中实现TCP和UDP传输实例

    这篇文章主要介绍了Android中实现TCP和UDP传输实例,本文给出了TCP服务器端代码、TCP客户端代码、UDP服务器端代码、UDP客户端代码等代码实例,需要的朋友可以参考下
    2015-03-03
  • Android利用HorizontalScrollView仿ViewPager设计简单相册

    Android利用HorizontalScrollView仿ViewPager设计简单相册

    这篇文章主要介绍了Android利用HorizontalScrollView仿ViewPager设计简单相册的相关资料,需要的朋友可以参考下
    2016-05-05
  • android SQLite数据库总结

    android SQLite数据库总结

    本文主要介绍了android SQLite数据库的相关知识。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • Android App中使用SurfaceView制作多线程动画的实例讲解

    Android App中使用SurfaceView制作多线程动画的实例讲解

    这篇文章主要介绍了Android App中使用SurfaceView制作多线程动画的实例讲解,SurfaceView经常被用来制作游戏中的动画,不过同时要注意画面闪烁的问题,需要的朋友可以参考下
    2016-04-04
  • Android手机保持屏幕高亮方法

    Android手机保持屏幕高亮方法

    这篇文章主要介绍了Android手机保持屏幕高亮方法,本文直接给出实现代码,需要的朋友可以参考下
    2015-06-06
  • Android布局——Preference自定义layout的方法

    Android布局——Preference自定义layout的方法

    PreferenceActivity是一个方便设置管理的界面,但是对于界面显示来说比较单调,所以自定义布局就很有必要了,下面与大家分享下Preference中自定义layout的方法
    2013-06-06
  • Android开发登陆案例

    Android开发登陆案例

    这篇文章主要介绍了Android开发登陆案例的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • Android Studio default not found错误解决办法

    Android Studio default not found错误解决办法

    这篇文章主要介绍了Android Studio gradle 编译提示‘default not found’ 解决办法的相关资料,需要的朋友可以参考下
    2017-01-01
  • Android Studio实现简单补间动画

    Android Studio实现简单补间动画

    这篇文章主要为大家详细介绍了Android Studio实现简单补间动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Android 7.0 运行时权限弹窗问题的解决

    Android 7.0 运行时权限弹窗问题的解决

    这篇文章主要介绍了Android 7.0 运行时权限弹窗问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03

最新评论