Как я могу создать таблицу с границами в Android?


187

Я использую макет таблицы для отображения данных в виде таблицы, но мне нужна таблица с определенными пользователем столбцами и строками с границами. Предложения?

Ответы:


198

Мое решение этой проблемы состоит в том, чтобы поместить ресурс для рисования 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 . Это на испанском языке, но есть некоторые коды и изображения более сложных таблиц.


6
Я не могу просматривать контент
ashok reddy

1
Как бы установить фон представления программно? view.setBackground(?)
rasen58

1
Чтобы просмотреть это, просто удалите первый ряд с именем tabla_cabecera
ymerdrengene

1
Это заставит границы казаться толщиной не менее 2px, что не так хорошо, как граница шириной 1px.
AndroidDev

1
Да, как я уже объяснил, это единственное неудобство, но если ваша таблица занимает весь экран, вы можете установить нижнюю и левую границы, например, на 1 пиксель, и вы получите таблицу с границами 1 пиксель.
Дэвид Джесси

56

Я должен согласиться с Брэдом. Это был ужасный ответ. Документация Android гласит, что контейнеры TableLayout не отображают границы, поэтому отправка их на сайт Android не поможет им. Мне удалось найти «грязное» решение для droidnova, которое включает в себя установку цвета фона для 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>

1
Остерегайтесь этой проблемы преднамеренного оверлея, это может вызвать тряску / заикание в пользовательском интерфейсе, если таблица велика.
Вики Чиджвани

Как я могу установить layout_margin программно на TableRowобъекте?
Джеймс Вежба

он просто добавляет контур вокруг таблицы и ее строк, но не между столбцами
user924

41

Если вы просто пытаетесь провести линию между строками (например, чуть выше строки «Итого»), тогда есть простое решение - просто добавьте 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как я продемонстрировал.

Вывод будет выглядеть примерно так:

Таблица Граница продемонстрирована

Если вы пытаетесь добавить более сложные границы, тогда другие уже опубликованные ответы являются более подходящими.


почему, TextViewкогда вы можете использовать Viewвместо? Также не рекомендуется указывать точные пиксели. Вместо этого используйте dp / sp. Смотрите также эту ветку: stackoverflow.com/questions/2025282/… .
Стефан

Спасибо за отзыв ... Полагаю, нет смысла использовать TextView - это был просто пример. Во-вторых, если только я не неправильно понимаю dp / sp (довольно вероятно, поскольку я занимаюсь разработкой на Android около недели), я использую px, потому что мне нужна только линия с гарантированным 1 пикселем между строками, независимо от того, что разрешение или размер экрана я использую. Мне нравятся очень тонкие линии. Другие пользователи могут иметь разные вкусы и использовать другие устройства.
Майкл Брей

да но ты любишь очень тонкие линии! - это говорит, что хорошее простое решение получает мой голос
гуси

26

То, что я хотел, это стол, как это

изображение таблицы с вертикальными разделителями

Я добавил это в моем 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>

..........
.......
......

22

Вы также можете делать это программно, а не через 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);

14

Чтобы сделать 1dp коллапс-границу вокруг каждой ячейки без написания 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, известную как свойство 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>

Фантастика! Спасибо!
суперодд

Это хорошо, но есть проблема, когда вы хотите использовать темный режим. Потому что вы должны поместить в TableRow background = white, чтобы иметь белые границы. И теперь, когда ваш второй TextView будет длиннее (выше), чем первый TextView, у вас будет белый фон за первым TextView. Задание темного фона для первого TextView не поможет, так как не охватывает весь вид.
Виктор Калиновский

1
Это то, что я искал ... Спасибо. Кроме того, то, что сказал @WiktorKalinowski, справедливо и для темного режима, с которым мы должны поиграть вручную.
Привет десять

14

введите описание изображения здесь

Здесь я разработал список следующим изображением дизайна. Мое имя файла списка - 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>

filename: 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). Это немного проще.


требуется API lvl 16 :(
AndacAydin

setBackgroundDrawable()можно использовать вместо
Кори Ву

8

Ну, это может вдохновить вас. Эти шаги показывают, как динамически создавать граничную таблицу.

вот вид таблицы

<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nested_scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none"
    android:scrollingCache="true">
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/simpleTableLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="45dp"
        android:layout_marginRight="45dp"
        android:stretchColumns="*"
        >
    </TableLayout>
</android.support.v4.widget.NestedScrollView>

а здесь строка для использования "attrib_row.xml"

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/border"
    >
    <TextView
        android:id="@+id/attrib_name"
        android:textStyle="bold"
        android:height="30dp"
        android:background="@drawable/border"
        android:gravity="center"
        />
    <TextView
        android:id="@+id/attrib_value"
        android:gravity="center"
        android:height="30dp"
        android:textStyle="bold"
        android:background="@drawable/border"
        />
</TableRow>

и мы можем добавить этот XML-файл в Drawable, чтобы добавить границу к нашей таблице "border.xml"

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape= "rectangle">
    <solid android:color="@color/colorAccent"/>
    <stroke android:width="1dp" android:color="#000000"/>
</shape>

и, наконец, вот компактный код, написанный на Kotlin, но его легко конвертировать в Java, если вам нужно

well temps - это список массивов, содержащий данные: ArrayList<Double>()

fun CreateTable()
{
    val temps=controller?.getTemps()
    val rowHead = LayoutInflater.from(context).inflate(R.layout.attrib_row, null) as TableRow
    (rowHead.findViewById<View>(R.id.attrib_name) as TextView).text=("time")
    (rowHead.findViewById<View>(R.id.attrib_value) as TextView).text=("Value")
    table!!.addView(rowHead)
    for (i in 0 until temps!!.size) {

        val row = LayoutInflater.from(context).inflate(R.layout.attrib_row, null) as TableRow
        (row.findViewById<View>(R.id.attrib_name) as TextView).text=((i+1).toString())
        (row.findViewById<View>(R.id.attrib_value) as TextView).text=(temps[i].toString())
        table!!.addView(row)
    }
    table!!.requestLayout()
}

и вы можете использовать его в своем фрагменте, например, так

   override fun onViewCreated(view: View?, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        table = view?.findViewById<View>(R.id.simpleTableLayout) as TableLayout
        CreateTable()
    }

конечный результат выглядит так введите описание изображения здесь


5

Как насчет переопределения метода 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);
    }

3

Я использовал это решение: в 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>

Надеюсь, это поможет.


Это простой подход для добавления одной строки под строкой.
Mark.ewd

3

Вот отличный способ решить эту проблему:

Создайте прямоугольник, который можно нарисовать с закругленными углами, вот так:

<?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>

сохраните его в папке drawable с именем rounded_border.xml

Затем создайте относительный макет, который использует округленный_бордер как фон:

<?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
        android:id="@+id/rounded_table"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/table_with_border" />

Вы, вероятно, захотите добавить некоторый интервал по краям, поэтому просто оберните включение в LinearLayout и добавьте несколько отступов по краям.

Простой и легкий способ получить красивую границу вокруг стола.


2

Обводка удваивается на средних участках, я использовал этот список слоев:

<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>

2

Я думаю, что лучше всего создать 1-пиксельное изображение из девяти патчей и использовать атрибут showDividers в TableRow и TableLayout, поскольку они оба являются LinearLayouts


Можете ли вы привести простой пример?
Хоссейн Шахдуст

2

Граница между ячейками в ответах выше удваивается. Итак, вы можете попробовать это решение:

<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>


2

Другое решение - использовать линейные макеты и установить разделители между строками и ячейками, например:

<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>

Это грязное решение, но оно простое и работает с прозрачным фоном и границами.


2

Я знаю, что это старый вопрос ... в любом случае ... если вы хотите, чтобы ваш 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>

2

Если вам нужна таблица с рамкой, я предлагаю линейное расположение с весом вместо TableLayout.

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:gravity="center"
    android:padding="7dp"
    android:background="@drawable/border"
    android:textColor="@android:color/white"
    android:text="PRODUCT"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@android:color/black"
    android:paddingStart="1dp"
    android:paddingEnd="1dp"
    android:paddingBottom="1dp"
    android:baselineAligned="false">

    <LinearLayout
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:layout_width="0dp">

        <TextView
            android:id="@+id/chainprod"
            android:textSize="15sp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:text="@string/pdct"/>

    </LinearLayout>

    <LinearLayout
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:layout_width="0dp"
        android:layout_marginStart="1dp">

        <TextView
            android:id="@+id/chainthick"
            android:textSize="15sp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:text="@string/thcns"/>

    </LinearLayout>

    <LinearLayout
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:layout_width="0dp"
        android:layout_marginStart="1dp">

        <TextView
            android:id="@+id/chainsize"
            android:textSize="15sp"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:text="@string/size" />
    </LinearLayout>

    <LinearLayout
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:layout_width="0dp"
        android:layout_marginStart="1dp">

        <TextView
            android:textSize="15sp"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:text="@string/sqft" />
    </LinearLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@android:color/black"
    android:paddingStart="1dp"
    android:paddingEnd="1dp"
    android:paddingBottom="1dp"
    android:baselineAligned="false">

    <LinearLayout
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:layout_width="0dp">

        <TextView
            android:id="@+id/viewchainprod"
            android:textSize="15sp"
            android:textStyle="bold"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:text="@string/pdct" />

    </LinearLayout>

    <LinearLayout
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:layout_width="0dp"
        android:layout_marginStart="1dp">

        <TextView
            android:id="@+id/viewchainthick"
            android:textSize="15sp"
            android:textStyle="bold"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:text="@string/thcns"/>
    </LinearLayout>

    <LinearLayout
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:layout_width="0dp"
        android:layout_marginStart="1dp">

        <TextView
            android:id="@+id/viewchainsize"
            android:textSize="15sp"
            android:textStyle="bold"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:text="@string/size"/>
    </LinearLayout>
    <LinearLayout
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:layout_width="0dp"
        android:layout_marginStart="1dp">

        <TextView
            android:id="@+id/viewchainsqft"
            android:textSize="15sp"
            android:textStyle="bold"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:text="@string/sqft"/>

    </LinearLayout>
</LinearLayout>

введите описание изображения здесь

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.