碼農日常-『Android studio』Android中使用include重複使用介面－碼農日常大小事

今天我的筆記打算來寫關於介面重複使用的文章

在菜逼八時期，曾經有陣子是不知道Android中還有這個元件的(´ж｀;)

就算後來一點點知道了也沒有去了解跟應用

直到後來開始座中型專案後，開始遇到了幾個問題

1. 重複的介面很多，但一個一個拉又很浪費時間

2. 在一個介面中需要有能控制多個UI的介面

3. 寫了很多介面，導致layout的資料夾超多檔案..

這時候也開始尋求解決之道，於是就開始使用了"include"這個元件

其實如果你上網打關鍵字的話，你還會找到他的家人merge、ViewStub等等標籤

不過我在這邊暫時不去討論另外兩個XD

這元件在介面中用拉的也可以

在這

截圖 2020-09-05 下午5.22.44

這邊可以直接用拉的，編輯器會自動引導你寫出正確的程式

不過通常我都是直接寫xml的啦！不過方便就好囉！((其實我也是後來才知道可以用拉的

那麼這是今天的示範

Gif_20200905165246866_by_gifguru

以及..沒有Gitnub :D

因為今天的內容很簡單我覺得不需要...想要範例程式的話請留言給我

對了，介面中有個Button是比較少用的ToggleButton，其相關使用方法在這邊，歡迎參考

->碼農日常-『Android studio』開關按鈕-客製型Switch ＆ Toggle Button 用法

1. 專案結構介紹

截圖 2020-09-05 下午9.21.48

如圖，這次的範例中有三個layout，分別就是主介面(activity_main)，第一介面與第二介面

再來我直接給你三個介面的內容

activity_main.xml

截圖 2020-09-05 下午9.27.37

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toggleButton_ViewChange">


        <include
            android:id="@+id/include_View01"
            layout="@layout/view01"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <include
            android:id="@+id/include_View02"
            layout="@layout/view02"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <ToggleButton
        android:id="@+id/toggleButton_ViewChange"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="24dp"
        android:textOff="介面1"
        android:textOn="介面2"
        app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

view01.xml

截圖 2020-09-05 下午9.28.19

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="我是介面１"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Switch
        android:id="@+id/switch_OK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="還不知道"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

view02.xml

截圖 2020-09-05 下午9.28.29

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="我是介面２"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_OK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="好"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

2. 重點說明

在主介面中，有注意到用粉底白字標註起來的地方嗎？

這個就是include元件

然後看一下include內容

<include
    android:id="@+id/include_View01"
    layout="@layout/view01"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:visibility="gone"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

然後，同樣是粉底白字處，只要載入你之前設置好的layout就可以完成了

再來因為他是個元件，因此如果想取得該介面之內容UI的控制權就必須要有設定id(藍底白字部分)

再來我們就能來到MainActivity的部分了

先PO全部再來畫重點

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ToggleButton button = findViewById(R.id.toggleButton_ViewChange);
        final View view01 = findViewById(R.id.include_View01);
        final View view02 = findViewById(R.id.include_View02);
        /**設置兩個View的內容*/
        view01UI(view01);
        view02UI(view02);

        if (button.isChecked()){
            view01.setVisibility(View.GONE);
            view02.setVisibility(View.VISIBLE);
        }else{
            view01.setVisibility(View.VISIBLE);
            view02.setVisibility(View.GONE);
        }
        button.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (button.isChecked()){
                    view01.setVisibility(View.GONE);
                    view02.setVisibility(View.VISIBLE);
                }else{
                    view01.setVisibility(View.VISIBLE);
                    view02.setVisibility(View.GONE);
                }
            }
        });
    }

    private void view01UI(View view){
        /**記得要view.find...喔*/
        final Switch sw = view.findViewById(R.id.switch_OK);
        sw.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked){
                    sw.setText("知道了");
                }else{
                    sw.setText("還不知道");
                }
            }
        });
    }
    private void view02UI(View view){
        /**記得要view.find...喔*/
        Button btOK = view.findViewById(R.id.button_OK);
        btOK.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "知道了", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

一樣是藍底白字跟粉底白字做記號

藍底白字的部分要注意的是他所取用的類別為View這個類別

include並不是一個類別喔XD

再來是粉底白字部分，這裡要注意的就是在取得元件時，請務必加上view(或者是剛剛在findview的時候自定義的名稱).findViewById，這樣程式才會正確喔！

不然程式會當作你畫面沒這東西，會閃退滴(´･д･｀)

到這邊就可以執行了，其他都是一些邏輯判斷的東西，試試看吧(・ωｰ)～☆

後記

其實今天有點感冒，導致這篇文章看起來還蠻偷工減料的XDDDDD

不過include也算是個我很想寫的東西，所以扛著不舒服也終究還是把重點寫一寫了

這次的文章並沒有放Github，雖然講是說今天的文章太簡單，我不想放

但實際上我今年已經寫了50多篇技術文章，我每篇技術文章都放上GitHub的話遲早有一天我的Git會塞爆吧

截圖 2020-09-05 下午9.53.09

加上其他我寫過的專案...加起來也63篇了

所以可能今年會稍微調整一下上傳Github的量吧

相關技術者若有什麼好建議歡迎跟我講一聲吧！

那今天的文章到這邊，謝謝各位點閱

10 meme pictures which say thank you better than words - Staffino blog | Read stories from Staffino.

碼農日常

碼農日常大小事

碼農日常發表在痞客邦留言(5) 人氣()

E-mail轉寄

«	九月 2024					»
日	一	二	三	四	五	六
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

碼農日常大小事

認真打好每一篇文章，認真分享程序猿每一件大小事；走過晃過依然滿載而歸

Hello