Layout UI中放 Layout UI
如圖，這次的範例中有三個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，這樣程式才會正確喔！
不然程式會當作你畫面沒這東西，會閃退滴(´･д･｀)
到這邊就可以執行了，其他都是一些邏輯判斷的東西，試試看吧(・ωｰ)～☆
留言
發佈留言