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和left和）約束相結合）。

<?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表明，它不是任何大於它的內容）。