Android自定义底部导航栏-Tabbar-【WJ】
2017-01-08 本文已影响2265人
IceMen
注意:
本文主要介绍安卓自定义底部导航栏（iOS中成为TabBar）；写的不尽如人意的地方，请见谅~
概述如下：
- 环境 ：Android Studio 1.4 for Mac
- 语言 ：如果我没猜错的话，应该是Java
- 特点 ：简单、直接、暴力，绝对让你有快感！！！
展示
1.效果展示
tabbar_01.gif
2.工程目录结构
tabbar_prj_01.png
tabbar_prj_02.png
简要说明
主要用到的文件已为大家用绿色的方框标出来了；
- Java类
MainActivity：还用解释？
ShowTabbarActivity：展示自定义Tabbar的类（iOS中可以理解为在ViewController中调用）
TestFragment1 - 4：每个底部按钮的控制器
- 布局
activity_main：不解释
activity_showtabbar.xml：ShowTabbarActivity.java绑定的页面
fragment_test1.xml - fragment_test4.xml：自定义TabbarItem（就是每个按钮的页面）的布局页面
- 资源（我觉得这么叫就是对的！！！）:主要用于存放按钮图片和点击状态
tabbar_ruiku_selector.xml
tabbar_yuyue_selector.xml
tabbar_xiaoxi_selector.xml
tabbar_wode_selector.xml
1.开始写布局
1.1 -- 主页面
activity_main.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<Button
android:id="@+id/tabbar_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="展示TabBar"
android:background="#f1d605"/>
</LinearLayout>
简要说明
就是一个按钮而已
1.2 -- Tabbar布局页面
activity_showtabbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<!-- Tabbar背景色 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#FFFFFF">
<!-- 睿库 -->
<RelativeLayout
android:id="@+id/ruiku_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/ruiku_iv"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="-10dip"
android:layout_marginTop="-10dip"
android:layout_gravity="center_horizontal"
android:src="@drawable/tabbar_ruiku_selector"/>
<TextView
android:id="@+id/ruiku_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="睿库"
android:textColor="#7597B3"/>
</LinearLayout>
</RelativeLayout>
<!-- 预约 -->
<RelativeLayout
android:id="@+id/yuyue_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/yuyue_iv"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="-10dip"
android:layout_marginTop="-10dip"
android:layout_gravity="center_horizontal"
android:src="@drawable/tabbar_yuyue_selector"/>
<TextView
android:id="@+id/yuyue_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="预约"
android:textColor="#7597B3"/>
</LinearLayout>
</RelativeLayout>
<!-- 消息 -->
<RelativeLayout
android:id="@+id/xiaoxi_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/xiaoxi_iv"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="-10dip"
android:layout_marginTop="-10dip"
android:layout_gravity="center_horizontal"
android:src="@drawable/tabbar_xiaoxi_selector"/>
<TextView
android:id="@+id/xiaoxi_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="消息"
android:textColor="#7597B3"/>
</LinearLayout>
</RelativeLayout>
<!-- 我的 -->
<RelativeLayout
android:id="@+id/wode_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/wode_iv"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="-10dip"
android:layout_marginTop="-10dip"
android:layout_gravity="center_horizontal"
android:src="@drawable/tabbar_wode_selector"/>
<TextView
android:id="@+id/wode_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="我的"
android:textColor="#7597B3"/>
</LinearLayout>
</RelativeLayout>
简要说明
自我感觉FrameLayout类似于iOS中的frame，在Android中给这个tabbar的frame绑定id，设置frame的属性；
然后，给一个线性布局，给个高度和颜色，如果你们UI给了背景图，就直接上；
四个按钮我使用的是相对布局包线性布局，为什么要这样？仅仅是我喜欢而已，布局多种多样，看你自己了；你看，我在imageView中的layout_marginTop = -10，是因为只有这个位置是我想要的（其实你懂，我就是卖弄一下~）
OK，这个页面就不说了~
1.3 -- fragment_test.xml布局页面
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FAECD8">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="睿库Fragment"/>
</LinearLayout>
简要说明
其实1-4的页面都是一样的，只是背景色和TextView的text不一样
1.4 -- 资源
tabbar_ruiku_selector.xml
tabbar_yuyue_selector.xml
tabbar_xiaoxi_selector.xml
tabbar_wode_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/btn_ku_s"/>
<item android:state_pressed="false" android:drawable="@drawable/btn_ku_s"/>
<item android:drawable="@drawable/btn_ku_n"/>
</selector>
简要说明
其实四个资源的xml内容是一样的，区别是图片，里面的属性，你可以放肆大胆的百度！绝不拦着~
2.开始写代码
2.1 MainActivity.java
public class MainActivity extends AppCompatActivity
{
private Button tabbar_btn; /// 展示自定义Tabbar
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setTitle("做着玩的");
initView(); /// 初始化控件
selectorMethod(); /// 点击事件
}
/*** * 初始化控件 */
public void initView()
{
tabbar_btn = (Button) findViewById(R.id.tabbar_btn);
}
/*** * 按钮点击事件 */
public void selectorMethod()
{
// 展示自定义Tabbar
tabbar_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
System.out.println("展示自定义Tabbar");
// 跳转页面
Intent intent = new Intent(MainActivity.this, ShowTabbarActivity.class);
startActivity(intent);
}
});
}
}
2.2 ShowTabbarActivity.java
public class ShowTabbarActivity extends FragmentActivity implements View.OnClickListener
{
private FrameLayout flayout;
private RelativeLayout ruiku_layout;
private ImageView ruiku_iv;
private TextView ruiku_tv;
private RelativeLayout yuyue_layout;
private ImageView yuyue_iv;
private TextView yuyue_tv;
private RelativeLayout xiaoxi_layout;
private ImageView xiaoxi_iv;
private TextView xiaoxi_tv;
private RelativeLayout wode_layout;
private ImageView wode_iv;
private TextView wode_tv;
private int whirt = 0xFFFFFFFF;
private int gray = 0xFF7597B3;
private int blue =0xFF0AB2FB;
private TestFragment1 testFragment1;
private TestFragment2 testFragment2;
private TestFragment3 testFragment3;
private TestFragment4 testFragment4;
FragmentManager fragmentManager;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_showtabbar); // 绑定页面
initView();
fragmentManager = getSupportFragmentManager(); // 开启一个事物
// 默认加载某一个tabbarItem（第一个按钮）
TestFragment1 testFragment1 = new TestFragment1();
// 启动Activity时使第一个按钮的图标为选中状态（投机取巧）
ruiku_iv.setImageResource(R.drawable.btn_ku_s);
getSupportFragmentManager().beginTransaction().add(R.id.content,testFragment1).commit();
}
/***
* 初始化控件
*/
public void initView()
{
ruiku_layout = (RelativeLayout) findViewById(R.id.ruiku_layout);
ruiku_iv = (ImageView) findViewById(R.id.ruiku_iv);
ruiku_tv = (TextView) findViewById(R.id.ruiku_tv);
yuyue_layout = (RelativeLayout) findViewById(R.id.yuyue_layout);
yuyue_iv = (ImageView) findViewById(R.id.yuyue_iv);
yuyue_tv = (TextView) findViewById(R.id.yuyue_tv);
xiaoxi_layout = (RelativeLayout) findViewById(R.id.xiaoxi_layout);
xiaoxi_iv = (ImageView) findViewById(R.id.xiaoxi_iv);
xiaoxi_tv = (TextView) findViewById(R.id.xiaoxi_tv);
wode_layout = (RelativeLayout) findViewById(R.id.wode_layout);
wode_iv = (ImageView) findViewById(R.id.wode_iv);
wode_tv = (TextView) findViewById(R.id.wode_tv);
ruiku_layout.setOnClickListener(this);
yuyue_layout.setOnClickListener(this);
xiaoxi_layout.setOnClickListener(this);
wode_layout.setOnClickListener(this);
clearChioce(); // 清空选择
}
/***
* 重写点击事件 -- 根据 implements View.OnClickListener 来的
* @param v 当前视图
*/
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.ruiku_layout:
setChioceItem(0);
break;
case R.id.yuyue_layout:
setChioceItem(1);
break;
case R.id.xiaoxi_layout:
setChioceItem(2);
break;
case R.id.wode_layout:
setChioceItem(3);
break;
default:
break;
}
}
/***
* 定义选中后的控制器
* @param index index
*/
public void setChioceItem(int index)
{
clearChioce(); // 既然是点击选择，那么在点的时候就应该清除一下上一个索引
// 重置选项+隐藏所有的Fragment
FragmentTransaction transaction = fragmentManager.beginTransaction();
hideFragments(transaction);
switch (index) {
case 0:
ruiku_iv.setImageResource(R.drawable.tabbar_ruiku_selector);
ruiku_tv.setTextColor(blue);
if (testFragment1 == null) {
testFragment1 = new TestFragment1();
transaction.add(R.id.content,testFragment1);
} else {
transaction.show(testFragment1);
}
break;
case 1:
yuyue_iv.setImageResource(R.drawable.tabbar_yuyue_selector);
yuyue_tv.setTextColor(blue);
if (testFragment2 == null) {
testFragment2 = new TestFragment2();
transaction.add(R.id.content,testFragment2);
} else {
transaction.show(testFragment2);
}
break;
case 2:
xiaoxi_iv.setImageResource(R.drawable.tabbar_xiaoxi_selector);
xiaoxi_tv.setTextColor(blue);
if (testFragment3 == null) {
testFragment3 = new TestFragment3();
transaction.add(R.id.content,testFragment3);
} else {
transaction.show(testFragment3);
}
break;
case 3:
wode_iv.setImageResource(R.drawable.tabbar_wode_selector);
wode_tv.setTextColor(blue);
if (testFragment4 == null) {
testFragment4 = new TestFragment4();
transaction.add(R.id.content,testFragment4);
} else {
transaction.show(testFragment4);
}
break;
}
transaction.commit();
}
/***
* 定义一个重置所有选项的方法
* /
public void clearChioce()
{
ruiku_iv.setImageResource(R.drawable.btn_ku_n);
ruiku_layout.setBackgroundColor(whirt);
ruiku_tv.setTextColor(gray);
yuyue_iv.setImageResource(R.drawable.btn_book_n);
yuyue_layout.setBackgroundColor(whirt);
yuyue_tv.setTextColor(gray);
xiaoxi_iv.setImageResource(R.drawable.btn_ms_n);
xiaoxi_layout.setBackgroundColor(whirt);
xiaoxi_tv.setTextColor(gray);
wode_iv.setImageResource(R.drawable.btn_ps_n);
wode_layout.setBackgroundColor(whirt);
wode_tv.setTextColor(gray);
}
/***
* 将所有的Fragment都设置为隐藏状态
* @param transaction 事物
* /
private void hideFragments(FragmentTransaction transaction)
{
if (testFragment1 != null) {
transaction.hide(testFragment1);
}
if (testFragment2 != null) {
transaction.hide(testFragment2);
}
if (testFragment3 != null) {
transaction.hide(testFragment3);
}
if (testFragment4 != null) {
transaction.hide(testFragment4);
}
}
}
简要说明
逻辑简单明了，顺着读就行~
2.3 TestFragment1.java
public class TestFragment1 extends Fragment
{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_test1, container,false);
return view;
}
}
简要说明
TestFragment1 - 4是一样的，没有区别
icon资源地址
链接：https://share.weiyun.com/68dd317dc115efebd34ec4a2a99b3e8c （密码：S2HZTS）
总结
希望大家喜欢我写的东西，转发收藏什么的，多多益善~
后面有时间的话，我会在这篇文章中加上相对完整和人性化的东西.比如再加个按钮，让这个按钮有动画，或所有按钮添加动画效果
最后，如果你有更好的，请回复我，并粘贴你的资料地址。
有事私信
WangJun 20161228
