---
# System prepended metadata

title: android-常用UI展示
tags: [其他]

---

---
title: android-常用UI展示
tags: 其他
---
---

專案開始-單選RadioButton+複選CheckBox
開工~![](https://i.imgur.com/Id9YMPQ.png)
![](https://i.imgur.com/FgcdSfC.png)

Group先做再做button
button一定會縮排-要有2個選項要選2個button
![](https://i.imgur.com/oCMFfrb.png)


Compontaint Tree預設是由上往下排
要橫的排要放入Layouts
![](https://i.imgur.com/YyFQZy1.png)

要記得綁定
放checkBox![](https://i.imgur.com/H7ZEJyf.png)
![](https://i.imgur.com/6nv1O9F.png)

Layouts不好調-按紐和字都會跑入~要靠移動旁邊的tree
或許調程式碼還比較快
<?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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="36dp"
        android:text="調查表"
        android:textSize="36sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView">

        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="RadioButton" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="RadioButton" />
    </RadioGroup>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="409dp"
        android:layout_height="139dp"
        android:layout_marginTop="36dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radioGroup">

        <CheckBox
            android:id="@+id/checkBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="CheckBox" />

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

        <CheckBox
            android:id="@+id/checkBox3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="CheckBox" />
    </LinearLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="36dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout2" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="36dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

</androidx.constraintlayout.widget.ConstraintLayout>
要GROUP去管理...所以要有ID
button也重命名ID![](https://i.imgur.com/Xb2W20Z.png)

如果text不能改就要從CODE去改


---
![](https://i.imgur.com/7VvSYN9.png)
![](https://i.imgur.com/Vo9X3f9.png)

到onClick的orientation可以看到變橫的horizontal
讓linerlayout跟著副容器的大小![](https://i.imgur.com/W6L2Gcj.png)
![](https://i.imgur.com/IpfsHRo.png)

在Declared Attributs裡layout_wiudth和match_wiudth 選wrap_content或0dp
然後讓邊邊有留邊要選到padding![](https://i.imgur.com/ZUOXhMD.png)
![](https://i.imgur.com/QinBw2c.png)
![](https://i.imgur.com/wORShzU.png)

命名checkbox的變數
Button-onCilck可以動做![](https://i.imgur.com/lqvaNkA.png)

回到程式碼.java檔
package com.huang.myui3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onClick(View view){

    }
}
預先被V只能選一個




回到程式碼.java檔
從放入變數開始~
package com.huang.myui3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    RadioGroup sex;
    CheckBox c1,c2,c3;
    TextView show;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onClick(View view){

    }
}
顯示字串:String all="";
就是顯示有人打的東西
package com.huang.myui3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    RadioGroup sex;
    CheckBox c1,c2,c3;
    TextView show;
    String all="";


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onClick(View view){

    }
}
繼續寫.java程式碼=讓他去檢查誰被勾選
sex=findViewById(R.id.sex);
sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup grroup, int checkedId) {
        
    }
});
新增變數String s1,s2;
逐一檢查:
package com.huang.myui3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    RadioGroup sex;
    CheckBox c1,c2,c3;
    TextView show;
    String all="";
    String s1,s2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        sex = findViewById(R.id.sex);
        sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch(checkedId){
                    case R.id.r1:
                        s1 = "先生";
                        Toast.makeText(MainActivity.this,
                                s1,
                                Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.r2:
                        s1 = "女士";
                        Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.r3:
                        s1 = "不顯示";
                        Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        });

        //CheckBox
    }

    public void onClick(View view) {
    }
}


再來是各做各的CheckBox
c1=findViewById(R.id.c1);
c2=findViewById(R.id.c2);
c3=findViewById(R.id.c3);
加入偵聽器c1.setOnCheckedChangeListener(new MM());..看自己有沒有被V
還有最下面的textview
package com.huang.myui3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    RadioGroup sex;
    CheckBox c1,c2,c3;
    TextView show;
    String all="";
    String s1,s2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        sex = findViewById(R.id.sex);
        sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch(checkedId){
                    case R.id.r1:
                        s1 = "先生";
                        Toast.makeText(MainActivity.this,
                                s1,
                                Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.r2:
                        s1 = "女士";
                        Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.r3:
                        s1 = "不顯示";
                        Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        });

        //CheckBox
        c1=findViewById(R.id.c1);
        c2=findViewById(R.id.c2);
        c3=findViewById(R.id.c3);

        c1.setOnCheckedChangeListener(new MM());
        c2.setOnCheckedChangeListener(new MM());
        c3.setOnCheckedChangeListener(new MM());

        show=findViewById(R.id.show);
    }

    public void onClick(View view) {
    }
}




![](https://i.imgur.com/zN3KLfY.png)
![](https://i.imgur.com/C2c0Bl2.png)

按鈕蒐集資料顯示在show

````
public void onClick(View view) {


}

````

宣告物件被取出來

````
for(int i:cbs){
            //CheckBox cc = findViewById(i);
            cc = findViewById(i);
            if(cc.isChecked()){
                s2 += cc.getText()+"\t";
            }
````

偵聽器可以被改寫
//c1.setOnCheckedChangeListener(new MM());
//c2.setOnCheckedChangeListener(new MM());
//c3.setOnCheckedChangeListener(new MM());
改寫成
c1 = findViewById(R.id.c1);
c2 = findViewById(R.id.c2);
c3 = findViewById(R.id.c3);

![](https://i.imgur.com/0SOscPi.png)

````package com.huang.myui3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {
    //宣告變數
    RadioGroup sex;
    CheckBox c1, c2, c3;
    TextView show;
    String all="";
    String s1="先生", s2="沒有點選";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //RadioGroup
        sex = findViewById(R.id.sex);
        sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch(checkedId){
                    case R.id.r1:
                        s1 = "先生";
                        Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.r2:
                        s1 = "女士";
                        Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.r3:
                        s1 = "不顯示";
                        Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        });

        //CheckBox
        c1 = findViewById(R.id.c1);
        c2 = findViewById(R.id.c2);
        c3 = findViewById(R.id.c3);
        //c1.setOnCheckedChangeListener(new MM());
        //c2.setOnCheckedChangeListener(new MM());
        //c3.setOnCheckedChangeListener(new MM());

        show = findViewById(R.id.show);
    }
    //CheckBox的偵聽器:內部類
    private class MM implements CompoundButton.OnCheckedChangeListener {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            //判斷元件
            CheckBox box = (CheckBox)buttonView;
            //取出元件的名稱
            String name = box.getText().toString();
            //判斷點選狀態
            if(isChecked){
                Toast.makeText(MainActivity.this, name+"被選中", Toast.LENGTH_SHORT).show();
            }else{
                Toast.makeText(MainActivity.this, name+"被取消", Toast.LENGTH_SHORT).show();
            }
        }
    }
    //按鈕收集資料,顯示在show
    public void onClick(View view) {

        //先清空s2
        s2 = "";
        //收集CheckBox的結果
        int[] cbs = {R.id.c1, R.id.c2, R.id.c3};
        CheckBox cc;
        for(int i:cbs){
            //CheckBox cc = findViewById(i);
            cc = findViewById(i);
            if(cc.isChecked()){
                s2 += cc.getText()+"\t";
            }
        }
        //判斷文字欄位是否為空
        //TextUtils需 import android.text.TextUtils;(舊版)
        if(TextUtils.isEmpty(s2)){
            s2 = "沒有點選";
        }
        all = s1+"\n"+s2;
        show.setText(all);
    }
}

````