Bố cục Android bị hỏng với nền 9-vá

Question

Tôi gặp sự cố này khi cập nhật nền của mình để sử dụng hình ảnh 9 bản vá. Cách bố trí là tốt trên màn hình khác nhau bằng cách sử dụng các kích cỡ khác nhau của cùng một hình ảnh, nhưng khi tôi thay đổi hình ảnh thành bản vá 9, nó sẽ phá vỡ toàn bộ bố cục một cách bí ẩn.

Bố cục trước trông như sau:

Original layout http://onik.org/android/layoutOk.png.

Khi thay đổi thành 9 bản vá:

9-Patch image http://onik.org/android/layoutError.png.

Tệp XML vẫn giữ nguyên, chỉ các tệp PNG đã bị thay đổi.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="@drawable/bg"> 

    <TextView 
     android:text="@string/title" 
     android:id="@+id/login_title" 
     android:layout_width="fill_parent" 
     android:layout_height="40px" 
     android:textSize="30px"> 
    </TextView> 

    <View 
     android:id="@+id/login_underline" 
     android:layout_width="wrap_content" 
     android:layout_height="2px" 
     android:background="#aaaaaa"> 
    </View> 

    <TableLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:stretchColumns="1" 
     android:gravity="center" 
     android:paddingLeft="10px" 
     android:paddingRight="10px"> 

     <TableRow> 
      <TextView 
       android:id="@+id/login_usernameLabel" 
       android:text="@string/login_usernameLabel" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:paddingRight="5px"> 
      </TextView> 

      <EditText 
       android:text="" 
       android:id="@+id/login_username" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:inputType="textEmailAddress" 
       android:lines="1" 
       android:nextFocusDown="@+id/login_password"> 
      </EditText> 

     </TableRow> 

     <TableRow> 

      <TextView 
       android:id="@+id/login_passwordLabel" 
       android:text="@string/login_passwordLabel" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"> 
      </TextView> 

      <EditText 
       android:text="" 
       android:id="@+id/login_password" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:nextFocusDown="@+id/login_login" 
       android:inputType="textPassword"> 
      </EditText> 

     </TableRow> 

     <TableRow android:gravity="right"> 

      <Button 
       android:text="@string/login_login" 
       android:id="@+id/login_login" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content"> 
      </Button> 


    </TableRow> 

     <TableRow> 

      <CheckBox 
       android:id="@+id/login_remember" 
       android:text="@string/login_remember" 
       android:layout_span="2"> 
      </CheckBox> 

     </TableRow> 

</TableLayout> 


</LinearLayout> 

Bất kỳ ý tưởng nào? Hoặc các giải pháp khác để có được nền không tập trung, không tập trung?

Answer 1

nó có nghĩa là chỉ cần thêm thuộc tính

android:padding="0dip" 

vào thẻ bố trí của bạn

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="@drawable/bg" 
    android:padding="0dip"> 

Cập nhật:

Android Docs có giải thích chính xác:

"Bạn cũng có thể xác định một phần có thể vẽ tùy chọn của hình ảnh (có hiệu quả, các đường đệm) bằng cách vẽ một đường ở bên phải và dòng dưới cùng. Nếu một đối tượng View đặt NinePatch làm nền của nó và sau đó chỉ định văn bản của View, nó sẽ tự kéo dài để tất cả văn bản vừa với bên trong khu vực được chỉ định bởi các dòng bên phải và dòng dưới (nếu có). Nếu các dòng đệm không được bao gồm, Android sử dụng các dòng bên trái và trên cùng để xác định khu vực có thể vẽ này. "

Để bỏ qua hành vi mặc định này, chúng ta cần phải thiết lập thuộc tính đệm một cách rõ ràng trong cách bố trí XML

Answer 2

Giải quyết vấn đề, vùng đệm của tôi trên bản vá 9 không phù hợp. Khi tôi vẽ khu vực đệm như là nghịch đảo của khu vực căng ra, hình ảnh bắt đầu hoạt động. Tôi chỉ nghĩ này có thể đã được tự động nếu không có vùng đệm đã có mặt :)

Answer 3

Sử dụng 9-patch thiết lập các dòng nội dung (bên phải và dưới)!