Я использую макет таблицы для отображения данных в виде таблицы, но мне нужна таблица с определенными пользователем столбцами и строками с границами. Предложения?
Как создать таблицу с границами в Android?
Ответ 1
Моим решением для этой задачи является размещение ресурса с возможностью xml в поле фона каждой ячейки. Таким образом, вы можете определить форму с границей, которую вы хотите для всех ячеек. Единственное неудобство состоит в том, что границы крайних ячеек имеют половину ширины других, но это не проблема, если ваша таблица заполняет весь экран.
Пример:
вытяжка/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>
Макет/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>
Изменить: пример
Edit2: Другой пример (с большим количеством элементов: углы окружности, градиенты...)
Я объяснил эту проблему более подробно в http://blog.intelligenia.com/2012/02/programacion-movil-en-android.html#more. Это на испанском языке, но есть несколько кодов и изображений более сложных таблиц.
Ответ 2
Я должен согласиться с Брэдом. Это был ужасный ответ. В документации на Android указано, что в контейнерах TableLayout не отображаются пограничные линии, поэтому отправка их на сайт Android не поможет им немного. Мне удалось найти "грязное" решение на дроиднова, которое включает настройку цвета фона для TableLayout, а затем установку другого цвета фона для TableRow и добавление layout_margin в строку. Я не люблю это решение, но оно работает для границ строк. Думаю, вы могли бы сделать то же самое с элементами, составляющими каждый элемент "ячейки", но я не проверял.
Пример, аналогичный примеру DroidNova:
<TableLayout android:background="#000000"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableRow android:background="#FFFFFF"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp">
...
</TableRow>
</TableLayout>
Ответ 3
IF, вы просто пытаетесь создать строку между строками (например, чуть выше строки "Всего" ), тогда есть простое решение - просто добавьте TableRow с цветом фона и определенный layout_height, такой как:
<TableRow android:layout_height="1px" android:background="#BDBDBD">
<TextView android:layout_span="2" android:layout_height="1px"
android:layout_width="fill_parent" android:text="">
</TextView>
</TableRow>
Установите android:layout_height="1px" или, как ни крути, вы хотите, чтобы граница была. Заполните столько столбцов TextView, сколько вам нужно, чтобы соответствовать остальной части таблицы, или просто используйте их вместе с android:layout_span, как я показал.
Результат будет выглядеть примерно так:
Если вы пытаетесь добавить более сложные границы, то другие ответы, уже опубликованные, более уместны.
Ответ 4
Вы также можете делать это прогаматически, а не через xml, но это немного более "хакерское". Но дайте человеку никаких вариантов, и вы не оставите ему выбора: p.. Вот код:
TableLayout table = new TableLayout(this);
TableRow tr = new TableRow(this);
tr.setBackgroundColor(Color.BLACK);
tr.setPadding(0, 0, 0, 2); //Border between rows
TableRow.LayoutParams llp = new TableRow.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
llp.setMargins(0, 0, 2, 0);//2px right-margin
//New Cell
LinearLayout cell = new LinearLayout(this);
cell.setBackgroundColor(Color.WHITE);
cell.setLayoutParams(llp);//2px border on the right for the cell
TextView tv = new TextView(this);
tv.setText("Some Text");
tv.setPadding(0, 0, 4, 3);
cell.addView(tv);
tr.addView(cell);
//add as many cells you want to a row, using the same approach
table.addView(tr);
Ответ 5
То, что я хотел, это таблица, подобная этой
Я добавил это в мой styles.xml:
<style name="Divider">
<item name="android:layout_width">1dip</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">@color/divider_color</item>
</style>
<style name="Divider_invisible">
<item name="android:layout_width">1dip</item>
<item name="android:layout_height">match_parent</item>
</style>
Затем в макете таблицы:
<TableLayout
android:id="@+id/table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:stretchColumns="*" >
<TableRow
android:id="@+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#92C94A" >
<TextView
android:id="@+id/textView11"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider_invisible" />
</LinearLayout>
<TextView
android:id="@+id/textView12"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="@string/main_wo_colon"
android:textColor="@color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider" />
</LinearLayout>
<TextView
android:id="@+id/textView13"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="@string/side_wo_colon"
android:textColor="@color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider" />
</LinearLayout>
<TextView
android:id="@+id/textView14"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="@string/total"
android:textColor="@color/white"
android:textSize="16sp" />
</TableRow>
<!-- display this button in 3rd column via layout_column(zero based) -->
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#6F9C33" >
<TextView
android:id="@+id/textView21"
android:padding="5dp"
android:text="@string/servings"
android:textColor="@color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider" />
</LinearLayout>
..........
.......
......
Ответ 6
Чтобы сделать 1dp collapse-border вокруг каждой ячейки без написания java-кода и без создания другого макета xml с тегом <shape...>, вы можете попробовать это решение:
В <TableLayout...> добавить
android:background="#CCC" и android:paddingTop="1dp" и android:stretchColumns="0"
В <TableRow...> добавить
android:background="#CCC" и android:paddingBottom="1dp" и android:paddingRight="1dp"
В каждой ячейке/дочернем элементе в TableRow, т.е. <TextView...> добавить
android:background="#FFF" и android:layout_marginLeft="1dp"
Очень важно следить за прокладками и полями, как описано. Это решение будет рисовать границу 1dp aka свойство border-collapse в (X) HTML/CSS.
Цвет фона в <TableLayout...> и <TableRow...> означает цвет и фон границы линии в <TextView...> заполняет ячейку таблицы. Вы можете поместить некоторые дополнения в ячейки, если это необходимо.
Пример:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#CCC"
android:paddingTop="1dp"
android:stretchColumns="0"
android:id="@+id/tlTable01">
<TableRow
android:background="#CCC"
android:paddingBottom="1dp"
android:paddingRight="1dp">
<TextView
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:text="Item1"/>
<TextView
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:gravity="right"
android:text="123456"/>
</TableRow>
<TableRow
android:background="#CCC"
android:paddingBottom="1dp"
android:paddingRight="1dp">
<TextView
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:text="Item2"/>
<TextView
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:gravity="right"
android:text="456789"/>
</TableRow>
</TableLayout>
Ответ 7
Здесь я разработал список по следующему образцу. Мое имя_файла имени Propertylistitem.xml и cellborder.xml используется для рисования выделенной формы для вывода сотовой ячейки, отображаются на этом изображении. необходимый код, который я добавил здесь.
FileName: propertylistitem.xml
<TableLayout... >
<TableRow... >
<TextView ...
android:background="@drawable/cellborder"
android:text="Amount"/>
</TableRow>
<TableRow... >
<TextView...
android:background="@drawable/cellborder"
android:text="5000"/>
</TableRow>
</TableLayout>
Имя файла: cellborder.xml Здесь я просто хочу только границу в моем дизайне, поэтому я помещаю комментарий в сплошной тег цвета.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<!-- <solid android:color="#dc6888"/> -->
<stroke android:width="0.1dp" android:color="#ffffff"
/>
<padding android:left="0dp" android:top="0dp"
android:right="0dp" android:bottom="0dp" />
</shape>
Ответ 8
После длительного поиска и часов попыток это самый простой код, который я мог бы сделать:
ShapeDrawable border = new ShapeDrawable(new RectShape());
border.getPaint().setStyle(Style.STROKE);
border.getPaint().setColor(Color.BLACK);
tv.setBackground(border);
content.addView(tv);
tv - это TextView с простым текстом, а содержимое - мой контейнер (LinearLayout в этом случае). Это немного легче.
Ответ 9
Как насчет переопределения метода onDraw, а затем рисования строк на холсте?
for(int i = 0; i < rows; i++)
{
canvas.drawLine(0, i * m_cellHeight, m_totalWidth, i * m_cellHeight, paint);
}
for(int i = 0; i < m_columns; i++){
canvas.drawLine(i* m_cellWidth, 0, i * m_cellWidth, m_cellHeight * rows, paint);
}
Ответ 10
Я использовал это решение: в TableRow я создал для каждой ячейки LinearLayout вертикальную линию и фактическую ячейку в ней, и после каждого TableRow я добавил горизонтальную линию.
Посмотрите на код ниже:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="1">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:orientation="horizontal"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_height="match_parent"
android:layout_weight="1">
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#BDCAD2"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>
</TableRow>
<View
android:layout_height="1dip"
android:background="#BDCAD2" />
<!-- More TableRows -->
</TableLayout>
Надеюсь, это поможет.
Ответ 11
Вот отличный способ решить эту проблему:
Создайте прямоугольник с округлыми углами, подобный этому:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="2dp"
android:color="#888888"/>
<corners android:bottomRightRadius="6dp"
android:bottomLeftRadius="6dp"
android:topLeftRadius="6dp"
android:topRightRadius="6dp"/>
</shape>
сохраните его в выпадающей папке с именем rounded_border.xml
Затем создайте относительный макет, который использует rounded_border в качестве фона следующим образом:
<?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"
android:background="@drawable/rounded_border">
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
сохраните это в своей папке макета и назовите его table_with_border.xml
тогда всякий раз, когда вам нужна такая таблица, потяните ее в представление, используя синтаксис include, подобный этому:
<include
android:id="@+id/rounded_table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/table_with_border" />
Вы, вероятно, захотите добавить несколько промежутков вокруг краев, так что просто оберните их включением в LinearLayout и добавьте немного дополнений по краям.
Простой и простой способ получить красивую рамку вокруг таблицы.
Ответ 12
Инцидент удваивается на участках middel, я использовал этот список слоев:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="0dp" android:left="0dp" android:bottom="0dp" android:right="0dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="@color/grey" />
</shape>
</item>
<item android:top="1dp" android:left="1dp" android:bottom="1dp" android:right="1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="@color/lightgrey" />
</shape>
</item>
</layer-list>
Ответ 13
Я думаю, что лучше всего создать 1px изображение с девятью патчами и использовать атрибут showDividers в TableRow и TableLayout, так как они оба LinearLayouts
Ответ 14
В вышеприведенных ответах граница между ячейками удваивается. Итак, вы можете попробовать это решение:
<item
android:left="-1dp"
android:top="-1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#fff"/>
<stroke
android:width="1dp"
android:color="#ccc"/>
</shape>
</item>
Ответ 15
Другое решение - использовать линейные макеты и устанавливать разделители между строками и ячейками, как это:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#8000"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#8000"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#8000"/>
</LinearLayout>
Это грязное решение, но оно простое и также работает с прозрачным фоном и границами.
Ответ 16
Я знаю, что это старый вопрос... в любом случае... если вы хотите, чтобы ваш xml был приятным и простым, вы можете расширить TableLayout и переопределить dispatchDraw для создания пользовательского чертежа.
Вот быстрая и грязная реализация, которая рисует прямоугольник вокруг представления таблицы, а также горизонтальные и вертикальные полосы:
public class TableLayoutEx extends TableLayout {
private Paint linePaint = null;
private Rect tableLayoutRect;
public TableLayoutEx(Context context) {
super(context);
}
public TableLayoutEx(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
float strokeWidth = this.getContext().getResources().getDisplayMetrics().scaledDensity * 1;
linePaint = new Paint(0);
linePaint.setColor(0xff555555);
linePaint.setStrokeWidth(strokeWidth);
linePaint.setStyle(Paint.Style.STROKE);
Rect rect = new Rect();
int paddingTop= getPaddingTop();
this.getDrawingRect(rect);
tableLayoutRect = new Rect(rect.left, rect.top + paddingTop, rect.right, rect.bottom);
}
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
Rect rect = new Rect();
if (linePaint != null) {
canvas.drawRect(tableLayoutRect, linePaint);
float y = tableLayoutRect.top;
for (int i = 0; i < getChildCount() - 1; i++) {
if (getChildAt(i) instanceof TableRow) {
TableRow tableRow = (TableRow) getChildAt(i);
tableRow.getDrawingRect(rect);
y += rect.height();
canvas.drawLine(tableLayoutRect.left, y, tableLayoutRect.right, y, linePaint);
float x = tableLayoutRect.left;
for (int j = 0; j < tableRow.getChildCount() - 1; j++) {
View view = tableRow.getChildAt(j);
if (view != null) {
view.getDrawingRect(rect);
x += rect.width();
canvas.drawLine(x, tableLayoutRect.top, x, tableLayoutRect.bottom, linePaint);
}
}
}
}
}
}
}
xml с текстом обтекания третьего столбца:
<com.YOURPACKAGE.TableLayoutEx
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="2"
android:paddingTop="6dp">
<TableRow>
<TextView
android:text="@string/my_text_0_0"
android:padding="@dimen/my_padding"/>
<TextView
android:text="@string/my_text_0_1"
android:padding="@dimen/my_padding"/>
<TextView
android:text="@string/my_text_0_2_to_wrap"
android:padding="@dimen/my_padding"/>
</TableRow>
<!--more table rows here-->
</com.YOURPACKAGE.TableLayoutEx>