android样式布局

<p>初学android,感觉还是比较轻松的。当然,如果没有好好的去在自己的电脑上实现的话,估计也会搞得自己稀里糊涂的。下面是我在学习Android布局样式的一些总结(个人这样认为),当然,在其中也借鉴了其他的学习资料,现在与大家分享一下。学习中,我分别学习了Android的四种布局样式分别为:</p><p>1.LinearLayout(线性布局)</p><p>2.RelativeLayout (相对布局)</p><p>3.TableLayout (表格布局)</p><p>4.FrameLayout (帧布局)</p><p>下面逐一介绍一下:</p><p>1.LinearLayout(线性布局)</p><p>&quot; LinearLayout &quot;翻译成中文是&quot;线性布局&quot;,所谓线性布局就是在该标签下的所有子元素会根据其 orientation 属性的值来决定是按行或者是按列逐个显示。</p><p>示例main.xml布局文件如下:</p><pre class="brush:as3;toolbar:false">&lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;LinearLayout xmlns:android&quot;http://schemas.android.com/apk/res/android&quot; android:orientation=&quot;vertical&quot; android:layout_width=&quot;fill_parent&quot; android:layout_height=&quot;fill_parent&quot; &gt; &lt;TextView android:layout_width=&quot;fill_parent&quot; android:layout_height=&quot;wrap_content&quot; android:text=&quot;@string/name_text&quot; /&gt; &lt;EditText android:layout_width=&quot;fill_parent&quot; android:layout_height=&quot;wrap_content&quot;/&gt; &lt;Button android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:text=&quot;@string/cancle_button&quot; /&gt; &lt;Button android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:text=&quot;@string/ok_button&quot;/&gt; &lt;/LinearLayout&gt;</pre><p><br/></p><p>其对应 strings.xml 内容如下:</p><pre class="brush:as3;toolbar:false">&lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;resources&gt; &lt;stringname=&quot;hello&quot;&gt;HelloWorld,UIActivity!&lt;/string&gt; &lt;stringname=&quot;app_name&quot;&gt;用户界面&lt;/string&gt; &lt;stringname=&quot;name_text&quot;&gt;请输入用户名&lt;/string&gt; &lt;stringname=&quot;ok_button&quot;&gt;确定&lt;/string&gt; &lt;stringname=&quot;cancle_button&quot;&gt;取消&lt;/string&gt; &lt;/resources&gt;</pre><p><br/></p><p>运行后,如下图:</p><p>&quot; xmlns:android &quot;指定命名空间,顶级元素必须指定命名空间。而在该命名空间中的控件的属性如 layout_width ,要在属性前加上&quot;android :&quot;做前缀。</p><p>&quot; layout_width &quot;指定该元素的宽度,可选值有三种,&quot; fill_parent &quot;、&quot; wrap_content &quot;、具体数字(单位为 px )。其中&quot; fill_parent &quot;代表填满其父元素,对于顶级元素来说,其父元素就是整个手机屏幕。&quot; wrap_content &quot;代表该元素的大小仅包裹其自身内容,而数字则代表其占相应的 px 。</p><p>&quot; layout_height &quot;指定该元素的高度,可选参数值与&quot; layout_width &quot;的参数意义相同。</p><p>&quot; orientation &quot;指定子元素排列方式,其中指定为&quot; vertical &quot;则是子元素垂直排列,每个子元素会占独立的一行,如上图,而另一个可选值为&quot; horizontal &quot;代表子元素水平排列,即每个子元素会占独立的一列。示例 main.xml 布局文件如下。其对应的</p><p>strings.xml 内容不变。</p><p>main .xml </p><pre class="brush:as3;toolbar:false">&lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:orientation=&quot;horizontal&quot; android:layout_width=&quot;fill_parent&quot; android:layout_height=&quot;fill_parent&quot; &gt; &lt;TextView android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;fill_parent&quot; android:text=&quot;@string/name_text&quot; /&gt; &lt;EditText android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot;/&gt; &lt;Button android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:text=&quot;@string/cancle_button&quot; /&gt; &lt;Button android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:text=&quot;@string/ok_button&quot;/&gt; &lt;/LinearLayout&gt;</pre><p><br/></p><p>运行后,如下图:</p><p>2.RelativeLayout (相对布局)</p><p>相对布局中的视图组件是按相互之间的相对位置来确定的, 并不是线性布局中的必须</p><p>按行或按列单个显示。示例布局文件如下:</p><p>main.xml</p><pre class="brush:as3;toolbar:false">&lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:layout_width=&quot;fill_parent&quot; android:layout_height=&quot;fill_parent&quot; &gt; &lt;TextView android:layout_width=&quot;fill_parent&quot; android:layout_height=&quot;wrap_content&quot; android:text=&quot;@string/name_text&quot; android:id=&quot;@+id/text&quot;/&gt; &lt;EditText android:layout_width=&quot;fill_parent&quot; android:layout_height=&quot;wrap_content&quot; android:layout_below=&quot;@id/text&quot; android:id=&quot;@+id/edit&quot;/&gt; &lt;Button android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:text=&quot;@string/cancle_button&quot; android:layout_alignParentRight=&quot;true&quot; android:layout_below=&quot;@id/edit&quot; android:id=&quot;@+id/cancle&quot;/&gt; &lt;Button android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:layout_toLeftOf=&quot;@id/cancle&quot; android:layout_alignTop=&quot;@id/cancle&quot; android:text=&quot;@string/ok_button&quot;/&gt; &lt;/RelativeLayout&gt;</pre><p><br/></p><p>说明:</p><p>android:layout_below=&quot;@id/text&quot; :将该元素放到 id 为 text 的元素的下面</p><p>android:layout_toLeftOf=&quot;@id/ok&quot; :放到 id 为 ok 的元素左边</p><p>android:layout_alignTop=&quot;@id/ok&quot; :对齐 id 为 ok 的元素的顶部</p><p>还有很多关于相对位置的字段,希望大家能够自己去发现</p><p>界面效果如图:</p><p>案例二:梅花效果</p><p>问题:利用相对布局实现下面的效果</p><p>案例分析:</p><p>我们可以从途中看出,四周的方框的角都与中间的方框相连,而且呈现出X字样.试想,中间的是不是有什么特殊含义?</p><p>好,养我们做一个假设:假设中间的方框为相对对象,那么各个方框如何表示呢?拿左上角的方框为例,它的位置是:既中间方框的上面又是中间方框的左边.好,那么其他的是不是可以同样再这样表示呢?答案是肯定的.按照这个思路,我们试着把代码写出来:</p><p>main.xml</p><pre class="brush:as3;toolbar:false">&lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;RelativeLayoutxmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;match_parent&quot;&gt; &lt;TextView android:id=&quot;@+id/center&quot; android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:layout_centerInParent=&quot;true&quot; android:background=&quot;@drawable/meihua&quot;/&gt; &lt;TextView android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:layout_above=&quot;@id/center&quot; android:layout_toLeftOf=&quot;@id/center&quot; android:background=&quot;@drawable/meihua&quot;/&gt; &lt;TextView android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:layout_above=&quot;@id/center&quot; android:layout_toRightOf=&quot;@id/center&quot; android:background=&quot;@drawable/meihua&quot;/&gt; &lt;TextView android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:layout_below=&quot;@id/center&quot; android:layout_toLeftOf=&quot;@id/center&quot; android:background=&quot;@drawable/meihua&quot;/&gt; &lt;TextView android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:layout_below=&quot;@id/center&quot; android:layout_toRightOf=&quot;@id/center&quot; android:background=&quot;@drawable/meihua&quot;/&gt; &lt;/RelativeLayout&gt;</pre><p><br/></p><p>运行图为:</p><p>android:layout_centerInParent=&quot;true&quot; 图片垂直水平居中</p><p>android:background=&quot;@drawable/meihua&quot;将该元素的id放到background下,&quot;meihua&quot;是我拷入的图片文件</p><p>3.TableLayout (表格布局)</p><p>表格布局的风格跟 HTML 中的表格比较接近,只是所采用的标签不同。</p><p>□&lt;TableLayout &gt; 是顶级元素,采用的是表格布局</p><p>□ &lt;TableRow&gt; 定义一个行</p><p>□ &lt;TextView &gt; 定义一个单元格的内容</p><p>示例main.xml布局文件内容如下:</p><pre class="brush:as3;toolbar:false">&lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;TableLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android android:layout_width=&quot;fill_parent&quot; android:layout_height=&quot;fill_parent&quot; android:stretchColumns=&quot;0,1,2,3&quot; &gt; &lt;TableRow&gt; &lt;TextView android:text=&quot;@string/name&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;TextView android:text=&quot;@string/gender&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;TextView android:text=&quot;@string/age&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;TextView android:text=&quot;@string/phonenum&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;/TableRow&gt; &lt;TableRow&gt; &lt;TextView android:text=&quot;@string/name1&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;TextView android:text=&quot;@string/gender1&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;TextView android:text=&quot;@string/age1&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;TextView android:text=&quot;@string/phonenum1&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;/TableRow&gt; &lt;TableRow&gt; &lt;TextView android:text=&quot;@string/name2&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;TextView android:text=&quot;@string/gender1&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;TextView android:text=&quot;@string/age2&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;TextView android:text=&quot;@string/phonenum2&quot; android:gravity=&quot;center&quot; android:padding=&quot;3dip&quot;/&gt; &lt;/TableRow&gt; &lt;/TableLayout&gt;</pre><p>□ android:stretchColumns=&quot;0,1,2,3&quot;</p><p>该属性指定每行都由第&quot; 0 、 1 、 2 、 3 &quot;列占满空白空间。</p><p>□ gravity 指定文字对齐方式,案例都设为居中对齐。</p><p>□ padding 指定视图与视图内容间的空隙,单位为像素。</p><p>对应的 strings.xml 文件内容如下:</p><pre class="brush:as3;toolbar:false">&lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;resources&gt; &lt;stringname=&quot;name&quot;&gt;姓名&lt;/string&gt; &lt;stringname=&quot;gender&quot;&gt;性别&lt;/string&gt; &lt;stringname=&quot;age&quot;&gt;年龄&lt;/string&gt; &lt;stringname=&quot;phonenum&quot;&gt;电话&lt;/string&gt; &lt;stringname=&quot;gender1&quot;&gt;男&lt;/string&gt; &lt;stringname=&quot;gender2&quot;&gt;女&lt;/string&gt; &lt;stringname=&quot;name1&quot;&gt;张三&lt;/string&gt; &lt;stringname=&quot;age1&quot;&gt;25&lt;/string&gt; &lt;stringname=&quot;phonenum1&quot;&gt;1234567&lt;/string&gt; &lt;stringname=&quot;name2&quot;&gt;李四&lt;/string&gt; &lt;stringname=&quot;age2&quot;&gt;24&lt;/string&gt; &lt;stringname=&quot;phonenum2&quot;&gt;7654321&lt;/string&gt; &lt;/resources&gt;</pre><p><br/></p><p>界面效果如下:</p><p>4.FrameLayout (帧布局)</p><p>帧布局中的每一个组件都代表一个画面,默认以屏幕左上角作为( 0,0 )坐标,按组件定义的先后顺序依次逐屏显示 , 后面出现的会覆盖前面的画面 。 用该布局可以实现动画效果 。</p><p>接下来,我们用三幅图片实现一只小鸟飞翔的动画效果。三张图片如下:</p><p>编写的mail.xml文件:</p><pre class="brush:as3;toolbar:false">&lt;FrameLayoutxmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:layout_gravity=&quot;center&quot; android:id=&quot;@+id/frame&quot; &gt; &lt;/FrameLayout&gt;</pre><p>在该布局文件中定义一个 id 为 frame 的帧布局文件。</p><p>编写 FreamTestActivity.java 类</p><pre class="brush:as3;toolbar:false">&lt;spanstyle=&quot;font-size:16px;&quot;&gt;packagecn.class3g; importandroid.app.Activity; importandroid.graphics.drawable.Drawable; importandroid.os.Bundle; importandroid.os.Handler; importandroid.os.Message; importandroid.view.View; importandroid.view.View.OnClickListener; importandroid.widget.FrameLayout; publicclassFreamTestActivityextendsActivity{ FrameLayoutframe=null; booleanflag=true; classMyHandlerextendsHandler{ inti=0; publicvoidhandleMessage(Messagemsg){ i++; show(i%3); sleep(50); } publicvoidsleep(longdelayMillis){ if(flag){ this.sendMessageDelayed(this.obtainMessage(0),delayMillis); } } } voidshow(inti){ Drawablea=getResources().getDrawable(R.drawable.a1); Drawableb=getResources().getDrawable(R.drawable.a2); Drawablec=getResources().getDrawable(R.drawable.a3); switch(i){ case0: frame.setForeground(a); break; case1: frame.setForeground(b); break; case2: frame.setForeground(c); break; } } publicvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.main); frame=(FrameLayout)findViewById(R.id.frame); finalMyHandlermyHandler=newMyHandler(); myHandler.sleep(50); frame.setOnClickListener(newOnClickListener(){ publicvoidonClick(Viewarg0){ //TODOAuto-generatedmethodstub flag=!flag; myHandler.sleep(10); } }); } }&lt;/span&gt;</pre><p><br/></p><p>说明:</p><p>由于 FrameLayout 中后出现的 UI 控件会覆盖前面出现的 UI 控件,每次只能显示一个 UI 控件,因此,我们可以通过在 Activity 中对每次显示的图片内容进行切换以实现动画效果 。 或许你会想到开启一条线程来控制切换 , 但在非主线程中不能更新 UI 界面 , 所以 , 我们使用了Android 提供的消息通讯类 Handler 。该类可以实现非主线程和负责 UI 的主线程之间的通信 ,进而间接实现非主线程更新 UI 界面。由于 sleep 方法中的sendMessageDelayed(obtainMessage(0), delayMillis); 本身会延迟发送一个消息 , 该消息</p><p>会被框架传递给 handleMessage 事件 。 我们在 handleMessage() 方法中再次调用 sleep() 方法 ,形成一个循环调用 。 在我们对界面进行点击之前 , 两个方法会一直循环调用 。 前景图片也会不断的切换,进而实现动画的效果。</p><p></p><p>点击图片之后,小鸟停止飞翔。</p>
RangeTime:0.006395s
RangeMem:219.55 KB
返回顶部 留言