Как создать кнопки с равными ширинами?
Я хочу отображать три кнопки в середине экрана, и все три кнопки имеют одинаковую ширину, хотя они будут иметь текстовые метки разной длины.
Простое добавление трех кнопок с текстовыми ярлыками разной длины создает кнопки разной ширины.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center">
<Button
android:id="@+id/button_1"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="ABCDEF" />
<Button
android:id="@+id/button_2"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="GHI" />
<Button
android:id="@+id/button_3"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="JKLM" />
</LinearLayout>
по умолчанию ширина кнопки обертывает содержимое:
![default button width wraps contents]()
-
Установка layout_weight в 1 и layout_width на 0dip на всех кнопках заставляет их растягиваться одинаково, чтобы заполнить всю ширину экрана. Для чего я хочу, такие кнопки просто слишком большие, особенно на больших экранах.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center">
<Button
android:id="@+id/button_1"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="ABCDEF" />
<Button
android:id="@+id/button_2"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="GHI" />
<Button
android:id="@+id/button_3"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="JKLM" />
</LinearLayout>
макет весов 1 кнопка заполняет ширину экрана:
![layout weight 1 buttons fill screen width]()
-
Установка различных значений для weightSum в родительском LinearLayout может использоваться, чтобы остановить кнопки от заполнения всего экрана, но я не думаю, что это путь, который я хочу принять, потому что я не хочу, чтобы кнопки занимали большая часть экрана на устройствах с большим экраном. Чтобы уточнить, используя weightSum, я мог бы, например, установить три кнопки, чтобы в совокупности занимать половину ширины экрана, что может выглядеть ОК на маленьких экранах, но на большом экране кнопки будут по-прежнему занимать половину ширины экрана, а кнопки будут намного больше, чем я хочу. Возможно, окончательное решение будет состоять в том, чтобы просто иметь разные файлы макета для разных экранов, но я бы не пошел по этому пути.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:weightSum="5">
<Button
android:id="@+id/button_1"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="ABCDEF" />
<Button
android:id="@+id/button_2"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="GHI" />
<Button
android:id="@+id/button_3"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="JKLM" />
</LinearLayout>
весовая сумма 5 маленьких экранов:
![weight sum 5 small screen]()
весовая сумма 5 больших экранов:
![weight sum 5 large screen]()
-
Я также много проработал с TableLayout, но не получил ничего лучше, чем просто использовать LinearLayout.
GridView очень неудобен для использования, и я еще не пробовал его.
Итак, как создать кнопки с одинаковой шириной, желательно, чтобы они были настолько широкими, насколько это необходимо, чтобы соответствовать содержимому кнопки с самой длинной меткой?
Любые советы приветствуются.
(Я искал и задавал этот вопрос и отвечал много раз, но ни один из ответов, которые я нашел, не разрешил то, что я пытаюсь достичь.)
Ответы
Ответ 1
Возможно, окончательное решение будет состоять в том, чтобы просто иметь разные файлы макета для разных экранов, но я бы не пошел по этому пути.
Многие программисты будут использовать res/layout/
и res/layout-large/
для обработки подобных ситуаций. В ограниченном случае трех кнопок у вас могут быть альтернативы, но обычно пользовательские интерфейсы не совсем упрощены.
Итак, как создать кнопки с одинаковой шириной, желательно, чтобы они были настолько широкими, насколько это необходимо, чтобы соответствовать содержимому кнопки с самой длинной меткой?
Чтобы выполнить ваше "предпочтительное" [sic] требование, вам нужно создать для него собственный класс макета. Вот один из них, относящийся к нему, для шаблона панели инструментов, который вы можете использовать в качестве отправной точки.
Ответ 2
Если вы заранее знаете, каким будет ваш самый широкий текст кнопки, вы можете использовать атрибут android:ems
, чтобы настроить ваши кнопки на эту ширину.
<Button
android:id="@+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minEms="5"
android:text="@string/my_button" />
Это не идеально, но это самый простой способ, который я нашел, чтобы достичь этого взгляда без бесконечного размахивания макетами.
Ответ 3
использовать класс фрагмента панели инструментов
http://code.google.com/p/iosched/source/browse/android/src/com/google/android/apps/iosched/ui/DashboardFragment.java
Ответ 4
Только одна дополнительная заметка с моей стороны!
Если вам нужно будет установить ширину (или высоту) для кнопок (или любых других представлений с простыми изменениями кода), которые добавляются во время выполнения, вы можете использовать приведенный ниже код (это не зависит от ориентации)
public void AlignButtons(){
llModules = (LinearLayout) findViewById(R.id.llModules);
ViewTreeObserver viewTree = llModules.getViewTreeObserver();
viewTree.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
public boolean onPreDraw() {
int childcount = llModules.getChildCount();
int maxWidth = 0; //int maxHeight = 0;
String fontPath = "fonts/Isabella-Decor.ttf";
Typeface tf = Typeface.createFromAsset(getAssets(), fontPath);
for (int i = 0; i < childcount; i++) {
LinearLayout v = (LinearLayout)llModules.getChildAt(i);
View vv = v.getChildAt(0);
if (vv instanceof Button) {
int width = vv.getMeasuredWidth();
maxWidth = (maxWidth > width) ? maxWidth : width;
//int height = vv.getMeasuredHeight();
//maxHeight = (maxHeight > height) ? maxHeight : height;
}
}
for (int i = 0; i < childcount; i++) {
LinearLayout v = (LinearLayout)llModules.getChildAt(i);
View vv = v.getChildAt(0);
if (vv instanceof Button) {
LayoutParams params = ((Button) vv).getLayoutParams();
params.width = maxWidth;
//params.height = maxHeight;
((Button) vv).setLayoutParams(params);
// Applying font
((Button) vv).setTypeface(tf);
}
vv = v.getChildAt(1);
if (vv instanceof TextView) {
// Applying font
((TextView) vv).setTypeface(tf);
}
}
return true;
}
});
}
Здесь, в моем случае:
llModule - некоторый макет, содержащий другой макет, с которым нам нужно выровнять (v.getChildAt(0);
) и другие (v.getChildAt(1);
).
LinearLayout v = (LinearLayout) llModules.getChildAt(i); - получить расположение кнопок для выравнивания.
Другие части понятны.
Два цикла в этом коде довольно идентичны, но я до сих пор не могу представить, как их объединить (чтобы ускорить время выполнения).
Ответ 5
Используйте этот правильный код, это поможет вам.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:weightSum="3">
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Get the Time"
android:onClick="showNewDate" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Get the Time"
android:onClick="showNewDate" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Get the Time"
android:onClick="showNewDate" />
Ответ 6
Чтение этого потока, а затем выполнение пробной ошибки и заметили, что android:layout_width="180px"
является принятым параметром. Теперь, как сказано, я просто наткнулся на это, не пытался использовать это, чтобы решить ваш сценарий с тремя кнопками.
Вполне возможно, что все изменилось с тех пор, как вы первоначально разместили. Хотя я пробовал это при создании версии 1.5. Этот достаточно старый...: -)
Вот полный main.xml
:
<?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">
<TextView
android:id="@+id/dateText"
android:text="\n\nClick for Date\n\n"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/button"
android:layout_width="180px"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Get the Time"
android:onClick="showNewDate" />
</LinearLayout>