over 4 years ago

0. 下載

0.1. 主專案 Source Code

0.2. 相依專案 Source Code, appcompat

元件名稱 說明
ToggleButton 切換按鈕,自行可以表示兩種狀態。
RadioButton 單選按鈕,一群 RadioButton 只能有一個按鈕可表示核選狀態。
CheckBox 多選按鈕,一群 CheckBox 可表示複選狀態。
Button 按鈕
ImageButton 圖片按鈕

1. ToggleButton

1.1. layout,前端元件宣告

ToggleButton
  <ToggleButton
    android:id="@+id/ToggleButton01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOn="On"
    android:textOff="Off"
    android:checked="true" />

1.2. Java 後端元件

以下請寫在 Fragment 之中,Activity 只負責調派 Fragment

ToggleButton
// 引用類別
import android.widget.ToggleButton;
// 宣告變數
public class PlaceholderFragment extends Fragment {
  private ToggleButton toggleButton01;
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    ...  (省略)
    // 前後端連結,建構物件
    toggleButton01 = (ToggleButton) rootView.findViewById(R.id.ToggleButton01);
    // 設定 Onclick 事件監聽器
    toggleButton01.setOnClickListener(toggleClick);  
  }
  // 宣告 Onclick 事件監聽器
  View.OnClickListener toggleClick = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
      Toast toast;
      if(v instanceof ToggleButton && ((ToggleButton)v).isChecked()){
        switch(v.getId()){
          case R.id.ToggleButton01:
            toast = Toast.makeText(getActivity(), "It is On", Toast.LENGTH_SHORT);
            toast.show();
            break;
        }
      }else{
        switch(v.getId()){
          case R.id.ToggleButton01:
            toast = Toast.makeText(getActivity(), "It is Off", Toast.LENGTH_SHORT);
            toast.show();
            break;
        }
      }
    }
  };
}

2. RadioButton

2.2. layout,前端元件宣告

RadioButton
<RadioGroup
    android:id="@+id/radioGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <RadioButton
        android:id="@+id/radioButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="One" />
    <RadioButton
        android:id="@+id/radioButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Two" />
    <RadioButton
        android:id="@+id/radioButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Three" />
</RadioGroup>

2.2. Java 後端元件

以下請寫在 Fragment 之中,Activity 只負責調派 Fragment

RadioButton
// 引用類別
import android.widget.RadioGroup;
// 宣告變數

public class PlaceholderFragment extends Fragment {
  private RadioGroup radioGroup;
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    ...  (省略)
    // 前後端連結,建構物件
    radioGroup = (RadioGroup) rootView.findViewById(R.id.radioGroup);
    // 設定 OnCheckedChange 事件監聽器
    radioGroup.setOnCheckedChangeListener(radioListener);    
  }
  
  // 宣告 OnCheckedChange 事件監聽器
  RadioGroup.OnCheckedChangeListener radioListener = new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
      Toast toast;
      switch(checkedId){
        case R.id.radioButton1:
          toast = Toast.makeText(getActivity(), "radioButton 01 ", Toast.LENGTH_SHORT);
          toast.show();
          break;
        case R.id.radioButton2:
          toast = Toast.makeText(getActivity(), "radioButton 02 ", Toast.LENGTH_SHORT);
          toast.show();
          break;
        case R.id.radioButton3:
          toast = Toast.makeText(getActivity(), "radioButton 03 ", Toast.LENGTH_SHORT);
          toast.show();
          break;
      }
    }
  };
}

3. CheckBox

3.1. layout,前端元件宣告

CheckBox
<CheckBox
    android:id="@+id/checkBox1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="CheckBox" />
<CheckBox
    android:id="@+id/checkBox2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="CheckBox" />

3.2. Java 後端元件

以下請寫在 Fragment 之中,Activity 只負責調派 Fragment

CheckBox
// 引用類別
import android.widget.CheckBox;
import android.widget.CompoundButton;

public class PlaceholderFragment extends Fragment {
  // 宣告變數
  private CheckBox checkBox01;
  private CheckBox checkBox02;
  @Override  
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    ...  (省略)
    // 前後端連結,建構物件
    checkBox01 = (CheckBox)rootView.findViewById(R.id.checkBox1);
    checkBox02 = (CheckBox)rootView.findViewById(R.id.checkBox2);
    // 設定 OnCheckedChange 事件監聽器
    checkBox01.setOnCheckedChangeListener(checkListener);
    checkBox02.setOnCheckedChangeListener(checkListener);
  }
  // 宣告 OnCheckedChange 事件監聽器
  CompoundButton.OnCheckedChangeListener checkListener = new CompoundButton.OnCheckedChangeListener(){
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
      Toast toast;
      switch(buttonView.getId()){
        case R.id.checkBox1:
          if(isChecked){
            toast = Toast.makeText(getActivity(), "checkBox 01 is Checked", Toast.LENGTH_SHORT);
            toast.show();
            }else{
            toast = Toast.makeText(getActivity(), "checkBox 01 is not Checked", Toast.LENGTH_SHORT);
            toast.show();
          }
          break;
        case R.id.checkBox2:
          if(isChecked){
            toast = Toast.makeText(getActivity(), "checkBox 02 is Checked", Toast.LENGTH_SHORT);
            toast.show();
            }else{
            toast = Toast.makeText(getActivity(), "checkBox 02 is not Checked", Toast.LENGTH_SHORT);
            toast.show();
          }
          break;
      }
    }
  };
}

4. 畫面展示

5. 動態新增/刪除元件,以 TextView 為例

Dynamic Add/Delete View
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    
// 給予 linearLayout 一個 id,備於後端使用   
    android:id="@+id/linearLayout"    
    ...  (省略) >
</LinearLayout>
Dynamic Add/Delete View
// 引用類別
import android.widget.LinearLayout;

public class PlaceholderFragment extends Fragment {
    // 宣告 TextView t 為屬性成員
  TextView t;
  
  // 在 onCreateView 中初始化 TextView
  @Override  
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    ...  (省略)
    t = new TextView(rootView.getContext());
    t.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    t.setText("12312231");
  }

  // 讓 ToggleButton 可以切換顯示 TextView
  View.OnClickListener toggleClick = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
      Toast toast;
      // 將前端 layout 連結到後端
      View layout = getActivity().findViewById(R.id.linearLayout);
      
      if(v instanceof ToggleButton && ((ToggleButton)v).isChecked()){
        switch(v.getId()){
          case R.id.ToggleButton01:
            toast = Toast.makeText(getActivity(), "It is On", Toast.LENGTH_SHORT);
            toast.show();
            // 將 TextView t 加入 layout
            ((LinearLayout)layout).addView(t);
            break;
        }
      }else{
        switch(v.getId()){
          case R.id.ToggleButton01:
            toast = Toast.makeText(getActivity(), "It is Off", Toast.LENGTH_SHORT);
            toast.show();            
            // 將 TextView t 從 layout 中刪除
            ((LinearLayout)layout).removeView(t);
            break;
        }
      }
    }
  };
}

6. YouTube 線上教學影片

← Android - Play 上架說明 HL7 - HL7v2 第三方函式庫 - HAPI →
 
comments powered by Disqus