hw5 dessert menu
===
###### tags: `android`

忒難！寫最久的一次，光是了解Layout和排版就花了一兩天，從最開始到現在大概過了一個多月，現在改一開始寫的code真的覺得自己蠢死QAQ，為什麼我的人生不能順遂一點QAQ。

頁面1排版
---
因為是菜單要很多個，所以用scrollView給其下的Linear組件加上滾動條，每個菜的佈局是使用Table，在該Row中放兩個元素，一個imageView和一個ConstraintLayout，在Constraint裡再放入選項和輸入框等等來做排版。

:::warning
當ConstraintLayout中的元件想要有固定間隔，定位線要連到隔壁身上。
:::

| 排列 | 畫面 |
| -------- | -------- |
|||
|||

<h3>1-1. 排版思路</h3>

LinearLayout ↓
- ScrollView
- LinearLayout
- TextView
- TableLayout
- TableRow
- ImageView
- ConstraintLayout
- Options
- TableLayout
- TableRow
- priceOutput
- TableRow
- cal_Btn
- TableRow
- back
- next
- cart

:::info
為了將CheckBox的Text作為購物車中顯示的食物名稱，需把價格TextView和CheckBox分開
:::

:::warning
如果想把某個元件排在某個ViewGroup裡的ViewGroup下面，先把上面的ViewGroup打開~


:::

以下是xml檔的開頭－根佈局LinearLayout：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/LinearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:clickable="true"
    tools:context="com.example.user.a0316_1310834002.orderFoodActivity">
</LinearLayout>

<h3>1-2. ScrollView</h3>

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:clickable="true">

        <TextView
            android:id="@+id/textView14"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="#FFD9EC"
            android:gravity="center"
            android:text="加料一律十元"
            android:textColor="@android:color/black"
            android:textSize="18sp" />

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="#FFD9EC">

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/imageView"
                    android:layout_width="158dp"
                    android:layout_height="118dp"
                    android:layout_marginLeft="5dp"
                    android:scaleType="fitXY"
                    app:srcCompat="@drawable/food_applepie" />

                <android.support.constraint.ConstraintLayout
                    android:layout_width="250dp"
                    android:layout_height="match_parent">

                    <CheckBox
                        android:id="@+id/food1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="蘋果派"
                        android:textSize="16sp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintVertical_bias="0.0" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="$80"
                        android:textColor="#000000"
                        android:textSize="16sp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.05"
                        app:layout_constraintStart_toEndOf="@+id/food1"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintVertical_bias="0.050000012" />

                    <CheckBox
                        android:id="@+id/f1_c1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="加煉乳"
                        android:visibility="invisible"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintVertical_bias="0.953" />

                    <CheckBox
                        android:id="@+id/f1_c2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="3dp"
                        android:layout_marginStart="3dp"
                        android:text="加乳酪"
                        android:visibility="invisible"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toEndOf="@+id/f1_c1"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintVertical_bias="0.953" />

                    <EditText
                        android:id="@+id/num1"
                        android:layout_width="50sp"
                        android:layout_height="40sp"
                        android:background="?attr/editTextBackground"
                        android:ems="10"
                        android:hint="1"
                        android:inputType="number"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toEndOf="@+id/textView3"
                        app:layout_constraintTop_toTopOf="parent" />

                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="數量 (個)："
                        android:textSize="18sp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                </android.support.constraint.ConstraintLayout>
                
            </TableRow>

        </TableLayout>
        
        (...TableLayout x 7)
        
    </LinearLayout>
    
</ScrollView>

<h3>1-3. TableLayout</h3>

基本長相：
- Tablelayout
- TableRow
- view
- TableRow
- view

| 屬性 | 說明 |
| -------- | -------- |
|collapseColumns|將TableLayout里面指定的行隱藏，隱藏多行需用","隔开，起始值為0|
|stretchColumns|設置指定的行為可延伸的，填满剩下的多餘空白空間,填滿多行需用","隔开，起始值為0|
|shrinkColumns|設置指定的行為可收缩的列(適應內容寬度)，多行時需用","隔開，起始值為0|
|layout_colum|指定該元件在該列中的哪一個欄位，起始為0|
|layout_span|設定該元件所跨越的欄位數|
|orientation|決定版面呈現水平horizontal或垂直vertical|

:::warning
前三個屬性若要全部設置全部行，可使用"*"。
同一個TableLayout中，每一行的欄寬相同。
同一個TableLayout中，每一列的欄數相同，除非使用layout_span使元件跨越欄位。
:::

如果要把某列中的元件置中顯示：

<TableRow
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

如果要把某列隱藏：

private TableRow TR;
TR = (TableRow) findViewById(R.id.TR1);
TR.setVisibility(View.GONE);

可見屬性有View.GONE、View.INVISIBLE、View.VISIBLE三種，GONE是消失，INVISIBLE是它還是佔著那個位置，只是看不見。

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="*">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_span="3"
            android:gravity="center"
            android:text="小計NT$0"
            android:textSize="18sp" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/cal_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:gravity="center"
            android:text="加入購物車" />
    </TableRow>

    <TableRow
        android:id="@+id/TR1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <Button
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="toHome"
            android:layout_column="0"/>

        <Button
            android:id="@+id/next"
            (...)
            android:onClick="toNext"
            android:layout_column="1"/>

        <Button
            android:id="@+id/cart"
            (...)
            android:onClick="toCart"/>
    </TableRow>

</TableLayout>

<h3>1-4. 權重</h3>

:::warning
只有在Linearlayout中，該属性才有效，其默認值為0。
它表示LinearLayout中的額外空間是怎麼划分的，需要注意額外二字，也就是說layout_weight所規定的比值并不是對所有LinearLayout空間的划分，而是要减去View已經佔據的空間，剩餘的空間再按照比例分配給各個View。
:::

一般使用weight屬性時，會將width或者height設置為0dp，這樣元件的寬或者高就會按照設置的權重進行分配來填充父控件，而若元件的寬或高非0dp就會產生截然不同的結果。

假設SV layout_weight為 7，TL layout_weight為 3。

|SV 0dp TL 0dp|SV match_parent TL match_parent|
| -------- | -------- |
|||

兩個View的高度都是match_parent，假設屏幕寬度為L，那麼每個View的高度原本也應該都是L，剩餘高度就等於L-（L+L）= -L。
SV的weight = 7，剩餘高度占比為7/(7+3)= 7/10，最終高度為原本的高度加上計算後的高度乘以占比：L+7/10*(-L)=9/10L，TL的計算類似，最終高度為L+3/10*(-L)=7/10L。

:::info
權重的結果在水平(layout_width寬度)和垂直(layout_height高度)的效果是相同的。
:::

**該頁面的設定為SV match_parent，weight為1，LT wrap_content，weight為0。

<h3>1-5. 標題欄、狀態列顏色</h3>

全局搜索一下名稱就好惹。


我需要的在這裡。

<h3>模擬誤區</h3>

:::warning
用手機的時候是咩有滑鼠滾輪的唷！！
:::

頁面2排版
---

這一頁的要求是RadioGroup的牛排熟度，並且我要讓它點擊牛排名稱(checkbox)後在下方展示牛排大圖。

| 排列 | 畫面 |
| -------- | -------- |
|||
|||

<h3>2-1. 排版思路</h3>

LinearLayout ↓
- TextView
- ScrollView
- LinearLayout(vertical)
- LinearLayout(vertical)
- LinearLayout(horizontal)
- CheckBox
- TextView
- TextView
- EditText
- TextView
- RadioGroup
- RadioButton x 5
- ImageView
- TableLayout
- TableRow
- priceOutput
- TableRow
- scal_btn
- TableRow
- pre
- show
- cart

註：價格不放在CheckBox的文字後，才可以只獲取牛排名。

以下是xml檔的開頭－根佈局LinearLayout、TextView：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".orderSteakActivity"
    android:background="#FF7575">

    <TextView
        android:id="@+id/menuTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:background="#FFECEC"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:gravity="center"
        android:padding="5dp"
        android:text="超級牛排菜單"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
</LinearLayout>

<h3>2-2. ScrollView</h3>

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/steakLayout1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clickable="true"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_marginTop="5dp"
                android:background="#FFECEC"
                android:orientation="horizontal">

                <CheckBox
                    android:id="@+id/steak1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="霜降菲力牛排"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="$400"
                    android:textColor="#000000"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="right"
                    android:text="數量 (份)："
                    android:textColor="#000000"
                    android:textSize="16sp" />

                <EditText
                    android:id="@+id/snum1"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:ems="10"
                    android:hint="1"
                    android:inputType="number"
                    android:shadowColor="#000000"
                    android:textColor="#000000" />

            </LinearLayout>

            <RadioGroup
                android:id="@+id/RG1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:background="#FFECEC"
                android:orientation="horizontal"
                android:visibility="visible">

                <RadioButton
                    android:id="@+id/rb1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="生肉" />

                <RadioButton
                    android:id="@+id/rb12"
                    (...)/>

                <RadioButton
                    android:id="@+id/rb13"
                    (...)/>

                <RadioButton
                    android:id="@+id/rb14"
                    (...)/>

                <RadioButton
                    android:id="@+id/rb15"
                    (...)/>
            </RadioGroup>
            
            <TextView
                android:id="@+id/s1choice"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:background="#FFECEC"
                android:paddingLeft="5dp"
                android:text="Your choice"
                android:textColor="#FF0000"
                android:textSize="16sp" />
                
        </LinearLayout>
        
        (...LinearLayout x 3)
        
    </LinearLayout>
    
</ScrollView>

<h3>2-3. ImageView</h3>

除了設定該ImageView的高度寬度外，也可以使用android:scaleType屬性設定內容顯示的方式：

| 值 |說明|
| -------- | -------- |
|matrix |從View的左上角開始繪製，如果圖片大於View多於的部分會被裁剪，反之不做任何處理|
|fitXY |長寬延展至填滿整個View|
|fitStart|將圖片按比例縮放至View的寬度或者高度（取最小值），後居上或居左顯示|
|fitCenter|將圖片按比例縮放至View的寬度或者高度（取最小值），後居中顯示|
|fitEnd|將圖片按比例縮放至View的寬度或者高度（取最小值），後居下或居右顯示|
|center|將圖片以原來的大小居中顯示，如果圖片大小超過了View，會裁剪掉多餘部分，只顯示中間的部分圖像|
|centerCrop|按比例縮放使圖片可以填滿View，同時將多餘的寬或高裁剪掉|
|centerInsid|按比例縮放圖片使View可以將圖片完整顯示|

<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:scaleType="fitXY"
    android:visibility="gone"
    app:srcCompat="@android:drawable/ic_menu_gallery" />

<h3>2-4. TableLayout</h3>

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="*">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <TextView
            android:id="@+id/priceOutput"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="小計NT$0"
            android:textColor="#000000"
            android:textSize="18sp" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/scal_btn"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_margin="5dp"
            android:layout_span="3"
            android:gravity="center"
            android:background="#FFFCFC"
            android:text="加入購物車"
            android:textColor="#000000"
            android:textColorHint="#5C5C5C"
            android:textSize="16sp" />
    </TableRow>

    <TableRow
        android:id="@+id/TR2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <Button
            android:id="@+id/pre"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            android:background="#FFFCFC"
            android:onClick="toPrevious"
            android:text="上一頁"
            android:textSize="14sp" />

        <Button
            android:id="@+id/show"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            (...)/>

        <Button
            android:id="@+id/cart"
            (...)
            android:layout_marginRight="5dp"
            android:onClick="toCart" />
    </TableRow>

</TableLayout>

<h3>2-5. 權重</h3>

第一層級：
| 名稱 | height |weight|
| --------- | --------- | --------- |
| TextView | wrap_content |0 |
| ScrollView | match_parent |1 |
| imageView | 300dp |0 |
| TableLayout | wrap_content |0 |

第五層級：
| 名稱 | width |weight|
| --------- | --------- | --------- |
| CheckBox | wrap_content | 0 |
| TextView | wrap_content | 1 |
| EditText | 100dp | 0 |
| radioButton x 5| wrap_content | 1 |

頁面2顯示牛排選擇
---
將中間的紅色TextView字體加大至16sp，文字改成Your choice，再將文字位置移至RadioGroup下方。

| 勾選情況 | 再次勾選 |
| -------- | -------- |
|||

當使用者勾選第X個牛排CheckBox後會顯示未選擇熟度(default)或選擇RadioButton後改變的rgXStr熟度文字，當使用者取消勾選CheckBox時，文字改回Your choice且取消RadioGroup的選擇，取消RadioGroup的選擇會觸發其OnCheckedChangeListener，該rgXStr會回到預設值(未選擇熟度)。

<h3>setChoice</h3>

新增設定TextView的函式：

private void setChoice(CheckBox f, EditText n, String rgStr, TextView textView){
    //獲取該ET輸入的數量
    String inputStr = n.getText().toString();
    
    //在該CheckBox有勾選時才會設定顯示文字
    if (f.isChecked()){
        textView.setText("您選擇了"+inputStr+"份"+rgStr+"的"+f.getText().toString());
    }else{
        textView.setText("Your choice");
    }
}

<h3>RadioGroup.OnCheckedChangeListener</h3>

在這裡要監聽選擇的RadioGroup子選項來改變要顯示的熟度字串rbStr，然後將改變過的rbStr傳給選擇的RadioGroup的專屬rgXStr字串，並設定TextView。

宣告變數：

private RadioGroup RG1, RG2, RG3, RG4;
//RadioGroup的專屬rgXStr字串
private String rg1Str = "未選擇熟度";
private String rg2Str = "未選擇熟度";
private String rg3Str = "未選擇熟度";
private String rg4Str = "未選擇熟度";

創建一個RadioGroup的選擇狀態改變監聽器OnCheckedChangeListener，然後分配給多個RadioGroup對象。

//獲取控件可以和添加監聽寫在一起
(RG1 = (RadioGroup) findViewById(R.id.RG1)).setOnCheckedChangeListener(rgCheckedListener);

private RadioGroup.OnCheckedChangeListener rgCheckedListener = new RadioGroup.OnCheckedChangeListener(){

    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int checkID) {
        String rbStr;

        //判斷選擇的是第幾個RadioButton
        if (checkID==radioGroup.getChildAt(0).getId()){
            rbStr = "生";
        }else if(checkID==radioGroup.getChildAt(1).getId()){
            rbStr = "三分熟";
        }else if(checkID==radioGroup.getChildAt(2).getId()){
            rbStr = "五分熟";
        }else if(checkID==radioGroup.getChildAt(3).getId()){
            rbStr = "七分熟";
        }else if(checkID==radioGroup.getChildAt(4).getId()){
            rbStr = "全熟";
        }else{
            rbStr = "未選擇熟度";
        }

        //判斷選擇的是第幾個RadioGroup來改變對應的TextView與image
        if (radioGroup.getId()==R.id.RG1){
            rg1Str = rbStr;
            setChoice(f1, n1, rg1Str, s1);
        }else if (radioGroup.getId()==R.id.RG2){
            rg2Str = rbStr;
            setChoice(f2, n2, rg2Str, s2);
        }else if (radioGroup.getId()==R.id.RG3){
            rg3Str = rbStr;
            setChoice(f3, n3, rg3Str, s3);
        }else if (radioGroup.getId()==R.id.RG4){
            rg4Str = rbStr;
            setChoice(f4, n4, rg4Str, s4);
        }

    }
};

<h3>CheckBox.OnCheckedChangeListener</h3>

在監聽CheckBox勾選狀態的地方加入該函式：

private CompoundButton.OnCheckedChangeListener cbCheckedListener = new CompoundButton.OnCheckedChangeListener() {

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        switch (buttonView.getId()) {
            case R.id.steak1:
                setChoice(f1, n1, rg1Str, s1);
                break;
            (...case x 3)
        }
    }
};

<h3>EditText.TextChangedListener</h3>

在監聽EditText文字狀態改變的地方加入該函式：

private TextWatcher textChange = new TextWatcher(){

    @Override
    public void afterTextChanged(Editable editable) {
        switch (getCurrentFocus().getId()) {
            case R.id.snum1:
                setChoice(f1, n1, rg1Str, s1);
                break;
            (...case x 3)
        }
    }
}

頁面2變更牛排圖片
---

宣告變數：

private ImageView image;
LinearLayout steakLayout1, steakLayout2, steakLayout3, steakLayout4;

獲取image控件以及給steakLayout加入OnClick監聽器：

image = (ImageView) findViewById(R.id.image);
(steakLayout1 = (LinearLayout) findViewById(R.id.steakLayout1)).setOnClickListener(LinearListener);

在點擊那一塊linearLayout時變更圖片：

image.setImageResource(R.drawable.檔名); //變更圖片的寫法

private View.OnClickListener LinearListener = new View.OnClickListener() {

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.steakLayout1:
                image.setImageResource(R.drawable.steak1);
                break;
            (...case x 3)
        }
    }
};

如果是點擊該steakLayout中的CheckBox或EditText等等都會搶走處理的權利，永遠不會調用到LinearLayout的監聽器，因此，我選擇了在ET的焦點監聽、CB的選取監聽和RG的選取監聽中都加入改變圖片的code。

在監聽EditText焦點改變的地方：

private EditText.OnFocusChangeListener etFocusListener = new EditText.OnFocusChangeListener() {

    @Override
    public void onFocusChange(View view, boolean hasFocus) {
        switch (view.getId()){
            case R.id.snum1:
                image.setImageResource(R.drawable.steak1);
                break;
            (...case x 3)
        }
        
        if (hasFocus) {
            (...)
        }
        
    }
};

在監聽CheckBox是否勾選的地方：

private CompoundButton.OnCheckedChangeListener cbCheckedListener = new CompoundButton.OnCheckedChangeListener() {

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        switch (buttonView.getId()) {
            case R.id.steak1:
                setChoice(f1, n1, rg1Str, s1);
                image.setImageResource(R.drawable.steak1);
                break;
            (...)
        }
    }
};

在監聽RadioGroup的地方：

private RadioGroup.OnCheckedChangeListener rgCheckedListener = new RadioGroup.OnCheckedChangeListener(){

    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int checkID) {

        //判斷選擇的是第幾個RadioButton
        if (checkID==radioGroup.getChildAt(0).getId()){
            rbStr = "生";
        }else if(...)
            
        //判斷選擇的是第幾個RadioGroup來改變對應的TextView與image
        if (radioGroup.getId()==R.id.RG1){
            rg1Str = rbStr;
            setChoice(f1, n1, rg1Str, s1);
            image.setImageResource(R.drawable.steak1);
        }else if(...)
        
    }
};

<h3>顯示/隱藏圖片</h3>

使用Table第三列的show按鈕：

show.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if (isshowing){
            isshowing = false;
            image.setVisibility(View.GONE);
            show.setText("顯示圖片");
        }else{
            isshowing = true;
            image.setVisibility(View.VISIBLE);
            show.setText("關閉圖片");
        }
    }
});

| 隱藏 | 顯示 |
| -------- | -------- |
|  |  |

附加選項
---

附加選項是指頁面1的加料選項與頁面2選擇熟度的選項，而我選擇先隱藏頁面1的加料選項，勾選主選項時才顯示，因為加料選項會影響金額，若顯示它計算會太複雜，頁面2的熟度選項不會影響金額所以不管它，只要在取消主選項時把附加選項取消就好。

<h3>清空選項</h3>

為了簡單的獲取每個CheckBox有沒有被選中，所以把每個CheckBox都加入一個陣列中。

宣告陣列：

private List<CheckBox> checkBoxList = new ArrayList<CheckBox>();

加入元素：

//不必加入附加選項，它們會在主選項監聽事件中處理
checkBoxList.add(f1 = (CheckBox) findViewById(R.id.food1));
checkBoxList.add(f2 = (CheckBox) findViewById(R.id.food2));

迴圈該陣列，將每個有打勾的元素取消選取：

//遍歷集合中的checkBox,將有選取的CheckBox取消
for (CheckBox checkbox : checkBoxList) {
    if (checkbox.isChecked()){
        checkbox.setChecked(false);
    }
}

清空RadioGroup的RadioButton選擇狀態只要使用clearCheck()函式。

RadioGroup.clearCheck();

<h3>當主選項確認</h3>

先把附加選項的visibility屬性設為invisible(不可見)。

<CheckBox
    android:id="@+id/f1_c1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="加煉乳"
    android:visibility="invisible"
    (...)/>

點心菜單－在CheckBox改變價格函式中加入一個addFList不定參數。

CheckBox... addFList //表示附加選項CheckBox的集合

呼叫函式時後面的參數f1_c1, f1_c2會被加入附加選項集合addFList中。

CheckBoxChangePrice(f1,n1,p1, tempPrice1, false,　f1_c1, f1_c2);

public int cbChangePrice(CheckBox f, EditText n, int p, int temp, boolean isAdd, CheckBox... addFList){

    if (!isAdd & f.isChecked()){
        //顯示附加選項
        //遍歷addFList集合
        for (CheckBox checkbox : addFList) {
            //將集合中的每一個checkbox設為可見
            checkbox.setVisibility(View.VISIBLE);
        }
    }
    else if(!isAdd &!f.isChecked()){
        //隱藏和取消附加選項
        (...)
    }

}

<h3>當主選項取消</h3>

點心菜單－在CheckBox改變價格函式中加入隱藏和取消附加選項的code：

public int cbChangePrice(CheckBox f, EditText n, int p, int temp, boolean isAdd, CheckBox... addFList){

    if (!isAdd & f.isChecked()){
        //顯示附加選項
        (...)
    }
    else if(!isAdd &!f.isChecked()){
        //隱藏和取消附加選項
        //遍歷addFList集合
        for (CheckBox checkbox : addFList) {
            //如果該checkbox有被勾選，設定狀態為沒有被勾選
            if (checkbox.isChecked()){
                checkbox.setChecked(false);
            }
            //將集合中的每一個checkbox設為不可見
            checkbox.setVisibility(View.INVISIBLE);
        }
    }
}

牛排菜單－在CheckBox改變價格函式中加入一個RG參數。

RadioGroup RG //表示該商品(主選項)的屬性(附加選項)參照的是哪一組RadioGroup

當主選項未勾選時使用會clearCheck()清空RG的選取狀態。

CheckBoxChangePrice(f1, n1, p1, isChecked, RG1);

public int cbChangePrice(CheckBox f, EditText n, int p, boolean isChecked, RadioGroup RG){

    if(isChecked){
        
    }
    else{
        //清空該RadioGroup的選取狀態
        RG.clearCheck();
    }

}

<h3>加入購物車時</h3>

:::warning
牛排菜單－加入購物車的時候要判斷有沒有未選擇熟度的，若有一個沒有選取就不能加入，會跳出氣泡文字說要選取熟度，若加入成功則要清空選項。
:::

cal.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        boolean go = false;

        if (f1.isChecked() && rg1Str.equals("未選擇熟度")){
            Toast.makeText(orderSteakActivity.this,"您未選擇"+f1.getText().toString()+"的熟度",Toast.LENGTH_SHORT).show();
        }else if(f2.isChecked() && rg2Str.equals("未選擇熟度")){
            Toast.makeText(orderSteakActivity.this,"您未選擇"+f2.getText().toString()+"的熟度",Toast.LENGTH_SHORT).show();
        }else{
            go = true;
        }

        if (go){
            (...加入購物車的動作)
        }
    }
});

:::info
加入購物車－[期中報告：購物車](https://hackmd.io/rQ4JlwVjTwuw6C5P590-EQ?view)
:::