[공통][Bug] Custom Switch: trask 에 drawable 과 text 를 그려줌

app/src/main/java/kr/co/zumo/app/lifeplus/view/custom/OnOffSwitch.java

@@ -4,6 +4,7 @@
 package kr.co.zumo.app.lifeplus.view.custom;
 
 import android.content.Context;
+import android.graphics.Rect;
 import android.support.annotation.Nullable;
 import android.util.AttributeSet;
 import android.widget.CompoundButton;
@@ -42,16 +43,17 @@ public class OnOffSwitch extends Switch {
   }
 
   private void init() {
-    setTrackDrawable(new SwitchTrackTextDrawable(getContext(), R.string.on, R.string.off, false));
+    Rect paddingRect = new Rect(getPaddingStart(), getPaddingTop(), getPaddingRight(), getPaddingBottom());
+    setTrackDrawable(new SwitchTrackTextDrawable(getContext(), R.string.on, R.string.off, false, paddingRect));
 
     super.setOnCheckedChangeListener((compoundButton, isChecked) -> {
       performOnCheckedChanged(compoundButton, isChecked);
 
       if (isChecked) {
-        setTrackDrawable(new SwitchTrackTextDrawable(getContext(), R.string.on, R.string.off, true));
+        setTrackDrawable(new SwitchTrackTextDrawable(getContext(), R.string.on, R.string.off, true, paddingRect));
       }
       else {
-        setTrackDrawable(new SwitchTrackTextDrawable(getContext(), R.string.on, R.string.off, false));
+        setTrackDrawable(new SwitchTrackTextDrawable(getContext(), R.string.on, R.string.off, false, paddingRect));
       }
     });
   }

app/src/main/java/kr/co/zumo/app/lifeplus/view/fragment/setting/SwitchTrackTextDrawable.java

@@ -31,13 +31,14 @@ public class SwitchTrackTextDrawable extends Drawable {
   private String leftText;
   private String rightText;
   private Paint textPaint;
+  private Rect padding;
   private boolean isChecked;
 
-  public SwitchTrackTextDrawable(@NonNull Context context, @StringRes int leftTextId, @StringRes int rightTextId, boolean isChecked) {
+  public SwitchTrackTextDrawable(@NonNull Context context, @StringRes int leftTextId, @StringRes int rightTextId, boolean isChecked, Rect padding) {
     this.context = context;
     this.isChecked = isChecked;
-    textPaint = doTextPaint();
-    textPaint.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.BOLD));
+    textPaint = getTextPaint();
+    this.padding = padding;
 
     if (isChecked) {
       //switch on
@@ -52,12 +53,12 @@ public class SwitchTrackTextDrawable extends Drawable {
 
   }
 
-  private Paint doTextPaint() {
+  private Paint getTextPaint() {
     Paint textPaint = new Paint();
     textPaint.setAntiAlias(true);
     textPaint.setStyle(Paint.Style.FILL);
-    textPaint.setTextAlign(Paint.Align.CENTER);
     textPaint.setTextSize(ResourceUtil.dpToPx(9));
+    textPaint.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.BOLD));
     return textPaint;
   }
 
@@ -65,26 +66,43 @@ public class SwitchTrackTextDrawable extends Drawable {
   @Override
   public void draw(@NonNull Canvas canvas) {
     final Rect textBounds = new Rect();
+    int paddingTop = padding.top;
+    int paddingBottom = padding.bottom;
+    int paddingStart = padding.left;
+    int paddingEnd = padding.right;
+    Rect bound = canvas.getClipBounds();
     int heightBaseline;
-    int widthQuarter = canvas.getClipBounds().width() / 4;
+
+    float left = paddingStart;
+    float top = paddingTop + 3;  // thumb 과 track 의 높이 차이 2/1 을 빼준다. => ResourceUtil.dpToFloat(1) 를 빼면 track 의 위치가 잘 맞지 않아서 3를 직접 빼줌
+    float right = left + (bound.width() - paddingStart - paddingEnd);
+    float bottom = bound.height() - paddingBottom - 3; // track 의 높이 18dp => 이지만 높이 계산이 잘 맞지 않는 경우가 있어서 bottom 으로부터 계산
 
     if (isChecked) {
+
+      // track
+      Drawable d = ResourceUtil.getDrawable(R.drawable.switch_track_on);
+      d.setBounds((int) left, (int) top, (int) right, (int) bottom);
+      d.draw(canvas);
+
       //on 텍스트 흰색 변경
       textPaint.getTextBounds(leftText, 0, leftText.length(), textBounds);
-      heightBaseline = canvas.getClipBounds().height() / 2 + textBounds.height() / 2;
-      textPaint.setColor(context.getResources().getColor(android.R.color.white));
-      canvas.drawText(leftText, 0, leftText.length(),
-        widthQuarter + 15, heightBaseline, textPaint);
+      textPaint.setColor(ResourceUtil.getColor(R.color.CFFFFFF));
+      heightBaseline = ((bound.height() - paddingTop - paddingBottom) >> 1) - (textBounds.height() >> 1) + paddingTop - textBounds.top;
+      canvas.drawText(leftText, 0, leftText.length(), paddingStart + ResourceUtil.dpToFloat(8) - textBounds.left, heightBaseline, textPaint);
     }
     else {
+
+      // track
+      Drawable d = ResourceUtil.getDrawable(R.drawable.switch_track_off);
+      d.setBounds((int) left, (int) top, (int) right, (int) bottom);
+      d.draw(canvas);
+
       //off  텍스트 검정 변경
       textPaint.getTextBounds(rightText, 0, rightText.length(), textBounds);
-      widthQuarter = canvas.getClipBounds().width() / 4;
-      heightBaseline = canvas.getClipBounds().height() / 2 + textBounds.height() / 2;
-      textPaint.setColor(context.getResources().getColor(android.R.color.darker_gray));
-      canvas.drawText(rightText, 0, rightText.length(),
-        widthQuarter * 3 - 20, heightBaseline, textPaint);
-      ;
+      textPaint.setColor(ResourceUtil.getColor(R.color.C999999));
+      heightBaseline = ((bound.height() - paddingTop - paddingBottom) >> 1) - (textBounds.height() >> 1) + paddingTop - textBounds.top;
+      canvas.drawText(rightText, 0, rightText.length(), right - textBounds.width() - ResourceUtil.dpToFloat(6) - textBounds.left, heightBaseline, textPaint);
     }
 
 

app/src/main/res/drawable/switch_thumb_off.xml

@@ -11,7 +11,7 @@
     android:color="#ffffff" />
 
   <stroke
-    android:width="1dp"
+    android:width="2dp"
     android:color="#e5e5e5" />
 
 </shape>

app/src/main/res/drawable/switch_thumb_on.xml

@@ -11,7 +11,7 @@
     android:color="#ffffff" />
 
   <stroke
-    android:width="1dp"
+    android:width="2dp"
     android:color="#333333" />
 
 </shape>

app/src/main/res/drawable/switch_track_off.xml

@@ -13,7 +13,4 @@
   <solid
     android:color="@color/CE5E5E5"/>
 
-  <stroke
-    android:width="2dp"
-    android:color="@color/CFFFFFF"/>
 </shape>

app/src/main/res/drawable/switch_track_on.xml

@@ -13,8 +13,4 @@
   <solid
     android:color="@color/C333333"/>
 
-  <stroke
-    android:width="2dp"
-    android:color="@color/CFFFFFF"/>
-
 </shape>

app/src/main/res/layout/setting_custom_menu1.xml

@@ -106,7 +106,7 @@
       android:id="@+id/switch_pin_on_off"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:layout_marginEnd="10dp"
+      android:padding="10dp"
       app:layout_constraintBottom_toBottomOf="@+id/textView2"
       app:layout_constraintEnd_toStartOf="@+id/guide_end"
       app:layout_constraintTop_toTopOf="@+id/textView2"/>
@@ -115,8 +115,8 @@
       android:id="@+id/guide_end"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:orientation="vertical"
       android:drawablePadding="20dp"
+      android:orientation="vertical"
       app:layout_constraintGuide_end="15dp"/>
 
   </android.support.constraint.ConstraintLayout>

app/src/main/res/values/styles.xml

@@ -5,8 +5,8 @@
   </style>
 
   <!--<style name="AppTheme.NoActionBar">-->
-    <!--<item name="windowActionBar">false</item>-->
-    <!--<item name="windowNoTitle">true</item>-->
+  <!--<item name="windowActionBar">false</item>-->
+  <!--<item name="windowNoTitle">true</item>-->
   <!--</style>-->
 
   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
@@ -68,7 +68,8 @@
   <style name="OnOffSwitch" parent="@style/Widget.AppCompat.CompoundButton.Switch">
     <item name="android:switchMinWidth">46dp</item>
     <item name="android:thumb">@drawable/switch_thumb_selector</item>
-    <item name="android:background">@drawable/switch_track_selector</item>
+    <item name="android:track">@drawable/switch_track_selector</item>
+    <item name="android:background">@null</item>
     <item name="android:textOff">""</item>
     <item name="android:textOn">""</item>
   </style>