1. 程式人生 > >【Android】自定義標題欄,底部欄

【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>

title

底部欄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>

實現效果如下
實現效果
佈局的背景
這裡寫圖片描述
主頁按鈕
home
新增按鈕
這裡寫圖片描述
我的頁面按鈕
這裡寫圖片描述

放在一個頁面裡,注意屬性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;
        }
    }

}