学习Android UI

Frame Layout Tutorial With Example In Android Studio

Frame Layout is one of the simplest layout to organize view controls. They are designed to block an area on the screen. Frame Layout should be used to hold child view, because it can be difficult to display single views at a specific area on the screen without overlapping each other.

We can add multiple children to a 框架布局 and control their position by assigning gravity to each child, using the android:layout_gravity attribute.

Android中的框架布局

Attributes of Frame Layout:

Lets see different properties of Frame Layout which will be used while designing Android App UI:

1. android:id

This is the unique id which identifies the layout in the R.Java语言 file.

Below is the id attribute’s example with explanation included in which we define the id for Frame Layout.

2. android:foreground

Foreground defines the drawable to draw over the content and this may be a color value. Possible color values can be in the form of “#rgb”, “#argb”, “#rrggbb”, or “#aarrggbb”. This all are different color code model used.

Example: In Below example of foreground we set the green color for foreground of frameLayout so the 图片框 and other child views of this layout will not be shown.











<文本视图
android:layout_width="match_parent"
android:layout\u height=“包装内容”
android:gravity="center_horizontal"
android:text="abhiAndroid"/>



</框架布局>

Android中的前景属性示例
Important Note: On applying android:foregroud feature, all the views taken in the 框架布局 将转到背景，框架布局位于前景，即视图上方。我们可以设置@drawable/image\u名称或前景中的颜色。

3、android：前地面重力

这定义了要应用于前景可绘制的重力。重力的默认值为“填充”。我们可以以“top”、“center\u vertical”、“fill\u vertical”、“center\u horizontal”、“fill\u horizontal”、“center”、“fill”、“clip\u vertical”、“clip\u horizontal”、“bottom”、“left”或“right”的形式设置值。

用于设置前景的重力。我们还可以使用“|”设置多个值。例如：填充水平|顶部。fill\u horizontal和top gravity都设置为framelayout。

在上面相同的前景示例中，我们还将FrameLayout的foregroundGravity设置为fill。

4、android：可见性

这决定了是使视图可见、不可见还是消失。

可见– 视图存在且可见

不可见– 视图存在但不可见

消失– 视图既不存在也不可见

Android中的可见性属性
5、android：测量儿童

这决定了是测量所有子级，包括“已消失”状态的可见性，还是仅测量处于测量可见性的可见或不可见状态的子级。measureallchildren的默认值为false。我们可以以布尔形式设置值，即“真”或“假”。

这也可以是对资源的引用（格式为“@[包裹:]类型:名称“”或主题属性（格式为“”）[包裹:][类型:]名称）包含此类型的值。

Important Note: 如果measureallchildren设置为true，则即使视图可见性处于消失状态，它也会显示框架布局的实际宽度和高度。

上述财产解释如下：

具有measureAllChildren属性的框架布局示例：

在以下代码中 图片框 可见性设置为“消失”，measureAllChildren设置为“真”。输出将显示框架布局的实际高度和宽度，尽管可见性设置为消失。我们使用Toast来显示高度和宽度：

下面是activity\u main的代码。xml

Important Note: 确保您在Drawable文件夹中有图像。在我们的例子中，我们使用了在Drawable中添加的ic\U启动器图像。



    

以下是MainActivity的代码。Java语言 . 这里我们使用Toast在屏幕上显示高度和宽度。


公共类MainActivity扩展活动{
    @覆盖
    创建时受保护的void（Bundle savedInstanceState）{
        超级的onCreate（savedInstanceState）；
        setContentView（R.layout.demo）；
        FrameLayout frame=（FrameLayout）findViewById（R.id.frame）；
        框架度量（View.MeasureSpec.UNSPECIFIED，View.MeasureSpec.UNSPECIFIED）；
        int width=帧。getMeasuredWidth（）；
        int height=帧。getMeasuredHeight（）；
        干杯makeText（getApplicationContext（），“width=”+width+“height=”+height，Toast。LENGTH\u SHORT）。show（）；

    }

}


在Emulator中运行应用程序时，您将看到以下输出：


Android中的measureAllChildren属性示例
示例说明: 它测量布局中的所有子级。例如：如果我们将某个视图的Visibility设置为gone，并将measuresAllChildren属性设置为true，则它也将计入不可见的视图，但如果我们将measuresAllChildren属性设置为false，则它将不计入gone的视图。


自己要做的事情： 尝试将measuresAllChildren值更改为false，然后在Emulator中运行应用程序。您将看到输出显示0帧布局的宽度和高度。




Android Studio中的框架布局示例：


示例1： 使用布局重力进行框架布局。在这里，我们将 文本视图 在框架布局中的不同位置。以下是代码和最终输出：


下载代码 ? 


使用重力的框架布局示例
步骤1： 创建新项目 在里面 Android Studio 并将其命名为FrameTesting。（选择文件->新建->新建项目。填写表格并单击“完成” button)


第2步： 现在打开res->layout->activity\u main。xml 并添加以下代码。在这里，我们把不同的 文本框 框架内布局。





    
    
    
    
    
    
    
    
    
</框架布局>


步骤3： 让主活动。Java语言 has default Android code or add the below code:


package abhiandroid.com.frametesting;

导入android。支持v7.app。AppCompatActivity；
导入android。操作系统。捆

公共类MainActivity扩展了AppCompatActivity{

    @覆盖
    创建时受保护的void（Bundle savedInstanceState）{
        超级的onCreate（savedInstanceState）；
        setContentView（R.layout.activity\u main）；
    }
}


Output:


Run the App in Emulator, you will see Textview positioned at various position in FrameLayout


使用重力的框架布局示例
Example 2: Example of A Frame Layout without using layout gravity. Here we will use a image to fill complete screen and then we will write “abhiandroid” text in center of the image. We will do all this inside Frame Layout. Below is the code and final output:


下载代码 ? 


无重力的框架布局示例
步骤1： 创建新项目 and name it FrameWithoutGravity.


Select File -> New -> New Project in Android Studio. Fill the forms and click “Finish” button.


第2步： Now open res -> layout -> activity_main.xml and add following code. Here we are designing 图片框 and TextView inside Frame Layout.


Important Note: Make sure you have an image saved in drawable folder name img_name. If you have saved other image with different name then please change it in the code.



    
    <文本视图
        android:layout\u width=“填充父对象”
        android:layout\u height=“填充父对象”
        android:gravity=“中心”
        android:text=“abhiAndroid”
        android:textSize=“30sp”
        android:textColor=“#f3f3f3”
        android:textStyle=“bold”/>
</框架布局>


步骤3： 让主活动。Java语言 具有默认java代码或添加以下代码：


包装abhiandroid。通用域名格式。无重力的框架；

导入android。支持v7.app。AppCompatActivity；
导入android。操作系统。捆

公共类MainActivity扩展了AppCompatActivity{

    @覆盖
    创建时受保护的void（Bundle savedInstanceState）{
        超级的onCreate（savedInstanceState）；
        setContentView（R.layout.activity\u main）；
    }
}


Output:


现在在Emulator中运行应用程序，您将看到以下无重力框架布局的输出：


无重力的框架布局示例
示例3（奖金）： 以编程方式创建框架布局的另一个示例（即仅使用Java类）。在这里，我们将创建与上面相同的输出，但不使用 xml. 相反，我们将使用JAVA类。以下是代码和最终输出：


下载代码  ? 


使用JAVA代码输出的框架布局示例
步骤1： 创建新项目 在Android Studio中。在本例中，我们创建了FrameLayoutJAVA。


第2步： 只需将以下代码添加到MainActivity。Java语言解释作为注释包含在代码中。


包装abhiandroid。通用域名格式。farmelayoutjava；

导入android。图样颜色
导入android。图样字体；
导入android。操作系统。捆
导入android。应用程序。活动
导入android。看法重力
导入android。看法菜单
导入android。小装置。AbsListView；
导入android。小装置。框架布局；
导入android。小装置。ImageView；
导入android。小装置。RelativeLayout；
导入android。小装置。文本视图；

公共类MainActivity扩展活动{
    @覆盖
    创建时受保护的void（Bundle savedInstanceState）{
        超级的onCreate（savedInstanceState）；
        ImageView ImageView=新ImageView（此）；
        imageView。setImageResource（R.drawable.img\u名称）；
        imageView。设置缩放类型（ImageView.ScaleType.FIT\u XY）；
        imageView。setLayoutParams（新建FrameLayout.LayoutParams（FrameLayout.LayoutParams.MATCH\u父级，
                RelativeLayout.LayoutParams.MATCH_PARENT));
        TextView textView1=新建TextView（此）；
        textView1.setText("abhiAndroid");
        textView1.setTextSize(30);
        textView1.setGravity(Gravity.CENTER);
        textView1.setTextColor(Color.parseColor("#f3f3f3"));
        textView1.setTypeface(null, Typeface.BOLD);
        textView1.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
                RelativeLayout.LayoutParams.MATCH_PARENT));
        FrameLayout.LayoutParams lp1 = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.WRAP_CONTENT);
        lp1.setMargins(0,20,0,0);
        textView1.setLayoutParams(lp1);

//Initializing frame layout

        FrameLayout framelayout = new FrameLayout(this);
        framelayout.setLayoutParams(new AbsListView.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
                FrameLayout.LayoutParams.MATCH_PARENT));

//Adding views to FrameLayout

        framelayout.addView(imageView);
        framelayout.addView(textView1);
        setContentView(framelayout);
    }


}


Output:


使用JAVA代码输出的框架布局示例







		
		

			

					

					

						
	
								
							

																

																		
		

			


				

					

				

				

					
下载此 免费的 电子书！

				

				

					
这本免费电子书将帮助您在Android Studio中掌握Android应用程序开发的学习！

				

				

					

						
		
			
										

				

				

									

			

			

									

												
											


									

			

			
					

	


		


					

				

					

						

							

								

									

									

									

									

								

							

						

					

					

				

			

	
			


			
	



		

			



		












			

			3 thoughts on “Frame Layout Tutorial With Example In Android Studio”		


		
		
    
					
  1. 
			
		
    2. 
		
  2. 
			
    
				

				
    
					
    in the second line of this tutorial :
    
“Frame Layout should be used to hold child view, because it can be difficult to display single views at a specific area on the screen without overlapping each other.”
    

    there is a mistake . frame layout should be used to hold “ONE” child view , …………
    

    it should be ONE child view.
    
				
    

							
    
		
    3. 
		
  3. 
			
		
    4. 
		


		
	
	
		

		
Leave a Reply 
Your email address will not be published. Required fields are marked *
 
 



 


 


 


	

	


        







Continue Reading:

免费下载-主Android应用程序开发侧栏

下载此 免费的 电子书！

这本免费电子书将帮助您在Android Studio中掌握Android应用程序开发的学习！
关闭链接

Android开发者Facebook群免费

让我们连接

阿披实·赛尼 嗨，我是阿披舍克，这个网站的创始人和所有者。我相信团队合作，有一个经验丰富的开发团队正在开发AbhiAndroid，其任务是简化Android应用程序开发的学习。
与我联系：
脸谱网 | INSTAGRAM

与AbhiAndroid连接

脸谱网啁啾

©Abhi Android| 条款 | 隐私政策

下载此 免费的 电子书！

这本免费电子书将帮助您在Android Studio中掌握Android应用程序开发的学习！
关闭链接

下载此 免费的 电子书！

这本免费电子书将帮助您在Android Studio中掌握Android应用程序开发的学习！
关闭链接

下载此 免费的 电子书！

这本免费电子书将帮助您在Android Studio中掌握Android应用程序开发的学习！
立即下载
关闭链接

看看AbhiAndroid　一步一步地　视频培训帮助您掌握Android应用程序开发

视频培训- 定期添加新内容，逐步解锁视频培训。开发Android应用程序。
Android应用程序源代码- 通过文档获取令人惊叹的电子商务、食品订购和终极WebView源代码。
立即获取访问权限
关闭链接