在Android屏幕上排列各种界面元素的布局策略
我对Android开发相对较新，并且对设计指南和正确的布局技术没有很强的理解。我正在使用需要如下所示的屏幕：
我目前使用的代码是几个线性布局块的混合，我知道这不是实现这种布局的正确方法。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.culami.WelcomePageActivity"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="@string/welcome_msg"
android:layout_gravity="center"
android:textSize="50sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="horizontal"
android:layout_marginTop="15dp" >
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/userIcon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:src="@drawable/user1"
android:contentDescription="@string/userProfileMSG"
android:layout_gravity="center"
android:onClick="" />
<TextView
android:id="@+id/nameUser1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="@string/nameUser1"
android:layout_gravity="center"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/userIcon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:src="@drawable/user2"
android:contentDescription="@string/userProfileMSG"
android:layout_gravity="center"
android:onClick="" />
<TextView
android:id="@+id/nameUser2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="@string/nameUser2"
android:layout_gravity="center"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/userIcon3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:src="@drawable/user3"
android:contentDescription="@string/userProfileMSG"
android:layout_gravity="center"
android:onClick="" />
<TextView
android:id="@+id/nameUser3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="@string/nameUser3"
android:layout_gravity="center"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/userIcon4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:src="@drawable/user4"
android:contentDescription="@string/userProfileMSG"
android:layout_gravity="center"
android:onClick="" />
<TextView
android:id="@+id/nameUser4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="@string/nameUser4"
android:layout_gravity="center"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/addUserIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:src="@drawable/adduser"
android:contentDescription="@string/userProfileMSG"
android:layout_gravity="center"
android:onClick="" />
<TextView
android:id="@+id/addUserText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="@string/addUser"
android:layout_gravity="center"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="35dp"
android:layout_marginBottom="10dp"
android:text="@string/buttonSubmit"
android:textSize="30sp"
android:textColor="#ffffff"
android:textStyle="bold"
android:padding="5dp"
android:background="@drawable/login_button_selector"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="0.3"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
有人可以指导我使用正确的方法来处理这些布局，并向我提供一些我可能违反的设计指南。谢谢！
6 个答案:
答案 0 :(得分：5)
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Welcome!"
android:textSize="50dp"
android:gravity="center_horizontal"
android:id="@+id/welcome"/>
<LinearLayout
android:layout_marginTop="30dp"
android:layout_below="@+id/welcome"
android:id="@+id/ll1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:src="@drawable/com_facebook_button_blue_normal"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="100dp"
android:layout_weight="0.33"
android:id="@+id/im1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1234"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:textSize="20dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:src="@drawable/com_facebook_button_blue_normal"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="100dp"
android:layout_weight="0.33"
android:id="@+id/im1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1234"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:textSize="20dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:src="@drawable/com_facebook_button_blue_normal"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="100dp"
android:layout_weight="0.33"
android:id="@+id/im1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1234"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:textSize="20dp"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_marginTop="15dp"
android:layout_below="@+id/ll1"
android:id="@+id/ll2"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:src="@drawable/com_facebook_button_blue_normal"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="100dp"
android:layout_weight="0.33"
android:id="@+id/im1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1234"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:textSize="20dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:src="@drawable/com_facebook_button_blue_normal"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="100dp"
android:layout_weight="0.33"
android:id="@+id/im1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1234"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:textSize="20dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="100dp"
android:layout_weight="0.33"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:textSize="20dp"/>
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button"
style="@android:style/Widget.Holo.Button.Borderless"
android:text="Get Started"
android:textSize="40dp"
android:textColor="@color/black"
android:padding="15dp"
android:background="#4caf50"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
说明 - 相对布局作为父视图（用于安排窗口小部件的灵活性）。
TextView，顶部文字的ID为“welcome”。 （你可以通过重力和文本化以及所有这些来定制它。）
LinearLayout -
1）它有水平方向。也就是说，小部件将被水平排列。 2）它低于第一个文本视图：
android:layout_below="@+id/welcome"
3）它有3个图像视图（如上所述水平放置）。宽度为Loo，为0dps。因为我使用了layout_weight。每个的重量是0.33，即它将占水平可用的任何东西的33％。如果你想要4个图像，你可以使用每个重量为0.25的颜色。
然后我们有另一个线性布局，再次有像上面那样的图像。它放在ll1下面。
最后，我们有一个按钮（你可以在ll2下面或在父底部对齐
答案 1 :(得分：3)
好的，这是我的建议：
此解决方案没有内部权重以获得最佳性能。
它也是动态的，这意味着您可以操纵用户列表，并且视图层次结构非常简单。
<强> main_layout.xml
<?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"
android:padding="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Welcome!"
android:gravity="center"
android:padding="20dp"
android:textSize="25sp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<GridView
android:id="@+id/login_users_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="3"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Get Started!"
android:background="@android:color/holo_green_dark"
android:gravity="center"
android:padding="20dp"
android:textSize="25sp"
android:textColor="@android:color/white"/>
</LinearLayout>
正如您所看到的，它现在有一个gridview，您可以根据需要添加项目。
<强> user_cell_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawablePadding="10dp"
android:gravity="center"
android:textSize="20sp"
android:padding="5dp"/>
每个单元格都是普通的文本视图。该图标将是textView的一个名为drawableTop的属性。
您需要一个适用于gridview的适配器，以使每个项目适应网格视图项目。
<强> UserAdapter.java
public class UserAdapter extends ArrayAdapter<String> {
private Context mContext;
private int mLayoutResourceId;
public UserAdapter(Context context, int layoutResourceId, String[] data) {
super(context, layoutResourceId, data);
mContext = context;
mLayoutResourceId = layoutResourceId;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater inflater = LayoutInflater.from(mContext);
convertView = inflater.inflate(mLayoutResourceId, parent, false);
UserViewHolder holder = new UserViewHolder();
holder.textViewUserName = (TextView) convertView;
convertView.setTag(holder);
}
UserViewHolder holder = (UserViewHolder) convertView.getTag();
String userName = getItem(position);
holder.textViewUserName.setText(userName);
holder.textViewUserName.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_launcher, 0, 0);
return convertView;
}
static class UserViewHolder {
TextView textViewUserName;
}
}
然后在您的活动的onContent中执行：
GridView gridView = (GridView) findViewById(R.id.login_users_container);
String[] users = new String[]{
"Bruce", "Tony", "Barry", "Katie", "Add New"};
UserAdapter adapter = new UserAdapter(this, R.layout.login_user_cell_layout, users);
gridView.setAdapter(adapter);
希望有所帮助！您现在可以更改列表的内容，只需调用adapter.notifyDataSetChanged();，网格视图应进行调整以适应更改。
如果您需要，可以扩展UserAdapter以保存User类型的项目，而不是简单的字符串，您可以在其中添加图标，用户名和ID。 This example用于列表视图，但适配器部分与容器无关。
答案 2 :(得分：2)
我建议你使用Grid View和适配器。 以下是Adapter提到的一些优点。
适配器的优点
1-Dynamic - 可以扩展为任意数量的元素，而不是静态编码每个单独的视图。 2-Elegant - 一旦你克服了最初的困难，你的代码就会变得娇小而且很清楚 3-Beautiful - 现在您不必控制行或列中有多少项，android会自动以最佳方式填充屏幕。这也意味着您无需为水平和垂直方向重新设计应用程序。
答案 3 :(得分：1)
虽然你可以通过一些LinearLayouts和类似的方法实现这一点，但我的建议是使用RecyclerView。它具有很高的可扩展性，即使你碰巧有很多元素也能表现出色。
您可以在此处阅读RecyclerView：https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html
一开始可能会有很多东西，无论如何它都适合我，但是一旦掌握了它，你就会开始看到许多问题的新解决方案。
我认为您希望欢迎使用内容滚动，以及“开始”按钮，您可以使用RecyclerView.Adapter中的另外两个ViewType来实现此目的。或者，您可以直接在onScrollListener上使用RecyclerView，并在用户滚动设定距离时将其滚动到屏幕外。
最后但并非最不重要的是，您可以使用ItemDecoration上设置的RecyclerView来调整项目的大小调整，并且可以使用LayoutManager设置项目的显示方式（目前还有LinearLayoutManager（思考清单），GridLayoutManager和StaggeredGridLayoutManager可用。它们提供您所需要的一切，但如果您想要更多，您甚至可以查看Lucas Rocha的TwoWayView，这允许您进一步自定义项目的显示方式（SpannableGridLayoutManger是我的想法）。
直接链接到他的github：https://github.com/lucasr/twoway-view
祝你好运，请记住即使可能有更便宜更快的解决方案，您可能需要在将来修改它，然后您会回想起这一刻，并想知道为什么你没有采取优雅的方式:-)或不..不管怎样，祝你好运。
答案 4 :(得分：1)
如果您希望能够操作（添加和删除）用户，我建议您将GridView与适配器一起使用。主要优点是：
- 使用java代码轻松添加和删除组件。
- 自动滚动功能。
自动滚动使您无需将容器放入ScrollView。
对于不需要GridView动态功能的其他用途，您可以使用GridLayout，这样更容易，因为您可以在xml文件中添加所有它的子项并且不要使用GridLayout不得不担心在你的java代码中添加它们。
答案 5 :(得分：0)
如果您想了解有关版面设计指南的更多信息，请参阅以下链接：
http://developer.android.com/training/improving-layouts/index.html
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？