レイアウト設定のデザイン調整

components/Settings/LayoutSettings.js

@@ -58,7 +58,7 @@ export const LayoutSettings = ({
             padding: 10,
           }}
         >
-          設定画面
+          レイアウト設定
         </Text>
         <View style={{ flex: 1 }}></View>
       </View>
@@ -90,15 +90,14 @@ export const LayoutSettings = ({
             trueText={"オリジナル\n(駅名標)"}
             falseImage={require("../../assets/configuration/station_default.jpg")}
             trueImage={require("../../assets/configuration/station_original.jpg")}
-          />
+          >
-          {stationMenu == "true" && (
             <SimpleSwitch
               bool={usePDFView}
               setBool={setUsePDFView}
               color="red"
               str="時刻表PDFをアプリの外で表示する"
             />
-          )}
+          </SwitchArea>
           <SwitchArea
             str="列車メニュー"
             bool={trainMenu}
@@ -107,37 +106,34 @@ export const LayoutSettings = ({
             trueText={"オリジナル"}
             falseImage={require("../../assets/configuration/train_default.jpg")}
             trueImage={require("../../assets/configuration/train_original.jpg")}
-          />
+          >
-          {trainMenu == "true" && (
+            <TripleSwitchArea
-            <>
+              str={"ヘッダーサイズ"}
-              <TripleSwitchArea
+              bool={headerSize}
-                str={"ヘッダーサイズ"}
+              setBool={setHeaderSize}
-                bool={headerSize}
+              firstItem={{
-                setBool={setHeaderSize}
+                firstImage: require("../../assets/configuration/train_original_small.jpg"),
-                firstItem={{
+                firstText: "小固定",
-                  firstImage: require("../../assets/configuration/train_original_small.jpg"),
+                firstValue: "small",
-                  firstText: "小固定",
+              }}
-                  firstValue: "small",
+              secondItem={{
-                }}
+                secondImage: require("../../assets/configuration/train_original.jpg"),
-                secondItem={{
+                secondText: "既定(可変)",
-                  secondImage: require("../../assets/configuration/train_original.jpg"),
+                secondValue: "default",
-                  secondText: "既定(可変)",
+              }}
-                  secondValue: "default",
+              thirdItem={{
-                }}
+                thirdImage: require("../../assets/configuration/train_original.jpg"),
-                thirdItem={{
+                thirdText: "大固定",
-                  thirdImage: require("../../assets/configuration/train_original.jpg"),
+                thirdValue: "big",
-                  thirdText: "大固定",
+              }}
-                  thirdValue: "big",
+            />
-                }}
+            <SimpleSwitch
-              />
+              bool={trainPosition}
-              <SimpleSwitch
+              setBool={setTrainPosition}
-                bool={trainPosition}
+              color="red"
-                setBool={setTrainPosition}
+              str="列車の現在位置をアイコン表示"
-                color="red"
+            />
-                str="列車の現在位置をアイコン表示"
+          </SwitchArea>
-              />
-            </>
-          )}
         </View>
       </ScrollView>
     </View>
@@ -151,12 +147,12 @@ const SimpleSwitch = ({ bool, setBool, str }) => (
       checkedColor="red"
       onPress={() => setBool(bool == "true" ? "false" : "true")}
       containerStyle={{
-        width: "100%",
+        flex: 1,
-        backgroundColor: "white",
+        backgroundColor: "#00000000",
         borderColor: "white",
         alignContent: "center",
       }}
-      textStyle={{ fontSize: 20 }}
+      textStyle={{ fontSize: 20, fontWeight: "normal" }}
       title={str}
     />
   </View>

components/atom/SimpleSwitch.js

@@ -4,6 +4,7 @@ import {
   TouchableOpacity,
   Text,
   Image,
+  LayoutAnimation,
 } from "react-native";
 export const SimpleSwitch = ({
   bool,
@@ -27,7 +28,10 @@ export const SimpleSwitch = ({
           flexDirection: "row",
           flex: 1,
         }}
-        onPress={() => setBool(value.toString())}
+        onPress={() => {
+          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+          setBool(value.toString());
+        }}
       >
         <Image
           source={image}

components/atom/SwitchArea.js

@@ -8,9 +8,18 @@ export const SwitchArea = ({
   trueImage,
   falseText,
   trueText,
+  children,
 }) => {
   return (
-    <View style={{ flexDirection: "column", padding: 10 }}>
+    <View
+      style={{
+        flexDirection: "column",
+        padding: 10,
+        backgroundColor: "#00000010",
+        borderRadius: 10,
+        margin: 5,
+      }}
+    >
       <Text
         style={{
           fontSize: 25,
@@ -18,6 +27,7 @@ export const SwitchArea = ({
           alignContent: "center",
           textAlign: "center",
           textAlignVertical: "center",
+          fontWeight: "bold",
         }}
       >
         {str}
@@ -40,6 +50,7 @@ export const SwitchArea = ({
           subText={trueText}
         />
       </View>
+      {bool == "true" && children}
     </View>
   );
 };

components/atom/TripleSwitchArea.js

@@ -12,7 +12,7 @@ export const TripleSwitchArea = ({
     <View style={{ flexDirection: "column", padding: 10 }}>
       <Text
         style={{
-          fontSize: 25,
+          fontSize: 20,
           alignItems: "center",
           alignContent: "center",
           textAlign: "center",