2012-02-20 11 views
19

Tôi đã triển khai RatingBar tùy chỉnh trong một ứng dụng trên các mục ListView của mình. Tuỳ chỉnh phong cách ratingbar_red.xml:Phân loại hình ảnh tùy chỉnh của AndroidBiểu đồ tạo tác

<?xml version="1.0" encoding="UTF-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:id="@android:id/background" android:drawable="@drawable/star_off" /> 
    <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/star_on" /> 
    <item android:id="@android:id/progress" android:drawable="@drawable/star_on" /> 
</layer-list> 

Dưới đây là một phần của ListItem bố trí:

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:paddingLeft="15dp" > 

    <RatingBar 
     android:id="@+id/li_company_rating" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="15dp" 
     android:layout_marginBottom="1dp" 
     android:isIndicator="true" 
     android:numStars="5" 
     android:progressDrawable="@drawable/ratingbar_red" 
     android:stepSize="1" /> 

    <Button 
     android:id="@+id/li_company_callbtn" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="0dp" 
     android:layout_marginLeft="40dp" 
     android:contentDescription="@string/ContentDescription" 
     android:drawableLeft="@drawable/phone_icon" 
     android:drawablePadding="5dp" 
     android:onClick="callbtn_Click" 
     android:text="@string/CallButton" 
     android:focusable="false" 
     android:focusableInTouchMode="false" > 
    </Button> 

</LinearLayout> 

Nó hoạt động, nhưng khi đánh giá được thiết lập, tôi nhận được một số đồ tạo tác hình ảnh kỳ lạ; 2 đường dọc bên dưới những ngôi sao màu hồng xuất hiện trên quan điểm của tôi:

enter image description here

Dưới đây là star_on.png

link

star_off.png trông ổn, và nếu giá == 0, các dòng không xuất hiện.

Tôi là người mới bắt đầu sử dụng Android và không thể hiểu vấn đề là gì.

+0

Xin lỗi vì các liên kết, nhưng tôi không thể thêm hình ảnh nào được nêu ra – Sash0k

Trả lời

16

Cố gắng đưa ra chiều cao đến RatingBar trong cách bố trí xml như thế này:

android:layout_height="30dp" 

30dp hoặc bất cứ điều gì phù hợp với bạn ..

Check out why is this happening ??

+0

không chắc chắn lý do tại sao điều đó sẽ hoạt động nhưng đã thực hiện! – StackOverflowed

+1

nó không hoạt động cho mọi màn hình di động .. do đó chiều cao cố định không phải là giải pháp thích hợp! –

+0

Chiều cao cố định sẽ không khắc phục được tất cả màn hình như đã đề cập. Giải pháp phù hợp và tốt hơn là một số người đã đề xuất thêm pixel trong suốt ở cuối hình ảnh trong trình chỉnh sửa ảnh. Android dường như chỉ lấy pixel cuối cùng và mở rộng nó. Điều này dường như được cố định trên các cấp API mới hơn. – velval

3

Tôi có vấn đề này để, trông giống như cạnh đáy của hình ảnh ngôi sao tùy chỉnh đang được kéo dài. Bạn không phải đặt layout_height của thẻ thanh xếp hạng. Bạn có thể đặt chiều cao tối thiểu/tối đa trên thanh xếp hạng (giống với chiều cao hình ảnh).

Ví dụ từ kiểu xml của tôi.

<style name="GoldRatingBar" parent="@android:style/Widget.RatingBar"> 
    <item name="android:minHeight">@dimen/rating_bar_height</item> 
    <item name="android:maxHeight">@dimen/rating_bar_height</item> 
</style> 

Dimens.xml

<dimen name="rating_bar_height">11dp</dimen> 

Giá trị phải phù hợp của đối tượng vẽ được sử dụng. Hình ảnh cao 11 pixel, vì vậy rating_bar_height được đặt thành 11dp.

2

Một giải pháp đơn giản khác là để lại một hàng các pixel trống trong hình ảnh ngôi sao bằng cách sử dụng trình chỉnh sửa hình ảnh như photoshop. Sau đó, hàng lặp lại hoặc kéo dài của các điểm ảnh trong thanh đánh giá sẽ trống. Aproach này đã giải quyết được vấn đề của tôi.

+0

Hi @ user1928244, tôi có một vấn đề khác trong hình ảnh RatingBar cho nền và tiến trình vì chúng có kích thước khác nhau. Họ sẽ không thẳng hàng. Tôi đã không thể sử dụng câu trả lời của bạn nhưng bạn đã cho tôi một ý tưởng để sử dụng Photoshop. Và vì vậy tôi vừa thêm kích thước canvas vào hình ảnh nhỏ hơn. Cảm ơn. :) – KarenAnne

2

Tôi đã giải quyết vấn đề này theo cách khác. Tôi lấy png của ngôi sao tùy chỉnh của tôi, và trong trình chỉnh sửa hình ảnh thêm dòng trong suốt vào dưới cùng của hình ảnh. Vấn đề với các đường thẳng đứng biến mất trên tất cả các màn hình!

2

Vấn đề thiết kế biểu tượng của nó. Vấn đề ở đây là phần đệm xung quanh biểu tượng. Nếu bạn đang tạo một biểu tượng ngôi sao tùy chỉnh, hãy đảm bảo rằng bạn để lại một khoảng trống giữa các ngôi sao và ranh giới trang mà nó nằm.

Nếu bạn không chắc chắn cách thực hiện, hãy thử Android Asset Studio. Bạn có thể thấy một cái gì đó như "Padding quanh quang Icon" không giữ nó để 0 dip.

+0

Câu trả lời đúng. –

0

Tôi đã khắc phục sự cố tương tự bằng cách giảm "layout_height" vì chiều cao của hình ảnh của tôi nhỏ hơn chiều cao mà tôi có trong layout_height.

0

Vấn đề tương tự. Trong trường hợp của tôi Đặt hình ảnh dấu sao tùy chỉnh trong/Thư mục có thể vẽ và đặt "android:layout_height="30dip"

hoạt động tốt !!

1

Chỉ cần 2 pixel đệm trong ngôi sao hình ảnh trong photoshop. đệm trong xml không hoạt động, chỉ cần đệm hình ảnh ngôi sao trong photoshop. nó hoạt động rất tốt.

2

Mọi cơ thể đều gợi ý điều gì đó nhưng không có cơ thể nào đang cố gắng giải thích tại sao điều này xảy ra. Tôi sẽ cố giải thích nó ngay bây giờ. Tất nhiên điều này sẽ chỉ xảy ra khi bạn đang cố gắng tùy chỉnh hình ảnh thanh xếp hạng.

Hãy tưởng tượng rằng chúng tôi có hình ảnh tùy chỉnh với kích thước 72x72 pixel và đây là tài nguyên của chúng tôi cho XXXHDPI - (là 4x).

  1. Cùng một hình ảnh cũng cần có bản sao bên trong XXHDPI, XHDPI, HDPI, MDPI và LDPI. Tôi sẽ bỏ lỡ một thư mục tài nguyên mới nhất hiện nay.
  2. Bên trong thư mục khác nhau hình ảnh này cần phải được như sau:
    • cho XXHDPI hình ảnh kích thước bản sao cần phải được 54x54 (đây là 3x)
    • cho xhdpi hình ảnh kích thước bản sao cần phải được 36x36 (đây là 2x)
    • cho hdpi hình ảnh kích thước bản sao cần phải được 27x27 (đây là 1.5x)
    • cho mdpi hình ảnh kích thước bản sao cần phải được 18x18 (điều này được 1x)
  3. vì vậy, bây giờ trong tình huống này nếu thanh Đánh giá của bạn có chiều cao lớn hơn thì 18 dp ví dụ 30 dp, bạn sẽ thấy các đồ tạo ảnh kém bên dưới mọi hình ảnh ngôi sao, BECAUSE rõ ràng RatingBar đang cố gắng lấp đầy phần còn lại của nó với một cái gì đó (ảnh của bạn là 18 dp nhưng chiều cao của thanh là 30dp), do đó, phần còn lại 12dp sẽ được lấp đầy với các đồ tạo tác này.

Đó là lý do tại sao nếu bạn đặt chiều cao của thanh xếp hạng là kích thước cố định, tất cả mọi thứ CÓ THỂ OK nhưng cũng KHÔNG THỂ OK. Tất cả điều này phụ thuộc vào kích thước hình ảnh tùy chỉnh của bạn.

Tôi nghĩ đó có một giải pháp mà sẽ làm việc trong tất cả các tình huống có thể và điều này là:

  1. Tạo nội dung hình ảnh cho tất cả các thiết bị màn hình mà ứng dụng của bạn sẽ hỗ trợ XXXHDPI, XXHDPI hoặc những gì đã bao giờ bạn muốn.
  2. Đảm bảo rằng nếu hình ảnh (MDPI 1x) của bạn có chiều cao ví dụ 20 pixel, chiều cao RatingBar của bạn sẽ không lớn hơn 20 dp và mọi thứ sẽ ổn.

LƯU Ý: Trong toàn bộ cuộc trò chuyện này chúng ta nói về dp (mật độ điểm ảnh) không trong px bởi vì nếu chúng tôi cung cấp tất cả những nguồn hình ảnh trong mỗi thư mục res đơn chúng tôi sẽ có cơ hội để làm việc với dp không phải với px. Tôi hy vọng câu cuối cùng là rõ ràng và có ý nghĩa.

CHỈNH SỬA: Cách khác có thể là để một số đệm nhỏ (khoảng trống), có thể 1px hoặc 2px ở dưới cùng của hình ảnh tùy chỉnh của bạn.Trong trường hợp đó, chế độ xem RatingBar sẽ KHÔNG hiển thị các pixel tạo tác đó, bởi vì chúng sẽ được lấy từ phần đệm của hình ảnh tùy chỉnh của bạn, mà thực sự chỉ là các pixel rỗng (trong suốt). Cá nhân tôi nghĩ rằng, đây không phải là cách tốt nhất, vì hình ảnh đệm sẽ tạo ra một số không gian (padding) giữa RatingBar và phần còn lại Xem bên trong bố trí. Trong trường hợp đó, bạn sẽ không có toàn quyền kiểm soát không gian Chế độ xem, bởi vì một số phần nhỏ đã được mã hóa cứng bên trong hình ảnh tùy chỉnh (các phần đệm 2 px).