Android UI实现底部切换标签fragment
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本篇博客要分享的一个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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
Android利用HorizontalScrollView仿ViewPager设计简单相册
这篇文章主要介绍了Android利用HorizontalScrollView仿ViewPager设计简单相册的相关资料,需要的朋友可以参考下2016-05-05Android App中使用SurfaceView制作多线程动画的实例讲解
这篇文章主要介绍了Android App中使用SurfaceView制作多线程动画的实例讲解,SurfaceView经常被用来制作游戏中的动画,不过同时要注意画面闪烁的问题,需要的朋友可以参考下2016-04-04Android布局——Preference自定义layout的方法
PreferenceActivity是一个方便设置管理的界面,但是对于界面显示来说比较单调,所以自定义布局就很有必要了,下面与大家分享下Preference中自定义layout的方法2013-06-06Android Studio default not found错误解决办法
这篇文章主要介绍了Android Studio gradle 编译提示‘default not found’ 解决办法的相关资料,需要的朋友可以参考下2017-01-01
最新评论