【Android】自定义标题栏，底部栏

为了简化起见，只写关键属性，具体需要可以自己慢慢调

顶部标题title_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    android:background="@color/yellow"
    >
    <Button
        android:visibility="invisible"/>
    <TextView
        android:text="title"/>
    <Button
        android:visibility="invisible"/>
</LinearLayout>

底部栏bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_height="63dp"
    android:background="@drawable/foot_bg"
    >
    <TextView
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_weight="1"
        android:clickable="true"
        >
        <Button
            android:clickable="false"
            android:background="@drawable/home_normal_icon"/>
        <!--字体36px，12dp，-->
        <TextView
            android:text="主页"
            />
    </LinearLayout>

    <TextView
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_height="88dp"
        android:layout_weight="2"
        android:clickable="true"
        ><!--暴力拉高，实际上高出来的部分不可点-->
        <Button
            android:layout_width="53dp"
            android:layout_height="53dp"
            android:clickable="false"
            android:background="@drawable/add_button_img"/>
        <TextView
            android:text="添加设备"
            />
    </LinearLayout>

    <TextView
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_weight="1"
        android:clickable="true"
        >
        <Button
            android:clickable="false"
            android:background="@drawable/my_normal_icon"
            />
        <TextView
            android:text="我的"
            />
    </LinearLayout>

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

</LinearLayout>

实现效果如下

布局的背景

主页按钮

添加按钮

我的页面按钮

放在一个页面里,注意属性android:clipChildren

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    >

    <include layout="@layout/title_layout"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <include layout="@layout/bottom"/>
</LinearLayout>

为了给底下按钮添加点击变色的功能，使用如下代码

Activity extends FragmentActivity implements AdapterView.OnItemClickListener,View.OnClickListener {

    //按钮变色逻辑
    private LinearLayout mHomeLinearLayout;
    private LinearLayout mMyLinearLayout;
    private LinearLayout mAddLinearLayout;
    private Button mHomeButton;
    private Button mMyButton;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.layout);

        initView();
        initEvent();

    }

    private void initView(){

        mHomeLinearLayout=findViewById(R.id.id_home_button_layout);
        mMyLinearLayout=findViewById(R.id.id_my_button_layout);
        mAddLinearLayout=findViewById(R.id.id_add_button_layout);
        mHomeButton=findViewById(R.id.home_bt);
        mMyButton=findViewById(R.id.my_bt);
    }

    private void initEvent(){

        //底部栏点击事件
        mAddLinearLayout.setOnClickListener(this);
        mMyLinearLayout.setOnClickListener(this);
        mHomeLinearLayout.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.id_my_button_layout:

                mMyButton.setBackgroundResource(R.drawable.my_onclick_icon);
                mHomeButton.setBackgroundResource(R.drawable.home_normal_icon);
                break;

            case R.id.id_home_button_layout:

                mMyButton.setBackgroundResource(R.drawable.my_normal_icon);
                mHomeButton.setBackgroundResource(R.drawable.home_onclick_icon);
                break;

            case R.id.id_add_button_layout:

                mHomeButton.setBackgroundResource(R.drawable.home_normal_icon);
                mMyButton.setBackgroundResource(R.drawable.my_normal_icon);
                break;
        }
    }

}