Android：カスタムレイアウトのサイジングを設定する方法

Question

ImageViewの左側にTextViewを配置し、特定のステータスを表すアイコンを含むカスタム水平レイアウトを作成しようとしました。 ImageViewは、高さと幅がTextViewのテキストの高さに等しい正方形の次元に保持されます。ただし、レイアウトxmlファイルで指定されているようにテキストの高さが設定されておらず、ImageViewの後に未知のパディングが存在するなど、問題は引き続き発生します。これらの問題は、this imageにあります。赤色は未知のパディングを示し、青色はテキストサイズの不一致を示し、両方とも12spに設定されています。フォントサイジングとパディングの問題を修正して、レイアウトをグリッドレイアウトに適切に追加することができます。グリッドレイアウトには、これらのカスタムレイアウトのグリッドが含まれます。

StatusIcon.java

//This is part of the java class that extends ImageView to resize the Icon 
@Override 
protected void onMeasure(int width, int height) { 
    super.onMeasure(width, height); 

    int measuredHeight = getMeasuredHeight(); 
    setMeasuredDimension(measuredHeight, measuredHeight); 
} 

StatusIndicator.java

//This is the java class for the custom layout. 
public class StatusIndicator extends LinearLayout { 

    private TextView label; 
    private StatusIcon statusLed; 
    private CharSequence labelText; 
    private float labelTextSize; 

    public enum Status { 
     GOOD, 
     WARNING, 
     CRITICAL 
    } 

    /* 
    * Removed the basic required class constructors to save space. 
    */ 

    private void getAttributes(Context context, AttributeSet attrs){ 
     TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.StatusIndicator); 
     labelText = typedArray.getString(R.styleable.StatusIndicator_label); 
     labelTextSize = typedArray.getDimensionPixelSize(R.styleable.StatusIndicator_labelSize, 0); 
     typedArray.recycle(); 
    } 

    private void initializeViews(Context context){ 
     LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
     inflater.inflate(R.layout.view_status_indicator, this); 
    } 

    @Override 
    protected void onFinishInflate() { 
     super.onFinishInflate(); 

     //Setup UI elements in layout 
     label = (TextView) findViewById(R.id.textView_statusIndicatorLabel); 
     statusLed = (StatusIcon) findViewById(R.id.imageView_statusIndicatorLed); 
     label.setText(labelText); 

     if(labelTextSize > 0){ 
      label.setTextSize(TypedValue.COMPLEX_UNIT_SP, labelTextSize); 
     } 
    } 

    public void setStatus(StatusIndicator.Status status){ 
     switch (status){ 
      case GOOD: 
       statusLed.setImageResource(R.mipmap.ic_status_panel_good); 
       break; 
      case WARNING: 
       statusLed.setImageResource(R.mipmap.ic_status_panel_warning); 
       break; 
      case CRITICAL: 
       statusLed.setImageResource(R.mipmap.ic_status_panel_critical); 
       break; 
     } 
    } 
} 

view_status_indicator.xml

<?xml version="1.0" encoding="utf-8"?> 
<merge 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" 
    tools:parentTag="LinearLayout" 
    tools:orientation="horizontal"> 

    <TextView 
     android:id="@+id/textView_statusIndicatorLabel" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:gravity="center_vertical|start" 
     android:layout_marginEnd="2dp" 
     android:text="@string/default_title" 
     android:textAppearance="@style/TextAppearance.AppCompat.Title" 
     android:textSize="12sp"/> 

    <com.css_design.android_quickbridge.ui.home.status_panel.StatusIcon 
     android:id="@+id/imageView_statusIndicatorLed" 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:gravity="center_vertical|end" 

     app:srcCompat="@mipmap/ic_status_panel_critical"/> 
    </merge> 

Answer 1

カスタムビューの実装を作成する代わりに、ConstraintLayoutを使用してこの問題を解決します。

ConstraintLayoutは、子どものアスペクト比を指定することができ、ImageViewが常に正方形であることを確認します。 ConstraintLayoutでは、兄弟ビューに基づいて高さまたは幅を指定することもできます（0dpのディメンションをtopとbottom（またはleftおよびright）という制約と組み合わせることによって）。

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="#ccf"> 

    <ImageView 
     android:id="@+id/image" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:src="@drawable/circle" 
     app:layout_constraintTop_toTopOf="@+id/text" 
     app:layout_constraintLeft_toRightOf="@+id/text" 
     app:layout_constraintBottom_toBottomOf="@+id/text" 
     app:layout_constraintDimensionRatio="1"/> 

    <TextView 
     android:id="@+id/text" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textSize="40sp" 
     android:text="hello world"/> 

</android.support.constraint.ConstraintLayout> 

（背景色は、それがどのその内容より大きくないことを示すために、ConstraintLayoutに追加）。