如何在布局中均匀对齐 ImageButtons
How to align ImageButtons in a layout evenly
我目前有 4 个 ImageButton 的布局只占屏幕高度的一半。我希望 ImageButtons 在布局中均匀放置。这是我拥有的：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
这行得通，因为这是结果：
问题是，1：我想在每个按钮下添加文本，但我不确定这将如何工作，以及 2：ImageButtons 左右两侧的白点处于活动状态，就好像它们是按钮的一部分一样。有更好的方法吗？
你可以这样做
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:id="@+id/section1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="@android:color/transparent"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/img1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 1"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="@android:color/transparent"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/img2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 2"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="@android:color/transparent"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/img3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 3"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="@android:color/transparent"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/img4"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 4"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
结果
对于问题的第二部分，您应该在整个相关布局上设置点击监听器。例如点击第一个单元格：-
xml
android:id="@+id/section1"
JAVA
findviewbyid(R.id.section1).setOnClickListener(...)
另一种（更好的）替代方法是使用 TableLayout：
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/btn1"
android:contentDescription="@null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"/>
<TextView
android:id="@+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/btn1"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/btn2"
android:contentDescription="@null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"/>
<TextView
android:id="@+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/btn2"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 2"/>
</RelativeLayout>
</TableRow>
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/btn3"
android:contentDescription="@null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"/>
<TextView
android:id="@+id/txt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/btn3"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 3"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/btn4"
android:contentDescription="@null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"/>
<TextView
android:id="@+id/txt4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/btn4"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 4"/>
</RelativeLayout>
</TableRow>
</TableLayout>
我目前有 4 个 ImageButton 的布局只占屏幕高度的一半。我希望 ImageButtons 在布局中均匀放置。这是我拥有的：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
这行得通，因为这是结果：
问题是，1：我想在每个按钮下添加文本，但我不确定这将如何工作，以及 2：ImageButtons 左右两侧的白点处于活动状态，就好像它们是按钮的一部分一样。有更好的方法吗？
你可以这样做
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:id="@+id/section1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="@android:color/transparent"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/img1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 1"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="@android:color/transparent"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/img2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 2"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="@android:color/transparent"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/img3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 3"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="@android:color/transparent"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/img4"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 4"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
结果
对于问题的第二部分，您应该在整个相关布局上设置点击监听器。例如点击第一个单元格：-
xml
android:id="@+id/section1"
JAVA
findviewbyid(R.id.section1).setOnClickListener(...)
另一种（更好的）替代方法是使用 TableLayout：
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/btn1"
android:contentDescription="@null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"/>
<TextView
android:id="@+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/btn1"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/btn2"
android:contentDescription="@null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"/>
<TextView
android:id="@+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/btn2"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 2"/>
</RelativeLayout>
</TableRow>
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/btn3"
android:contentDescription="@null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"/>
<TextView
android:id="@+id/txt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/btn3"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 3"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent">
<ImageButton
android:id="@+id/btn4"
android:contentDescription="@null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"/>
<TextView
android:id="@+id/txt4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/btn4"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 4"/>
</RelativeLayout>
</TableRow>
</TableLayout>