調整的ImageView的ViewBounds當父佈局內容溢出

Question

我已經包含與LinearLayout中的比重設定爲 「中心」，顯示在中心以下部件垂直的LinearLayout：

• ImageView的
• TextInputLayout
• TextInputLayout
• 按鈕

在小屏幕設備上時，這看起來很正常s，底部的按鈕即將熄滅。當我爲兩個TextInputLayouts顯示錯誤時，情況甚至更糟。

截圖標準屏幕：

截圖小屏幕：

問題：

我想要的是，在小屏幕上，ImageView應該調整自己以容納所有視圖，而在更大的屏幕上，ImageView應保持其最大可用大小，同時所有內容都顯示在中心（如截圖1所示）。

任何幫助將不勝感激！ :)

源XML：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_margin="@dimen/input_view_margin" 
    android:gravity="center" 
    android:orientation="vertical"> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:srcCompat="@drawable/ic_transaction_history_big" /> 

    <TextView 
     style="@style/ReportHeading" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="@string/txt_transaction_history" /> 

    <android.support.v4.widget.Space 
     android:layout_width="wrap_content" 
     android:layout_height="40dp" /> 

    <TextInputLayout 
     android:id="@+id/wrapperFromDate" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <TextInputEditText 
      android:id="@+id/edtFromDate" 
      style="@style/InputLayoutEditText" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:focusable="false" 
      android:hint="@string/hint_from_date" /> 
    </TextInputLayout> 

    <TextInputLayout 
     android:id="@+id/wrapperToDate" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="10dp"> 

     <TextInputEditText 
      android:id="@+id/edtToDate" 
      style="@style/InputLayoutEditText" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:focusable="false" 
      android:hint="@string/hint_to_date" /> 
    </TextInputLayout> 

    <Button 
     android:id="@+id/btnSubmit" 
     style="@style/PrimaryButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="35dp" 
     android:text="@string/action_submit" /> 
</LinearLayout> 

Answer 1

您可以滾動型添加到您的XML喜歡本作的用戶能夠看到您的按鈕

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_margin="@dimen/input_view_margin" 
    android:gravity="center" 
    android:orientation="vertical"> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:srcCompat="@drawable/ic_transaction_history_big" /> 

    <TextView 
     style="@style/ReportHeading" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="@string/txt_transaction_history" /> 

    <android.support.v4.widget.Space 
     android:layout_width="wrap_content" 
     android:layout_height="40dp" /> 

    <TextInputLayout 
     android:id="@+id/wrapperFromDate" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <TextInputEditText 
      android:id="@+id/edtFromDate" 
      style="@style/InputLayoutEditText" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:focusable="false" 
      android:hint="@string/hint_from_date" /> 
    </TextInputLayout> 

    <TextInputLayout 
     android:id="@+id/wrapperToDate" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="10dp"> 

     <TextInputEditText 
      android:id="@+id/edtToDate" 
      style="@style/InputLayoutEditText" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:focusable="false" 
      android:hint="@string/hint_to_date" /> 
    </TextInputLayout> 

    <Button 
     android:id="@+id/btnSubmit" 
     style="@style/PrimaryButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="35dp" 
     android:text="@string/action_submit" /> 
</LinearLayout> 
</ScrollView> 

Answer 2

給你的意見和重量設置寬度高度以匹配父級佈局的父級，爲子級視圖賦予權重。請記住將高度設置爲0dp並將寬度設置爲0dp，以便根據重量進行調整。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_margin="@dimen/input_view_margin" 
    android:gravity="center" 
    android:orientation="vertical"> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     app:srcCompat="@drawable/ic_transaction_history_big" /> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"> 

     <TextView 
      style="@style/ReportHeading" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/txt_transaction_history" /> 

     <android.support.v4.widget.Space 
      android:layout_width="wrap_content" 
      android:layout_height="40dp" /> 

     <TextInputLayout 
      android:id="@+id/wrapperFromDate" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

      <TextInputEditText 
       android:id="@+id/edtFromDate" 
       style="@style/InputLayoutEditText" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:focusable="false" 
       android:hint="@string/hint_from_date" /> 
     </TextInputLayout> 

     <TextInputLayout 
      android:id="@+id/wrapperToDate" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="10dp"> 

      <TextInputEditText 
       android:id="@+id/edtToDate" 
       style="@style/InputLayoutEditText" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:focusable="false" 
       android:hint="@string/hint_to_date" /> 
     </TextInputLayout> 

     <Button 
      android:id="@+id/btnSubmit" 
      style="@style/PrimaryButton" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="35dp" 
      android:text="@string/action_submit" /> 

    </LinearLayout> 

</LinearLayout> 

它會解決你的問題，讓我知道它是否工作。祝你好運！

Answer 3

對「flex views」使用ConstraintLayout，因此您可以爲元素設置靈活的約束。 PS：你可以在android studio中輕鬆測試你的實現，當你展開時，縮小預覽/設計中的屏幕尺寸。