Android Studio开发安卓项目——主页（底部选型卡切换）

一、效果图：

二、实现的功能：

1. 头部显示title
2. 中间有显示框，内容会随着底部选项卡切换
3. 底部有四个选项卡，点击变色，并会同步切换中间部位内容

三、具体实现：

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