如何制作复杂的 TableLayout 布局 - Android [英] How can I make complex TableLayout layout - Android
本文介绍了如何制作复杂的 TableLayout 布局 - Android的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想为我的应用程序制作一种非常复杂的布局.我决定使用 TableLayout 来制作它，但我无法按照我的计划进行制作.有人可以告诉我它应该如何编码，因为现在它看起来很可怕.
I wanted to make one layout for my application which is quite complex. I've decided to make it using TableLayout but I am unable to make it as I've planed. Can someone please tell me how it should be coded, because now it looks horrible.
这是我的概念:
这是我的代码:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#ffffff">
<!-- ROW1 -->
<TableRow
android:id="@+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/r1v1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_span="7"
android:text="7/7" />
</TableRow>
<!-- ROW2 -->
<TableRow
android:id="@+id/tableRow2"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/r2v1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
<TextView
android:id="@+id/r2v2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_span="2"
android:text="2/7" />
<TextView
android:id="@+id/r2v3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_span="2"
android:text="2/7" />
<TextView
android:id="@+id/r2v4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_span="2"
android:text="2/7" />
</TableRow>
<!-- ROW3 -->
<TableRow
android:id="@+id/tableRow3"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/r3v1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
<TextView
android:id="@+id/r3v2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
<TextView
android:id="@+id/r3v3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
<TextView
android:id="@+id/r3v4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
<TextView
android:id="@+id/r3v5"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
<TextView
android:id="@+id/r3v6"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
<TextView
android:id="@+id/r3v7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
</TableRow>
<!-- ROW4 -->
<TableRow
android:id="@+id/tableRow4"
android:layout_width="fill_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/r4v1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
<TextView
android:id="@+id/r4v2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_span="5"
android:text="5/7" />
<TextView
android:id="@+id/r4v3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
</TableRow>
<!-- ROW5 -->
<TableRow
android:id="@+id/tableRow5"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/r5v1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
<TextView
android:id="@+id/r5v2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_span="3"
android:text="3/7" />
<TextView
android:id="@+id/r5v3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_span="2"
android:text="2/7" />
<TextView
android:id="@+id/r5v4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1/7" />
</TableRow>
<!-- ROW6 -->
<TableRow
android:id="@+id/tableRow6"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/r6v1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_span="7"
android:text="7/7" />
</TableRow>
</TableLayout>
这是我的结果:
不是最好的，你必须承认:)
Not the bes, you have to admit :)
推荐答案
对于如此复杂的布局，我会编写自定义布局 - 一个扩展 ViewGroup 的类，如下所示:
for such a complex layout i'd write custom layout - a class that extends ViewGroup, like this:
import android.content.Context;
import android.util.AttributeSet;
import android.util.FloatMath;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
public class CustomLayout extends ViewGroup {
private final static String TAG = "CustomLayout";
private static final int NUM_CHILDREN = 20;
private static final int GRID_WIDTH = 7;
private static final int GRID_HEIGHT = 12;
private static final float[] COORDS = {
// row 0
0, 0, 7, 1,
// row 1
0, 1, 1, 1,
1, 1, 2, 1,
3, 1, 2, 1,
5, 1, 2, 1,
// row 2
0, 2, 1, 1,
1, 2, 1, 1,
2, 2, 1, 1,
3, 2, 1, 1,
4, 2, 1, 1,
5, 2, 1, 1,
6, 2, 1, 1,
// row 3
0, 3, 1, 7,
1, 3, 5, 7,
6, 3, 1, 7,
// row 4
0, 10, 1, 1,
1, 10, 3, 1,
4, 10, 2, 1,
6, 10, 1, 1,
// row 5
0, 11, 7, 1,
};
public CustomLayout(Context context) {
super(context);
init();
}
public CustomLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
Context ctx = getContext();
setBackgroundColor(0xffaaaaaa);
for (int i = 0; i < NUM_CHILDREN; i++) {
TextView tv = new Button(ctx);
tv.setBackgroundResource(android.R.drawable.btn_default_small);
addView(tv);
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int w = getWidth();
int h = getHeight();
for (int i = 0; i < NUM_CHILDREN; i++) {
View v = getChildAt(i);
int ii = i * 4;
float fl = w * COORDS[ii] / GRID_WIDTH;
float ft = h * COORDS[ii+1] / GRID_HEIGHT;
float fr = fl + w * COORDS[ii+2] / GRID_WIDTH;
float fb = ft + h * COORDS[ii+3] / GRID_HEIGHT;
Log.d(TAG, "onLayout " + fl + " " + ft + " " + fr + " " + fb);
v.layout(Math.round(fl), Math.round(ft), Math.round(fr), Math.round(fb));
}
}
}
在您的活动的 onCreate 中使用它来测试它:
to test it use this in your Activity's onCreate:
ViewGroup vg = new CustomLayout(this);
setContentView(vg);
如您所见，这并不难，而且比使用多个 LinearLayouts 或 RelativeLayout 要快得多
as you can see it's not so difficult and it is way faster than using multiple LinearLayouts or RelativeLayout
这篇关于如何制作复杂的 TableLayout 布局 - Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
