Próbuję utworzyć widok siatki z dwoma kolumnami. Mam na myśli dwa zdjęcia obok siebie, tak jak to zdjęcie.
Ale moje zdjęcia mają odstępy między nimi, ponieważ nie są tego samego rozmiaru. Oto co otrzymuję.
jak widać pierwsze zdjęcie ukrywa legendę, która pokazuje nazwę kontaktu i numer telefonu. a pozostałe zdjęcia nie są poprawnie rozciągnięte.
Oto mój plik xml GridView . Jak widać, columnWidth
ustawiony jest na 200dp . Chciałbym, aby była automatyczna , więc rozmiar obrazu będzie się zmieniać automatycznie dla każdego rozmiaru ekranu.
<?xml version="1.0" encoding="utf-8"?>
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridViewContacts"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="2"
android:columnWidth="200dp"
android:stretchMode="columnWidth"
android:gravity="center" />
a tutaj jest plik xml elementu, który reprezentuje każdy element sam.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/imageViewContactIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<LinearLayout
android:id="@+id/linearlayoutContactName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:background="#99000000"
android:layout_alignBottom="@+id/imageViewContactIcon">
<TextView
android:id="@+id/textViewContactName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:textSize="15sp"
android:text="Lorem Ipsum" />
<TextView
android:id="@+id/textViewContactNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_marginLeft="5dp"
android:focusable="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:textSize="10sp"
android:text="123456789" />
</LinearLayout>
</RelativeLayout>
Chcę więc wyświetlać dwa obrazy w wierszu, a obrazy automatycznie się zmieniają, bez względu na rozmiar ekranu. Co robię źle na moim układzie?
Dzięki.
scaleType
właściwości centerCrop w ImageView. To, co muszę osiągnąć, to sposób na robienie zdjęć obok siebie i automatyczne zmienianie rozmiaru dla różnych rozmiarów ekranu.Odpowiedzi:
Oto stosunkowo prosta metoda, aby to zrobić. Wrzuć GridView do swojego układu, ustawiając tryb rozciągania w celu rozciągnięcia szerokości kolumn, ustaw odstępy na 0 (lub cokolwiek chcesz) i ustaw liczbę kolumn na 2:
res / layout / main.xml
Stwórz niestandardowy,
ImageView
który zachowa proporcje:src / com / example / graphicstest / SquareImageView.java
Utwórz układ elementu siatki za pomocą tego SquareImageView i ustaw skalęType na centerCrop:
res / layout / grid_item.xml
Teraz stwórz jakiś adapter dla
GridView
:src / com / example / graphicstest / MyAdapter.java
Ustaw ten adapter na swój
GridView
:I ciesz się wynikami:
źródło
ImageView
i dlaczego używać czegoś takiego<com.example.graphicstest.SquareImageView>
zamiast prostego<ImageView>
znacznika w pliku xml . Czy mógłbyś mi wyjaśnić więcej na temat tego współczynnika kształtu i tego, jak nie utworzenie tej klasy wpływa na przedmioty. czy istnieje sposób na zoptymalizowanie tego bez potrzeby korzystania z niestandardowejImageView
klasy? i tak dziękuję za pomoc.inne proste podejście z nowoczesnymi wbudowanymi funkcjami, takie jak PercentRelativeLayout, jest teraz dostępne dla nowych użytkowników, którzy napotkali ten problem. dzięki zespołowi Androida za wydanie tego elementu.
a dla lepszej wydajności możesz użyć pewnych rzeczy, takich jak program ładujący obraz Picasso, który pomaga wypełnić całą szerokość każdego rodzica obrazu. na przykład w adapterze powinieneś użyć tego:
teraz już nie potrzebujesz klasy CustomImageView.
PS Polecam używać ImageView zamiast Type Int w klasie Przedmiot.
Mam nadzieję, że to pomoże..
źródło