一、效果图:
二、实现的功能:
- 头部显示title
- 中间有显示框,内容会随着底部选项卡切换
- 底部有四个选项卡,点击变色,并会同步切换中间部位内容
三、具体实现:
1.前端页面:由上中下三个部分组成,共七个Layout XML File文件组成,top一个,bottom一个,中间四个(用于在底部切换时显示四个不同的页面)
底部:
部分代码:
<LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_frd_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"
android:background="#000000"
app:srcCompat="@drawable/tab_find_frd_normal" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="朋友"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="15sp" />
</LinearLayout>
2. 后台代码:主要就是点击底部,有变色响应,有中间内容区响应
//颜色变换:通过更换不同颜色的图片来进行颜色的点击变换
mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
mImgWeixin.setImageResource(R.drawable.tab_settings_normal);
//中间内容区的变换:hide和show
transaction.hide(mTab01);
transaction.show(mTab01);
//点击响应(监听):“implements View.OnClickListener”
@Override
public void onClick(View v) {
Log.d("onClick","1") ;
resetImgs();
switch (v.getId()) {
case R.id.id_tab_weixin:
Log.d("onClick", "2");
selectfragment(0);
break;
case R.id.id_tab_frd:
selectfragment(1);
break;
case R.id.id_tab_contact:
selectfragment(2);
break;
case R.id.id_tab_settings:
selectfragment(3);
break;
}
}
//内容联动:通过点击事件传过来的参数,将对应的图片换成绿的,中间的内容show出来
private void selectfragment(int i) {
FragmentTransaction transaction = fm.beginTransaction();
hideFragment(transaction);
//把图片设置为亮的
//设置内容区域
switch (i) {
case 0:
Log.d("setSelect", "1");
transaction.show(mTab01);
mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.show(mTab02);
mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
transaction.show(mTab03);
mImgAddress.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.show(mTab04);
mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();
}
四、代码
想要获得更多内容可以下载源码学习
代码Github地址:https://github.com/flyCode-Lucky/AndroidStudyProject