Problema com alguma interface de usuário avançada
-
25-09-2019 - |
Pergunta
Estou tentando criar mesas com cantos arredondados. Eu tenho um pouco de XML para fazer isso, mas tenho um problema. A tabela está envolvida na largura de seu texto interno. Quero que a coisa toda preencha o pai (embora eu queira uma borda ao redor, então haja alguma almofada, o que eu tenho). Não consigo entender por que não é quando tenho tudo para preencher_parent. Alguém poderia apontar o que está errado?
Aqui está uma captura de tela do que quero dizer e uma cópia do meu XML:
shape_outer.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#0000FF"/>
<corners android:radius="5px"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
shape_inner.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<corners android:radius="5px"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
Meu layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="47px"
style="?android:attr/windowTitleBackgroundStyle"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="My title"
style="?android:attr/windowTitleStyle"
android:paddingLeft="5px" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="10px"
>
<!-- used so we can separate two tables -->
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
<!-- first table -->
<TableRow android:paddingBottom="10px">
<!-- outer border -->
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
android:padding="2px"
android:background="@drawable/shape_outer"
>
<TableRow>
<!-- inner whitespace -->
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
android:layout_weight="1"
android:background="@drawable/shape_inner"
android:padding="10px"
>
<TableRow>
<!-- first row: one -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
>
<TextView
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="One:"
android:padding="6dip"
android:textColor="#000000" />
<TextView
android:id="@+id/one"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="sadflkjaasasdfadsdsf;lkjdsal;asdj"
android:padding="6dip"
android:textColor="#000000"
android:maxLines="1" />
</LinearLayout>
</TableRow>
<!-- separator -->
<View
android:layout_height="1dip"
android:background="#FF909090" />
<TableRow>
<!-- second row: two -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
>
<TextView
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="Two:"
android:padding="6dip"
android:textColor="#000000" />
<TextView
android:id="@+id/two"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="asdfasdasdfasdfasfasdfasgeargfsgsfd"
android:padding="6dip"
android:textColor="#000000"
android:maxLines="1" />
</LinearLayout>
</TableRow>
</TableLayout>
</TableRow>
</TableLayout>
</TableRow>
<!-- second table -->
<TableRow>
<!-- outer border -->
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
android:padding="2px"
android:background="@drawable/shape_outer"
>
<TableRow>
<!-- inner white space -->
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:stretchColumns="1"
android:background="@drawable/shape_inner"
android:padding="10px"
>
<!-- third row: Three -->
<TableRow>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
>
<TextView
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="Three:"
android:padding="6dip"
android:textColor="#000000" />
<TextView
android:id="@+id/three"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="asdfasfasdfasgeargfsgsfd"
android:padding="6dip"
android:textColor="#000000"
android:singleLine="true"
android:ellipsize="end" />
</LinearLayout>
</TableRow>
<!-- separator -->
<View
android:layout_height="1dip"
android:background="#FF909090" />
<!-- second row: four -->
<TableRow>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
>
<TextView
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="Four:"
android:padding="6dip"
android:textColor="#000000" />
<TextView
android:id="@+id/four"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="aasdfasfasdfasgeargfsgsfd"
android:padding="6dip"
android:textColor="#000000"
android:singleLine="true"
android:ellipsize="end" />
</LinearLayout>
</TableRow>
</TableLayout>
</TableRow>
</TableLayout>
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>
Solução 2
O uso de tabelas era complicado e inútil. Aqui está o meu XML funcional:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10dip"
android:paddingBottom="10dip"
android:paddingLeft="15dip"
android:paddingRight="15dip"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="2dip"
android:background="@drawable/shape_outer"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/shape_inner"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:padding="10dip"
>
<TextView
android:layout_width="70dip"
android:layout_height="wrap_content"
android:text="One:"
android:padding="6dip"
android:textColor="#000000"
android:gravity="right" />
<TextView
android:id="@+id/one"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="6dip"
android:textColor="#000000"
android:text="sdklafjalfkjaslgkjafds"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
<View
android:layout_height="1dip"
android:layout_width="fill_parent"
android:background="#FF909090"
android:padding="10dip" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:padding="10dip"
>
<TextView
android:layout_width="70dip"
android:layout_height="wrap_content"
android:text="Two:"
android:padding="6dip"
android:textColor="#000000"
android:gravity="right" />
<TextView
android:id="@+id/two"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="6dip"
android:textColor="#000000"
android:text="dsaklfajsdkldsafjsf"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Outras dicas
Que bom que você o consertou, no entanto, você pode realizar a mesma aparência muito mais fácil usando layouts relativos.