Android 按钮布局 - 5 个按钮和一个徽章
Android button layout - 5 buttons and a badge
我花了很多时间来完善我的 xml 设计,以便它可以在 phone 和平板电脑上运行,无论是水平方向还是垂直方向。
Picture of current layout
前 4 个项目是 TableRows,最后一个是 RelativeLayout,因为有徽章,任何人都可以帮我重新设计它,使它们看起来都一样,并且在 phone 和平板电脑上看起来不错。在不使用固定宽度等的情况下排列按钮的最佳方式是什么
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/backgroundColor"
android:weightSum="5.3"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MenuActivity">
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30sp">
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
<Button
android:text="@string/painter"
android:id="@+id/btn_painter"
android:background="@drawable/painter_button_bg"
android:textColor="@color/white"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.70"
android:textStyle="normal|bold"
android:textSize="40sp" />
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20sp">
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
<Button
android:text="@string/workman"
android:id="@+id/btn_workman"
android:background="@drawable/workman_button_bg"
android:textColor="@color/white"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.70"
android:textStyle="normal|bold"
android:textSize="40sp" />
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20sp">
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
<Button
android:text="@string/vvs"
android:id="@+id/btn_vvs"
android:textColor="@color/white"
android:background="@drawable/vvs_button_bg"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.70"
android:textStyle="normal|bold"
android:textSize="40sp" />
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
</TableRow>
<View
android:layout_height="3dp"
android:background="@android:color/darker_gray"
android:layout_width="match_parent"
android:layout_marginTop="10sp"
android:layout_marginBottom="10sp"/>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal">
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
<Button
android:text="@string/edit_list"
android:id="@+id/btn_editlist"
android:background="@drawable/edit_button_bg"
android:textColor="@color/white"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.70"
android:textStyle="normal|bold"
android:textSize="40sp" />
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
</TableRow>
<View
android:layout_height="3dp"
android:background="@android:color/darker_gray"
android:layout_width="match_parent"
android:layout_marginTop="10sp"
android:layout_marginBottom="10sp"/>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal">
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
<RelativeLayout
android:id="@+id/badge_layout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:id="@+id/relative_layout_item_count2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/btn_sendlist"
android:text="@string/send_list"
android:background="@drawable/send_button_bg"
android:textColor="@color/white"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_weight="0.70"
android:textStyle="normal|bold"
android:textSize="40sp" />
</RelativeLayout>
<TextView
android:id="@+id/badge_notification_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@id/relative_layout_item_count2"
android:background="@android:drawable/ic_notification_overlay"
android:text="5"
android:textColor="#FFF"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
</TableRow>
</LinearLayout>
这是一个您可能可以使用的示例。它是我的应用程序布局的直接副本,我有一个播放、暂停和停止按钮,它均匀地填充任何显示器的整个宽度,无论大小。 `
<LinearLayout
android:id="@+id/ll_buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal"
>
<ImageButton
android:id="@+id/ib_play"
android:src="@drawable/ic_play"
android:contentDescription="@string/play"
android:background="@drawable/image_border"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<ImageButton
android:id="@+id/ib_pause"
android:src="@drawable/ic_pause"
android:contentDescription="@string/pause"
android:background="@drawable/image_border"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<ImageButton
android:id="@+id/ib_stop"
android:src="@drawable/ic_stop"
android:contentDescription="@string/stop"
android:background="@drawable/image_border"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
如果你想要一个换行符,你可以在每个按钮之间添加这个
<View
android:layout_height="match_parent"
android:layout_width="2dp"
android:background="@color/background"
/>
1.) add this in gradle file
compile 'com.wefika:flowlayout:0.4.1'
2) add this in layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.wefika.flowlayout.FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myFlowLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="start|top">
<EditText
android:id="@+id/myEditText"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:minWidth="100dp"
android:layout_margin="10dp"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:background="@drawable/edittext_bg"
android:inputType="text"/>
</com.wefika.flowlayout.FlowLayout>
</LinearLayout>
3) add this in main activity
public class MainActivity extends AppCompatActivity {
EditText myEditText;
FlowLayout myFlowLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myEditText = (EditText)findViewById(R.id.myEditText);
myFlowLayout = (FlowLayout)findViewById(R.id.myFlowLayout);
myEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
if(actionId == EditorInfo.IME_ACTION_DONE){
createBadget(myEditText.getText().toString().trim());
myEditText.setText("");
Toast.makeText(MainActivity.this,"DONE",Toast.LENGTH_SHORT).show();
}
return false;
}
});
}
private void createBadget(String str) {
FlowLayout.LayoutParams params = new FlowLayout.LayoutParams(FlowLayout.
LayoutParams.WRAP_CONTENT, FlowLayout.LayoutParams.WRAP_CONTENT);
final View child = getLayoutInflater().inflate(R.layout.text_badget, null);
params.setMargins(14, 14, 14, 14);
child.setLayoutParams(params);
final TextView tv = (TextView)child.findViewById(R.id.badge_tv);
tv.setText(str);
ArrayList<String> mylist = new ArrayList<String>();
mylist.add(str);
myFlowLayout.addView(child,myFlowLayout.getChildCount()-1);
System.out.println("arraylist ::"+mylist);
}
}
我花了很多时间来完善我的 xml 设计,以便它可以在 phone 和平板电脑上运行,无论是水平方向还是垂直方向。
Picture of current layout
前 4 个项目是 TableRows,最后一个是 RelativeLayout,因为有徽章,任何人都可以帮我重新设计它,使它们看起来都一样,并且在 phone 和平板电脑上看起来不错。在不使用固定宽度等的情况下排列按钮的最佳方式是什么
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/backgroundColor"
android:weightSum="5.3"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MenuActivity">
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30sp">
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
<Button
android:text="@string/painter"
android:id="@+id/btn_painter"
android:background="@drawable/painter_button_bg"
android:textColor="@color/white"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.70"
android:textStyle="normal|bold"
android:textSize="40sp" />
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20sp">
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
<Button
android:text="@string/workman"
android:id="@+id/btn_workman"
android:background="@drawable/workman_button_bg"
android:textColor="@color/white"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.70"
android:textStyle="normal|bold"
android:textSize="40sp" />
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20sp">
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
<Button
android:text="@string/vvs"
android:id="@+id/btn_vvs"
android:textColor="@color/white"
android:background="@drawable/vvs_button_bg"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.70"
android:textStyle="normal|bold"
android:textSize="40sp" />
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
</TableRow>
<View
android:layout_height="3dp"
android:background="@android:color/darker_gray"
android:layout_width="match_parent"
android:layout_marginTop="10sp"
android:layout_marginBottom="10sp"/>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal">
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
<Button
android:text="@string/edit_list"
android:id="@+id/btn_editlist"
android:background="@drawable/edit_button_bg"
android:textColor="@color/white"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.70"
android:textStyle="normal|bold"
android:textSize="40sp" />
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
</TableRow>
<View
android:layout_height="3dp"
android:background="@android:color/darker_gray"
android:layout_width="match_parent"
android:layout_marginTop="10sp"
android:layout_marginBottom="10sp"/>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal">
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
<RelativeLayout
android:id="@+id/badge_layout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:id="@+id/relative_layout_item_count2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/btn_sendlist"
android:text="@string/send_list"
android:background="@drawable/send_button_bg"
android:textColor="@color/white"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_weight="0.70"
android:textStyle="normal|bold"
android:textSize="40sp" />
</RelativeLayout>
<TextView
android:id="@+id/badge_notification_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@id/relative_layout_item_count2"
android:background="@android:drawable/ic_notification_overlay"
android:text="5"
android:textColor="#FFF"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
<Space
android:layout_width="0dp"
android:layout_weight="0.10"
android:layout_height="wrap_content" />
</TableRow>
</LinearLayout>
这是一个您可能可以使用的示例。它是我的应用程序布局的直接副本,我有一个播放、暂停和停止按钮,它均匀地填充任何显示器的整个宽度,无论大小。 `
<LinearLayout
android:id="@+id/ll_buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal"
>
<ImageButton
android:id="@+id/ib_play"
android:src="@drawable/ic_play"
android:contentDescription="@string/play"
android:background="@drawable/image_border"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<ImageButton
android:id="@+id/ib_pause"
android:src="@drawable/ic_pause"
android:contentDescription="@string/pause"
android:background="@drawable/image_border"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<ImageButton
android:id="@+id/ib_stop"
android:src="@drawable/ic_stop"
android:contentDescription="@string/stop"
android:background="@drawable/image_border"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
如果你想要一个换行符,你可以在每个按钮之间添加这个
<View
android:layout_height="match_parent"
android:layout_width="2dp"
android:background="@color/background"
/>
1.) add this in gradle file
compile 'com.wefika:flowlayout:0.4.1'
2) add this in layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.wefika.flowlayout.FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myFlowLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="start|top">
<EditText
android:id="@+id/myEditText"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:minWidth="100dp"
android:layout_margin="10dp"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:background="@drawable/edittext_bg"
android:inputType="text"/>
</com.wefika.flowlayout.FlowLayout>
</LinearLayout>
3) add this in main activity
public class MainActivity extends AppCompatActivity {
EditText myEditText;
FlowLayout myFlowLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myEditText = (EditText)findViewById(R.id.myEditText);
myFlowLayout = (FlowLayout)findViewById(R.id.myFlowLayout);
myEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
if(actionId == EditorInfo.IME_ACTION_DONE){
createBadget(myEditText.getText().toString().trim());
myEditText.setText("");
Toast.makeText(MainActivity.this,"DONE",Toast.LENGTH_SHORT).show();
}
return false;
}
});
}
private void createBadget(String str) {
FlowLayout.LayoutParams params = new FlowLayout.LayoutParams(FlowLayout.
LayoutParams.WRAP_CONTENT, FlowLayout.LayoutParams.WRAP_CONTENT);
final View child = getLayoutInflater().inflate(R.layout.text_badget, null);
params.setMargins(14, 14, 14, 14);
child.setLayoutParams(params);
final TextView tv = (TextView)child.findViewById(R.id.badge_tv);
tv.setText(str);
ArrayList<String> mylist = new ArrayList<String>();
mylist.add(str);
myFlowLayout.addView(child,myFlowLayout.getChildCount()-1);
System.out.println("arraylist ::"+mylist);
}
}