AndroidStudio界面布局|江阴雨辰互联

2023年7月13日发(作者：)

AndroidStudio界⾯布局1 相对布局 RelativeLayout相对布局的 XML 元素是，相对布局的特点是可以让控件之间互相确定关系，这样可以保证在屏幕的局部范围内⼏个控件之间的关系不受外部影响。具体实例来学习它的⽤法。< Rela tiveLayout xmlns: android= = "/apk/res/android"xmlns: tools= = "/tools"xmlns: app= = "/apk/res- - auto"android :layout_width= "match_parent"android :layout_height= "match_parent"an droid :paddingLeft= "@dimen/activity_horizontal_margin"android :paddingRight= "@dimen/activity_horizontal_margin"android :paddingTop= "@dimen/activity_vertical_margin"android :paddingBottom= "@dimen/activity_vertical_margin"app :layout_behavior= "@string/appbar_scrolling_view_behavior"tools :showIn= "@layout/activity_main" tools :context= ".MainActivity"> 靠左最顶端是⼀个说明⽂本< TextView android :text=" " 布局种类" "android :id= "@+id/tvButtons"android :layout_alignParentTop= "true" ----对齐到⽗ UI 的顶端android :layout_alignParentLeft= "true" ---对齐到⽗ UI 的左端android :layout_width= "wrap_content"android :layout_height= "wrap_content" />< Buttonandroid :layout_width= "wrap_content"android :layout_height= "wrap_content"android :te xt=" " 帧" "android :id= "@+id/btnFrame"android :onClick= "btnFrameClick"android :layout_below= "@+id/tvButtons"----位于⽂本框 tvButtons 之下android :layout_alignLeft= "@+id/tvButtons"/>--与⽂本框 tvButtons 左边缘对齐< Buttonandroid :layout_width= "wrap _content"android :layout_height= "wrap_content"android :text=" " 线性" "android :id= "@+id/btnLinear" android :onClick= "btnLinearClick"android :layout_alignTop= "@+id/btnFrame"android :layout_alignBottom= "@+id/btnFrame"android :layout_toRightOf= "@+id/btnFrame"/>----位于【线性】按钮右侧< Buttonandroid :layout_width= "wrap_content"android :layout_height= "wrap_content"android :text=" " 表格" "android :id= "@+id/btnTable"android :onClick= "btn TableClick"android :layout_alignTop= "@+id/btnFrame"android :layout_alignBottom= "@+id/btnFrame"android :layout_toRightOf= "@+id/btnLinear"/>< Buttonandroid :layout_width= "wrap_content"android :layout_height= "wrap_c ontent"android :layout_height= "wrap_c ontent"android :text=" " ⽹格" "android :id= "@+id/btnGrid"android :onClick=" " btnGridClick" "android :layout_alignTop= "@+id/btnFrame"android :layout_alignBottom= "@+id/btnFrame"android :layout_toRightOf= "@+id/btnTable"/>我们把相对位置属性总结⼀下：(1)属性值为 true 或 falseandroid:layout_centerHrizontal ⽔平居中android:layout_centerVertical 垂直居中android:layout_centerInparent 相对于⽗元素完全居中android:layout_alignParentBottom 贴紧⽗元素的下边缘android:layout_alignParentLeft 贴紧⽗元素的左边缘android:layout_alignParentRight 贴紧⽗元素的右边缘android:layout_alignParentTop 贴紧⽗元素的上边缘android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以⽗元素做参照物(2)属性值必须为 id 的引⽤名“@id/id-name”android:layout_below 在某元素的下⽅android:layout_above 在某元素的的上⽅android:layout_toLeftOf 在某元素的左边android:layout_toRightOf 在某元素的右边android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐(3)属性值为具体的像素值，如 30dip，40pxandroid:layout_marginBottom 离某元素底边缘的距离android:layout_marginLeft 离某元素左边缘的距离android:layout_marginRight 离某元素右边缘的距离android:layout_marginTop 离某元素上边缘的距离2 帧布局 FrameLayout设计 FrameLayout 是为了显⽰单⼀项 view。通常，不建议使⽤ FrameLayout 显⽰多项内容。因为它们的布局很难调节，不⽤ layout_gravity 属性的话，多项内容会重叠；使⽤layout_gravity 的话，能设置不同的位置。我们⽤到 FrameLayout 的场合不多，这⾥就⽤ FrameLayout 的特点演⽰⼀个动画的例⼦。在 ut 上单击右键，在弹出菜单上选择new->Activity->Blank Activity，新建⼀个名为 FrameActivity。把布局⽂件 content_ 的布局改为 FrameLayout，然后给它定义名称： android :id= "@+id/myFrame"修改后的结果：< FrameLayout xmlns: android= = "ht tp:///apk/res/android"xmlns: tools= = "/tools"xmlns: app= = "/apk/res- - auto"android :layout_width= "match_parent"android :layout_height= "match_parent"android :paddingLeft= "@dimen/ac tivity_horizontal_margin"android :paddingRight= "@dimen/activity_horizontal_margin"android :paddingTop= "@dimen/activity_vertical_margin"android :paddingBottom= "@dimen/activity_vertical_margin"android :id= "@+id/myFrame"app :layout_behavio r= "@string/appbar_scrolling_view_behavior"tools :showIn= "@layout/activity_frame"tools :context= "ctivity">把⽰例项⽬的 8 个图⽚ m1-m8 拷贝到 appresdrawalbe 下，然后在 FrameActivty 编写代码。1.⾸先定义帧布局：FrameLayout frame = null;然后在 FrameActivity 启动时候实例化这个 frame：frame = (FrameLayout)findViewById(. myFrame );2.编写定时器⽅法 new Timer().schedule(参数 1，参数 2，参数 3)；第⼀个参数是要执⾏的线程任务：new TimerTask() {@Overridepublic void run() {//发送⼀条信息来通知系统改变前景图⽚ptyMessage(0x123);}}这个线程执⾏的任务很简单，就是 ptyMessage(0x123);稍后分析它。第⼆个参数是这个线程启动后延迟多少微秒后才执⾏这个任务，为 0 表⽰⽴即执⾏；第三个参数是间隔多少微秒执⾏⼀次，这⾥是 200 微秒。完整的定时器⽅法如下：new Timer().schedule( new TimerTask() {@Overridepublic void run() {//发送⼀条信息来通知系统改变前景图⽚ptyMessage(0x123);}}, 0,200);3.编写⼀个⽅法 ChangeImage(int i)，它根据传⼊的值 i 设置上⽂定义的 frame 的前景图应该是哪个图⽚。getResources().getDrawable(le. m1 )是取到图⽚资源⽂件夹drawable 下的图⽚，在程序⾥不⽤写图⽚扩展名，会⾃动识别图⽚种类。void ChangeImage( int i){Drawable a = getResources().getDrawable(le. m1 );Drawable b = getResources().getDrawable(le. m2 );Drawable c = getResources().getDrawable(le. m3 );Drawable d = getResources().getDrawable(le. m4 );Drawable e = getResources().getDrawable(le. m5 );Drawable f = getResources().getDrawable(le. m6 );Drawable g = getResources().getDrawable(le. m7 );Drawable h = getResources().getDrawable(le. m8 );switch(i){case 0:eground(a); break;case 1:eground(b);break;case 2:eground(c);break;case 3:eground(d);break;case 4:eground(e);break;case 5:eground(f);break;case 6:eground(g);break;case 7:eground(h);break;}}4. 因为⼦线程⽆法直接更新 UI，就⽤上⽂提到的 Handler ⽅法可以在⼦线程中直接⽤来更新 UI。所有 FrameActivity 代码如下：public class FrameActivity extends AppCompatActivity {FrameLayout frame = null;//⾃定义⼀个⽤于定时更新 UI 界⾯的 handler 类对象Handler handler = new Handler(){int i = 0;@Overridepublic void handleMessage(Message msg) {//判断信息是否为本应⽤发出的if(msg. what == 0x123){ChangeImage(i i);i i++;if(i i==8) i i=0;}Message(msg);} };@Overrideprotected void onCreate(Bundle savedInstanceState) {te(savedInstanceState);setContentView(. activity_frame );frame = (FrameLayout)findViewById(. myFrame );//定义⼀个定时器对象,定时发送信息给 handlernew Timer().schedule( new TimerTask() {@Overridepublic void run() {//发送⼀条信息来通知系统改变前景图⽚ptyMessage(0x123);}}, 0,200);}void ChangeImage( int i){Drawable a = getResources().getDrawable(le. m1 );Drawable b = getResources().getDrawable(le. m2 );Drawable c = getResources().getDrawable(le. m3 );Drawable d = getResources().getDrawable(le. m4 );Drawable e = getResources().getDrawable(le. m5 );Drawable f = getResources().getDrawable(le. m6 );Drawable g = getResources().getDrawable(le. m7 );Drawable h = getResources().getDrawable(le. m8 );switch(i){case 0:eground(a);break;case 1:eground(b);break;case 2:eground(c);break;case 3:eground(d);break;case 4:eground(e);break;case 5: fra eground(f);break;case 6:eground(g);break;case 7:eground(h);break;}}}3 线性布局 LinearLayout这是⼀个线性布局的例⼦，线性布局⾥的控件以在 XML 出现的顺序出现在屏幕上。线性布局⾥的控件是从左到右⽔平排列，还是从上⾄下竖直排列是由属性android:orientation 决定的，当它值为"horizontal"时控件是在⽔平⼀直排列，不会转到下⼀⾏；当它值为"vertical"时控件⾄上⽽下排列4 表格布局 Table Layout这种布局和 Office ⾥的制作表格类似，把布局看作⼀个表格，控件放置在每个单元格⾥。表格⾏的最⼤⾏⾼与该⾏最⾼控件匹配；表格最宽的列与该列最宽控件匹配。如下⾯例⼦按钮宽度和⾼度设为适应⽂本内容，每个控件在单元格⾥。< TableLayoutandroid :layout_width= "match_parent"android :layout_height= "wrap_content"android :layout_gravity= "center_horizontal"xmlns: android= = "/apk/res/android">< TableRow>< Buttonandroid :layout_width= "wrap_content"android :layout_height= "wrap_content"android :text=" " 按钮 1"android :id= "@+id/btn1" />< Button android :layout_width= "wrap_content" "android :layout_height= "wrap_content"android :text=" " 按钮 2"android :id= "@+id/btn2" />< Buttonandroid :layout_width= "wrap_content"android :layout_height= "wrap_content"android :te xt=" " 按钮 3"android :id= "@+id/btn3" />< TableRow>< Buttonandroid :layout_width= "wrap_content"android :layout_height= "wrap_content"android :text=" " 按钮 4"android :id= "@+id/btn4" />< Buttonandroid :layout_width= "wrap_content"android :layout_height= "wrap_content"android :text=" " 按钮 5"android :id= "@+id/btn5" />< Buttonandroid :layout_width= "wrap_content"android :layout_height= "wrap_content"android :text=" " 按钮 6"android :id= "@+id/btn6" />< Buttonandroid :layout_width= "wrap_content"android :layout_height= "wrap_content"android :text=" " 按钮 7 7" "android :id= "@+id/btn7" />当把按钮 5 的宽和⾼修改为下⾯值，尺⼨明显⼤于其它按钮，则改⾏的⾼和该列的⾼以按钮 5 为准。5 ⽹格布局 GridLayout⽹格布局虽然和表格布局类似，但⽐表格更灵活。⽹格布局⼦控件放置在⾥，⼦控件坐标确定⾃⼰在⽹格位置，即所在的⾏和列，元素还可以跨⾏、跨列。如果控件需要 3 ⾏ 3 列的布局，控件坐标如下表所⽰。0，0 0，1 0，21，0 1，1 1，22，0 2，1 2，2⼦控件的属性 android:layout_row 和 android:layout_column 分别表⽰⾏和列的坐标。跨⾏和跨列分别⽤属性 android:layout_columnSpan 和 android:layout_rowSpan 表⽰。我们看⼀个例⼦，如果按钮按如图所⽰排列，按钮 4 跨第 1 列的第2、3 ⾏，按钮 5 跨第 2 ⾏的 2、3 列。< GridLayoutxmlns: android= = "/apk/res/android"android :layout_width= "match_parent" android :layout_heigh t= "match_parent">< Buttonandroid :layout_row= "0"android :layout_column= "0"android :layout_width= "wrap_content"android :layout_height= "wrap_content"android :text=" " 按钮 1"android :id= "@+id/btn1" />< Button nandroid :layout_row= "0"android :layout_column= "1"android :layout_width= "wrap_content"android :layout_height= "wrap_content"android :text=" " 按钮 2"android :id= "@+id/btn2" />< Button android :layout_row= = "0"android :layout_column= "2"android :layout_width= "wrap_content"android :layout_height= "wrap_content"android :text=" " 按钮 3"android :id= "@+id/btn3" />< Buttonandroid :layout_row= "1"android :layout_c olumn= "0"android :layout_rowSpan= "2"android :layout_width= "wrap_content"android :layout_height= "100dp"android :text=" " 按钮 4"android :id= "@+id/btn4"/>< Buttonandroid :layout_row= "1"android :layout_co lumn= "1"android :layout_columnSpan= "2"android :layout_width= "175dp"android :layout_height= "wrap_content"android :text=" " 按钮 5"android :id= "@+id/btn5" />< Buttonandroid :layout_row= "2"android :layout _column= "1"android :layout_width= "wrap_content"android :layout_height= "wrap_content"android :text=" " 按钮 6"android :id= "@+id/btn6"/>< Buttonandroid :layout_row= "2"android :layout_column= "2"android :la yout_width= "wrap_content"android :layout_height= "wrap_content"android :text=" " 按钮 7"android :id= "@+id/btn7" />