如何准备一个类似表盘的GridLayout?
How to prepare a dial-like GridLayout?
背景
我正在尝试创建类似表盘的 GridLayout,类似于此草图:
问题
我未能正确创建它。
我的想法是所有单元格都采用相同的 space,均匀分布大小,除了右侧的后退 space 按钮会跨越 3 行。
我试过的
我目前拥有的是:
private TextView generateGridTextButton(final CharSequence textToShowAndAddUponClick) {
TextView tv = (TextView) LayoutInflater.from(this).inflate(R.layout.grid_text_button, mButtonsGrid, false);
tv.setText(textToShowAndAddUponClick);
tv.setOnClickListener(new OnClickListener() {
@Override
public void onClick(final View view) {
//...
}
});
return tv;
}
private void initButtonsGrid() {
for (int i = 1; i <= 3; ++i)
mButtonsGrid.addView(generateGridTextButton(Integer.toString(i)));
final ImageView backspaceButton = new ImageView(this);
backspaceButton.setImageResource(android.R.drawable.sym_def_app_icon);
final LayoutParams backspaceButtonLayoutParams = new LayoutParams(GridLayout.spec(GridLayout.UNDEFINED, 3, 3), GridLayout.spec(GridLayout.UNDEFINED, 1, 1));
backspaceButtonLayoutParams.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL);
backspaceButtonLayoutParams.height = backspaceButtonLayoutParams.width = LayoutParams.WRAP_CONTENT;
backspaceButton.setLayoutParams(backspaceButtonLayoutParams);
backspaceButton.setBackground(...));
mButtonsGrid.addView(backspaceButton);
for (int i = 4; i <= 9; ++i)
mButtonsGrid.addView(generateGridTextButton(Integer.toString(i)));
backspaceButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(final View view) {
//...
}
});
mButtonsGrid.addView(generateGridTextButton("*"));
mButtonsGrid.addView(generateGridTextButton("0"));
mButtonsGrid.addView(generateGridTextButton("+"));
final ImageView actionButton = new ImageView(this);
actionButton.setImageResource(android.R.drawable.sym_def_app_icon);
final LayoutParams actionButtonLayoutParams = new LayoutParams(GridLayout.spec(GridLayout.UNDEFINED, 1, 1), GridLayout.spec(GridLayout.UNDEFINED, 1, 1));
actionButtonLayoutParams.setGravity(Gravity.CENTER);
actionButtonLayoutParams.height = actionButtonLayoutParams.width = LayoutParams.WRAP_CONTENT;
actionButton.setLayoutParams(actionButtonLayoutParams);
actionButton.setBackground(...);
actionButton.setClickable(true);
mButtonsGrid.addView(actionButton);
}
res/layout/grid_text_button.xml
<TextView
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_rowWeight="1"
android:background="@drawable/..." android:clickable="true" android:fontFamily="..."
android:gravity="center" android:textColor="#2a373e" android:textSize="36sp" app:layout_columnWeight="1"
app:layout_gravity="fill" tools:text="1"/>
布局文件是这样的:
<android.support.v7.widget.GridLayout android:id="@+id/gridLayout"
... app:columnCount="4"
app:orientation="horizontal" app:rowCount="4">
这几乎可以工作,但由于某些原因,顶部 2 行按钮的高度小于底部 2 行按钮的高度:
我尝试使用重力、重量、跨度的值...但我尝试的任何方法都无济于事(甚至变得更糟)。
问题
这里有什么问题?为什么行的高度不同?
我该如何解决这个问题?
原因是我使用 android:layout_rowWeight
而不是 app:layout_rowWeight
,所以它在旧的 Android 版本上效果不佳。
现在可以正常工作了:
背景
我正在尝试创建类似表盘的 GridLayout,类似于此草图:
问题
我未能正确创建它。
我的想法是所有单元格都采用相同的 space,均匀分布大小,除了右侧的后退 space 按钮会跨越 3 行。
我试过的
我目前拥有的是:
private TextView generateGridTextButton(final CharSequence textToShowAndAddUponClick) {
TextView tv = (TextView) LayoutInflater.from(this).inflate(R.layout.grid_text_button, mButtonsGrid, false);
tv.setText(textToShowAndAddUponClick);
tv.setOnClickListener(new OnClickListener() {
@Override
public void onClick(final View view) {
//...
}
});
return tv;
}
private void initButtonsGrid() {
for (int i = 1; i <= 3; ++i)
mButtonsGrid.addView(generateGridTextButton(Integer.toString(i)));
final ImageView backspaceButton = new ImageView(this);
backspaceButton.setImageResource(android.R.drawable.sym_def_app_icon);
final LayoutParams backspaceButtonLayoutParams = new LayoutParams(GridLayout.spec(GridLayout.UNDEFINED, 3, 3), GridLayout.spec(GridLayout.UNDEFINED, 1, 1));
backspaceButtonLayoutParams.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL);
backspaceButtonLayoutParams.height = backspaceButtonLayoutParams.width = LayoutParams.WRAP_CONTENT;
backspaceButton.setLayoutParams(backspaceButtonLayoutParams);
backspaceButton.setBackground(...));
mButtonsGrid.addView(backspaceButton);
for (int i = 4; i <= 9; ++i)
mButtonsGrid.addView(generateGridTextButton(Integer.toString(i)));
backspaceButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(final View view) {
//...
}
});
mButtonsGrid.addView(generateGridTextButton("*"));
mButtonsGrid.addView(generateGridTextButton("0"));
mButtonsGrid.addView(generateGridTextButton("+"));
final ImageView actionButton = new ImageView(this);
actionButton.setImageResource(android.R.drawable.sym_def_app_icon);
final LayoutParams actionButtonLayoutParams = new LayoutParams(GridLayout.spec(GridLayout.UNDEFINED, 1, 1), GridLayout.spec(GridLayout.UNDEFINED, 1, 1));
actionButtonLayoutParams.setGravity(Gravity.CENTER);
actionButtonLayoutParams.height = actionButtonLayoutParams.width = LayoutParams.WRAP_CONTENT;
actionButton.setLayoutParams(actionButtonLayoutParams);
actionButton.setBackground(...);
actionButton.setClickable(true);
mButtonsGrid.addView(actionButton);
}
res/layout/grid_text_button.xml
<TextView
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_rowWeight="1"
android:background="@drawable/..." android:clickable="true" android:fontFamily="..."
android:gravity="center" android:textColor="#2a373e" android:textSize="36sp" app:layout_columnWeight="1"
app:layout_gravity="fill" tools:text="1"/>
布局文件是这样的:
<android.support.v7.widget.GridLayout android:id="@+id/gridLayout"
... app:columnCount="4"
app:orientation="horizontal" app:rowCount="4">
这几乎可以工作,但由于某些原因,顶部 2 行按钮的高度小于底部 2 行按钮的高度:
我尝试使用重力、重量、跨度的值...但我尝试的任何方法都无济于事(甚至变得更糟)。
问题
这里有什么问题?为什么行的高度不同?
我该如何解决这个问题?
原因是我使用 android:layout_rowWeight
而不是 app:layout_rowWeight
,所以它在旧的 Android 版本上效果不佳。
现在可以正常工作了: