Android 自定義標題欄組件

1.繪制Layout檔案

首先新建一個layout檔案, 命名為title_bar, 在里面繪制標題欄, 我需要的是一個有回傳鍵和當前頁面標題的titleBar

布局代碼如下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_height="wrap_content">

    <FrameLayout
        android:layout_
        android:layout_height="50dp"
        android:layout_marginBottom="1dp"
        android:background="#DDDDDD">

        <Button
            android:id="@+id/titleBack"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_
            android:layout_height="30dp"
            android:layout_margin="10dp"
            android:background="@drawable/ic_baseline_arrow_back_ios_24"
            android:gravity="start|top" />

        <TextView
            android:id="@+id/tvTitle"
            android:layout_
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="標題"
            android:textSize="20sp" />
    </FrameLayout>

</FrameLayout>

其中回傳圖示@drawable/ic_baseline_arrow_back_ios_24來自Android Studio內置的默認圖示

點擊查看匯入圖示的步驟

然后依次點擊next→finish, 完成匯入

預覽如圖

2.系結對應的類

新建一個Java Class, 我把它命名為TitleLayout

使其繼承FrameLayout類, 并且創建對應的構造方法, 系結之前創建的Layout檔案和其中的組件

public class TitleLayout extends FrameLayout {
    TextView tvTitle;
    Button titleBack;
    public TitleLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        //動態加載布局檔案
        LayoutInflater.from(context).inflate(R.layout.title_bar, this);
        //系結對應組件
        titleBack = findViewById(R.id.titleBack);
        tvTitle = findViewById(R.id.tvTitle);
    }
}

我希望回傳的圖示在點擊以后能夠結束當前activity回傳上一級, 所以我們給titleBack組件系結點擊事件:

	//系結回傳按鈕的點擊事件
        titleBack.setOnClickListener(v -> {
            //結束當前Activity
            ((Activity) getContext()).finish();
        });

除此之外, 我希望在其他activity中用到這個組件時, 可以自由設定標題的內容, 所以添加一個可以用于設定標題文字的方法:

    //用于設定標題文字
    public void setTitle(String title){
        tvTitle.setText(title);
    }

當標題欄被應用在應用程式的首頁時, 我不希望標題欄上存在回傳鍵(感覺很奇怪不是嗎), 所以我添加了一個可以用于隱藏或顯示回傳鍵的方法:

    //用于設定回傳按鈕是否顯示
    public void setBack(Boolean b){
        if(!b) titleBack.setVisibility(View.GONE);
        else titleBack.setVisibility(View.VISIBLE);
    }

到這里, 我希望這個組件能實作的功能已經全部實作了, 完整的類的代碼為:

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class TitleLayout extends FrameLayout {

    TextView tvTitle;
    Button titleBack;

    public TitleLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        //動態加載布局檔案
        LayoutInflater.from(context).inflate(R.layout.title_bar, this);
        //系結對應組件
        titleBack = findViewById(R.id.titleBack);
        tvTitle = findViewById(R.id.tvTitle);
        //系結回傳按鈕的點擊事件
        titleBack.setOnClickListener(v -> {
            //結束當前Activity
            ((Activity) getContext()).finish();
        });
    }

    //用于設定標題文字
    public void setTitle(String title){
        tvTitle.setText(title);
    }
    //用于設定回傳按鈕是否顯示
    public void setBack(Boolean b){
        if(!b) titleBack.setVisibility(View.GONE);
        else titleBack.setVisibility(View.VISIBLE);
    }
}

3.在Activity中呼叫組件

1. 進入MainActivity對應的layout檔案activity_main.xml, 添加我們創建的TitleLayout組件，

   為了更加方便地布局, 我把根節點改為了LinearLayout，

   

   其中TitleLayout組件的前綴com.example.titlebartest是包名, 可以在默認創建的MainActivity的第一行查看

2. 在MainActivity中系結TitleLayout組件, 并修改默認的標題

   // 系結組件
   TitleLayout titleBar = findViewById(R.id.title);
   // 設定標題文字
   titleBar.setTitle("首頁");
   

3. 隱藏原本的標題欄

   進入AndroidManifest.xml檔案, 在activity標簽中添加

   android:theme="@style/Theme.AppCompat.Light.NoActionBar" 
   

   

4. 點擊運行, 運行的結果如圖所示:

   

   在點擊回傳按鈕后, 應用程式結束了運行，

   如果不希望在首頁時標題欄上存在改按鈕, 則通過titleBar.setBack(false);來隱藏該按鈕

5. MainActivity的完整代碼如下:

   public class MainActivity extends AppCompatActivity {
       TitleLayout titleBar;
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           // 系結組件
           titleBar = findViewById(R.id.title);
           // 設定標題文字
           titleBar.setTitle("首頁");
           // 隱藏回傳按鈕圖示
           titleBar.setBack(false);
       }
   }
   

   重新運行, 可見回傳按鈕被隱藏了

   

?

標籤：Android

上一篇：Android Studio虛擬機無法顯示

下一篇：Android網路請求(1)