如何创建可靠的Java驱动的Android用户界面？

引言

在本文中，我将介绍一种有助于我们创建动态 Android 布局的方法。如您所知，在 Android 编程中有一些创建用户界面的方法，但开发人员必须始终选择一种合适的方法来实现他们的目标。选择合适的方法取决于他们（开发人员）的问题和情况，但基本上我们有两种实现方法。它们被介绍为基于 XML 和基于 Java 的方法。

何时使用基于 XML 的方法？

当我们在 Android 应用程序中创建简单且静态的用户界面时，我们选择这种方法。布局不会改变。假设您想创建一个用于获取用户信息的布局或一个登录活动。如您所见，它们是简单且独立的布局。它们只创建一次，永不更改，因此您可以简单地转到res/layout/your_layout.xml 并设置您的 XML 属性。

何时使用基于 Java 的方法？

有时，您的布局不像静态布局那样简单。假设您想创建一个显示新产品信息的布局。这是一个依赖型布局。它取决于产品的数量。您必须问自己“我应该创建多少行来显示新产品？！”谁知道呢，也许数据库中只有一个新项目，您可以显示它，或者有 1000 个！您的任务是创建一个可靠的布局，能够正确显示这些信息。因此，您必须创建一个动态布局，它能自行调整。

如何开始创建动态 Android 布局？

如果您确切地知道要创建什么，这可能是一个简单的问题。虽然我认为您需要了解如何使用基于 XML 的结构创建用户界面，但它是此解决方案中必需的基本概念。因此，我建议先学习这个概念。无论如何，如果您了解了这一点，您将在本文末尾能够创建自己的动态布局。

哪个布局是可靠的？

您的布局在不同设备上显示是否相似？这是可靠性的主要条件。您必须尝试创建一个在不同分辨率下显示相似的布局。

Using the Code

介绍您必须遵循的步骤

• 写下您的需求：对您来说，了解您的目标非常重要。为此，您可以参考您的用例图。总的来说，我们参考这份文档来了解我们的愿望。
• 根据上一部分绘制简单的布局图：这有助于您了解布局的最终外观。
• 分隔布局的不同部分：这一步在下一个级别会有帮助。如果您能将它们分开，您就能选择合适的元素。
• 为布局选择合适的元素：例如，您需要两个按钮、一个textview和一个edittext。现在，您知道该做什么了。
• 使用 Java 代码创建自己的动态布局：这是最后一步。尝试使用 Java 代码实现您的计划。

根据一个假想问题创建动态 Android UI

1- 我参考了用例图，并认识到了我的问题，因为它简要地表达了整个问题。假设您想为购物中心经理制作一个 Android 应用程序。他想通过移动设备查看他的客户信息。客户信息包含姓名、姓氏、电子邮件、描述、用户图片和一个执行某些操作的按钮。因此，我完成了第一步，我的目标已经确定。

2- 如您所见，我根据要显示的功能设计了一个计划。这是我的计划。它告诉我我需要两个TextViews、一个WebView（可选，您可以使用 3 个TextViews）、一个ImageView和一个Button。请注意，我们必须创建一个能够重复此计划的结构！因为您可能在数据库中有数千条记录。

如何在 Java 中实现此计划？

添加主容器的概念

添加一个ScrollView是您必须做的第一件事。如果您问为什么？！我会告诉你因为您可能有许多记录，它们会占用很多空间。如您所知，ScrollView只能包含一个元素，那么我们如何将大量记录添加到ScrollView中呢？这里有一个技巧，只在 ScrollView 中添加一个 LinearLayout，并在 LinearLayout 中添加任意数量的记录！所以您需要转到res/layout/your_layout.xml 并添加如下 XML

<?xml version="1.0" encoding="UTF-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/MainContainer" android:layout_width="fill_parent" 
android:layout_height="wrap_content" android:background="@color/bcd1fb">
   <LinearLayout android:orientation="vertical" 
android:layout_height="wrap_content" 
android:layout_width="fill_parent" android:id="@+id/body" />
</ScrollView>

划分屏幕的概念

当您观看计划时，您是否明白了？根据此计划，屏幕必须分为两部分。TextViews 和Webview放在左侧，ImageView和button放在右侧。所以我们有两个部分，包含一些元素。总的来说，“划分屏幕”是程序员使用最重要的概念之一。我使用了一种特定的、知名的 Android 编程技术来管理它。这项技术有 2 个步骤

1. 获取屏幕宽度
2. 将其划分！

我的经验表明，使用onWindowFocusChanged方法而不是onCreate。我的意思是，获取或计算宽度的代码必须放在这个方法中。如果您对原因感到好奇，可以参考开发者的参考。它说“onWindowFocusChanged在活动的当前窗口获得或失去焦点时被调用。这是该活动对用户可见的最佳指示器”。

int Width = 0;
ScrollView sv = null;@Override
public void onWindowFocusChanged(boolean focus) {
    super.onWindowFocusChanged(focus);
    try {
        sv = (ScrollView) findViewById(R.id.MainContainer);
        Width = sv.getWidth();

创建项目（行）的概念

自从我们开始编码以来，我们已经完成了两部分。首先，我们添加了主容器，然后我们获得了width。现在，我们可以将记录添加到我们放在ScrollView中并称之为body的LinearLayout中。首先，我们需要一些对象和变量。我已经在下面解释了它们的用法。

	//variables and objects
	int Width = 0; //it contains width of screen 
	int Imageid = 0; //it contains ImageView's Id
	ScrollView sv = null; //it mentions to the ScrollView(MainContainer)  
	LinearLayout FixLayout = null; //it  mentions to the linearLayout which is placed in ScrollView(body)
	LinearLayout mainLinearLayout = null; // it is used for creating Items     
	LinearLayout ll = null; //it mentions to records which we want to show them. lls are placed in body. 
	TextView tv = null; //it mentions to TextViews which show name,family and Email 
	WebView wv = null; //it mentions to WebView which show description. 
	ImageView img = null; //it mentions to the ImageView
	Button btn = null; // the button that we use 
	LayoutParams lp = null; //LayoutParams

我继续在onWindowFocusChanged中编码。首先，找到“FixLayout”。

FixLayout = (LinearLayout) findViewById(R.id.body); //it contains records    

考虑到您能够将记录结构添加到FixLayout中，因为您已经获得了它。现在，在代码中添加一个循环。基本上，循环用于重复某事。在现实世界中，它会计算您的记录并一直进行，直到行完成。但在我这里，我使用了一个简单的循环。它从 1 计数到 10。如您所见，我在循环中创建了一个Linearlayout，然后设置了width和height。让我提醒您，您此时正在创建记录。您处于第三个级别。

ScrollView(MainContainer)>>LinearLayout(body)>>Loop{LinearLayout(records)}

for (int i = 1; i <= 10; i++) {
	// making a record 
	mainLinearLayout = new LinearLayout(this);
	mainLinearLayout.setOrientation(LinearLayout.HORIZONTAL);
	lp = new LinearLayout.LayoutParams(Width, 200);
	mainLinearLayout.setLayoutParams(lp);    

下一步，我想划分最后一个LinearLayout并在其中添加另外两个LinearLayouts。（参考计划）。

//first part of record .it is colored White. 
	    	   ll=new LinearLayout(this);
	    	   ll.setOrientation(LinearLayout.VERTICAL);
	    	   ll.setBackgroundColor(getResources().getColor(R.color.White));
	    	   lp= new LinearLayout.LayoutParams(Width/2,LayoutParams.MATCH_PARENT);
	    	   lp.setMargins(2,2,2,2);
	    	   ll.setLayoutParams(lp);    

根据计划，我必须在左侧添加TextViews 和WebView。

tv = new TextView(this);
tv.setText("name : Customer #" + i + " Family : Customer : #" + i);
tv.setTextSize(getResources().getDimension(R.dimen.item_txtsize));
ll.addView(tv);
// Second Text View is used to show Email address
tv = new TextView(this);
tv.setText("Customer" + i + "@mymail.com");
tv.setTextSize(getResources().getDimension(R.dimen.item_txtsize));
ll.addView(tv);
//Web view is used to show some information about customers . 
wv = new WebView(this);
wv.loadDataWithBaseURL(null, "You are reading some information about Customer#" + i, 
"text/html", "utf-8", null);
ll.addView(wv);
mainLinearLayout.addView(ll);    

您可以简单地像创建左侧一样继续创建右侧，因此为右侧创建另一个LinearLayout，然后添加ImageView和Button。要完成，您需要将mainLinearLayout(record)添加到FixLayout(body)。

ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
ll.setBackgroundColor(getResources().getColor(R.color.Black));
lp = new LinearLayout.LayoutParams(Width / 2, LayoutParams.MATCH_PARENT);
lp.setMargins(2, 2, 2, 2);
ll.setLayoutParams(lp);
//Image view is used to show user's picture
img = new ImageView(this);
Imageid = getResources().getIdentifier("img" + i, "drawable", getPackageName());
img.setImageResource(Imageid);
lp = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 120);
img.setLayoutParams(lp);
ll.addView(img);
//button does an action 
btn = new Button(this);
btn.setText("btn #" + i);
btn.setTextColor(getResources().getColor(R.color.White));
ll.addView(btn);
mainLinearLayout.addView(ll);
FixLayout.addView(mainLinearLayout);