本篇博客要分享的一个UI效果——实现底部切换标签,想必大家在一些应用上面遇到过这种效果了,最典型的就是微信了,可以左右滑动切换页面,也可以点击标签页滑动页面,它们是如何实现的呢,本篇博客为了简单只介绍如何实现点击底部切换标签页。
先来看看我们想实现的效果图:
这样的页面实现起来其实很简单的,首先我们从布局入手:
分为三部分
第一部分:顶部导航栏布局
第二部分:中部显示内容布局
第三部分:底部标签布局
/BottomTabDemo/res/layout/activity_main.xml
以上是布局代码,下面就介绍如何通过点击标签切换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进行切换呢,定义以下方法:
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; 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(); } 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; } } 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)); } 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)); } 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)); } 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。