Używam układu tabeli do wyświetlania danych jako tabeli, ale chcę tabelę z kolumnami zdefiniowanymi przez użytkownika i wierszami z ramkami. Propozycje?
źródło
Używam układu tabeli do wyświetlania danych jako tabeli, ale chcę tabelę z kolumnami zdefiniowanymi przez użytkownika i wierszami z ramkami. Propozycje?
Moim rozwiązaniem tego problemu jest umieszczenie zasobu xml do rysowania w polu tła każdej komórki. W ten sposób możesz zdefiniować kształt z ramką, którą chcesz dla wszystkich komórek. Jedyną niedogodnością jest to, że granice skrajnych komórek mają połowę szerokości innych, ale nie ma problemu, jeśli Twój stół wypełnia cały ekran.
Przykład:
drawable / cell_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle" >
<solid android:color="#000"/>
<stroke android:width="1dp" android:color="#ff9"/>
</shape>
layout / my_table.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TableRow
android:id="@+id/tabla_cabecera"
android:layout_width="match_parent"
android:layout_height="match_parent"></TableRow>
<TableLayout
android:id="@+id/tabla_cuerpo"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:id="@+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
</TableRow>
<TableRow
android:id="@+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
</TableRow>
</TableLayout>
</LinearLayout>
Edycja: przykład
Edycja2: Kolejny przykład (z większą ilością elementów: narożniki okręgu, gradienty ...)
Wyjaśniłem ten problem dokładniej w http://blog.intelligenia.com/2012/02/programacion-movil-en-android.html#more . Jest w języku hiszpańskim, ale istnieją kody i obrazy bardziej skomplikowanych tabel.
view.setBackground(?)
Muszę się zgodzić z Bradem. To była okropna odpowiedź. Dokumentacja Androida stwierdza, że kontenery TableLayout nie wyświetlają linii obramowania, więc wysłanie ich do witryny Androida trochę im nie pomoże. Udało mi się znaleźć „brudne” rozwiązanie na droidnova, które polega na ustawieniu koloru tła dla TableLayout, następnie ustawieniu innego koloru tła dla TableRow i dodaniu layout_margin do wiersza. Nie przepadam za tym rozwiązaniem, ale działa na granicy wierszy. Myślę, że możesz zrobić to samo z elementami składającymi się na każdy element „komórki”, ale tego nie zweryfikowałem.
Przykład podobny do tego na DroidNova:
źródło
TableRow
obiekcie?JEŚLI po prostu próbujesz umieścić linię między wierszami (na przykład tuż nad wierszem „Razem”), istnieje proste rozwiązanie - wystarczy dodać TableRow z kolorem tła i określoną wysokością układu, taką jak ta:
Ustaw
android:layout_height="1px"
lub jak gruba ma być krawędź. Wypełnij tyle pustych kolumn TextView, ile potrzebujesz, aby dopasować się do reszty tabeli lub po prostu użyj jednej z,android:layout_span
jak wykazałem.Dane wyjściowe będą wyglądały mniej więcej tak:
Jeśli próbujesz dodać bardziej skomplikowane ramki, inne już opublikowane odpowiedzi są bardziej odpowiednie.
źródło
TextView
kiedy możeszView
zamiast tego użyć ? Ponadto nie jest dobrą praktyką określanie dokładnych pikseli. Zamiast tego użyj dp / sp. Zobacz także ten wątek: stackoverflow.com/questions/2025282/… .To, czego chciałem, to taki stół
Dodałem to w moim styles.xml :
Następnie w moim układzie tabeli :
źródło
Możesz to zrobić progamatycznie, a nie poprzez xml, ale jest to trochę bardziej „hackish”. Ale nie daj człowiekowi żadnych opcji, a ty nie pozostawiaj mu wyboru: p .. Oto kod:
źródło
Aby ustawić zwinięcie 1dp wokół każdej komórki bez pisania kodu Java i bez tworzenia kolejnego układu xml z
<shape...>
tagiem, możesz wypróbować to rozwiązanie:W
<TableLayout...>
dodatkuandroid:background="#CCC"
iandroid:paddingTop="1dp"
iandroid:stretchColumns="0"
W
<TableRow...>
dodatkuandroid:background="#CCC"
iandroid:paddingBottom="1dp"
iandroid:paddingRight="1dp"
W każdej komórce / potomku w TableRow, tj.
<TextView...>
Dodajandroid:background="#FFF"
iandroid:layout_marginLeft="1dp"
Bardzo ważne jest przestrzeganie wypełnień i marginesów zgodnie z opisem. To rozwiązanie narysuje 1dp granicę aka border-collapse właściwość w (X) HTML / CSS.
Kolor tła w
<TableLayout...>
i<TableRow...>
reprezentuje kolor linii obramowania i tło w<TextView...>
wypełnia komórkę tabeli. W razie potrzeby możesz wstawić dopełnianie do komórek.Przykład jest tutaj:
źródło
Tutaj zaprojektowałem listę według następującego obrazu projektowego. Moja nazwa pliku listitem to Propertylistitem.xml i cellborder.xml jest używany do rysowania kształtu na wyjściu komórki, są pokazane na tym obrazie. niezbędny kod dodałem tutaj.
Nazwa pliku: propertylistitem.xml
nazwa_pliku: cellborder.xml Tutaj chcę tylko obramowanie w moim projekcie, więc dodam komentarz do jednolitego znacznika koloru.
źródło
Po długich poszukiwaniach i godzinach prób jest to najprostszy kod, jaki mogłem zrobić:
tv to TextView z prostym tekstem, a zawartość to mój kontener (w tym przypadku LinearLayout). To trochę łatwiejsze.
źródło
setBackgroundDrawable()
można zamiast tego użyć.To może zainspirować. Te kroki pokazują, jak dynamicznie tworzyć tabelę z obrzeżami
oto widok tabeli
a tutaj wiersz do użycia „attrib_row.xml”
i możemy dodać ten plik xml do rysowalnej, aby dodać obramowanie do naszej tabeli „border.xml”
wreszcie jest kompaktowy kod napisany w Kotlinie, ale w razie potrzeby łatwo go przekonwertować na java
no temps to lista tablic zawierająca dane:
ArrayList<Double>()
i możesz użyć go w swoim fragmencie na przykład w ten sposób
końcowy wynik wygląda tak
źródło
Co powiesz na przesłanianie metody onDraw, a następnie malowanie linii na płótnie?
źródło
Użyłem tego rozwiązania: w
TableRow
utworzyłem dla każdej komórkiLinearLayout
z linią pionową i rzeczywistą komórką, a po każdymTableRow
dodałem linię poziomą.Spójrz na poniższy kod:
Mam nadzieję, że to pomoże.
źródło
Oto świetny sposób na rozwiązanie tego problemu:
Utwórz prostokąt do rysowania z zaokrąglonymi narożnikami:
zapisz go w folderze do rysowania o nazwie rounded_border.xml
Następnie utwórz układ względny, który wykorzystuje zaokrągloną granicę jako tło:
zapisz to w folderze układu i nazwij go table_with_border.xml
wtedy, gdy potrzebujesz takiej tabeli, przeciągnij ją do widoku, używając składni dołączania w następujący sposób:
Prawdopodobnie będziesz chciał dodać pewne odstępy wokół krawędzi - więc po prostu zawiń dołączenie w LinearLayout i dodaj trochę wypełnienia wokół krawędzi.
Prosty i łatwy sposób na uzyskanie ładnej granicy wokół stołu.
źródło
Obrys podwaja się w środkowych sekcjach, użyłem tej listy warstw do rysowania:
źródło
Myślę, że najlepiej jest utworzyć obraz 9-krotny 1-pikselowy i użyć atrybutu showDividers w TableRow i TableLayout, ponieważ oba są liniowymi
źródło
Granica między komórkami jest podwojona w powyższych odpowiedziach. Możesz wypróbować to rozwiązanie:
źródło
Innym rozwiązaniem jest użycie układów liniowych i ustawienie dzielników między wierszami i komórkami w następujący sposób:
To brudne rozwiązanie, ale jest proste i działa również z przezroczystym tłem i ramkami.
źródło
Wiem, że to stare pytanie ... w każdym razie ... jeśli chcesz, aby twój xml był ładny i prosty, możesz przedłużyć TableLayout i zastąpić dispatchDraw, aby wykonać niestandardowy rysunek.
Oto szybka i brudna implementacja, która rysuje prostokąt wokół widoku tabeli oraz pasków poziomych i pionowych:
przykład xml z tekstem z zawijaniem trzeciej kolumny:
źródło
Jeśli potrzebujesz tabeli z ramką, sugeruję układ liniowy o wadze zamiast TableLayout.
źródło