NewUI

发表时间：2020-10-19

发布人：葵宇科技

浏览次数：51

New UI-构造之LinearLayout(线性构造)详解
——转载请注明出处:coder-pig,迎接转载,请勿用于贸易用处!

小猪Android开辟交换群已建立,迎接大年夜家参加,无论是新手,菜鸟,大年夜神都可以,小猪一小我的

力量毕竟是有限的,写出来的器械肯定话苄很多忽略不足,迎接大年夜家指出,集思广益,让小猪的博文
加倍的详尽,帮到更多的人,O(∩_∩)O感谢!

小猪Android开辟交换群:小猪Android开辟交换群群号:421858269
新Android UI实例大年夜全目次:http://blog.csdn.net/coder_pig/article/details/42145907

本节引言:

Android中的构造分为六大年夜构造,分别是:
LinearLayout(线性构造),RelativeLayout(相对构造),TableLayout(表格构造)
FrameLayout(帧构造),AbsoluteLayout(绝对构造),GridLayout(网格构造)
而今天我们要讲解的就是第一个构造,LinearLayout(线性构造),我们屏幕适配的应用
用的比较多的就是LinearLayout的weight(权重属性),在这一节里,我们会具体地解析
下LinearLayout,包含一些根本的属性,Weight属性的应用,以及比例若何计算,别的还
会说下一用的比较少的属性:android:divider绘制下划线

本节进修图:

[img]http://img.blog.csdn.net/20150103132254125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY29kZXJfcGln/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

2.weight(权重)属性

①最简荡竽暌姑法:

如图:
[img]http://img.blog.csdn.net/20150103132504359[img]http://img.blog.csdn.net/20150103132522460

实现代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/LinearLayout1"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="horizontal"     
    >  
      
    <LinearLayout  
        android:layout_width="0dp"  
        android:layout_height="fill_parent"  
        android:background="#ADFF2F"   
        android:layout_weight="1"/>  
     
      
    <LinearLayout  
        android:layout_width="0dp"  
        android:layout_height="fill_parent"  
        android:background="#DA70D6"   
        android:layout_weight="2"/>  
      
</LinearLayout>

要实现第一个的1:1的效不雅,只须要分别把两个LinearLayout的weight改成1和1就可以了
用法归纳:
按比例划分程度偏向:将涉及到的View的android:width属性设置为0dp,然后设置为android
weight属性设置比例即可;类推,竖直偏向,只需设android:height为0dp,然后设weight属性即可！
大年夜家可以本身写个竖直偏向的等比例划分的体验下简荡竽暌姑法！

②weight属性详解:

当然,如不雅我们不实用上述那种设置为0dp的方法,直接用wrap_content和match_parent的话,
则要接着解析weight属性了,分为两种情况,wrap_content与match_parent！别的还要看
LinearLayout的orientation是程度照样竖直,这个决定哪个偏向等比例划分

1)wrap_content比较简单,直接就按比例的了
[img]http://img.blog.csdn.net/20150103133859699

实现代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/LinearLayout1"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"
    android:orientation="horizontal" >  
  
    <TextView  
        android:layout_weight="1"  
        android:layout_width="wrap_content"  
        android:layout_height="fill_parent"  
        android:text="one"   
        android:background="#98FB98"  
     />  
     <TextView  
        android:layout_weight="2"  
        android:layout_width="wrap_content"  
        android:layout_height="fill_parent"  
        android:text="two"   
        android:background="#FFFF00"  
     />  
     <TextView  
        android:layout_weight="3"  
        android:layout_width="wrap_content"  
        android:layout_height="fill_parent"  
        android:text="three"   
        android:background="#FF00FF"  
     />  
  
</LinearLayout>

2)match_parent(fill_parent):这个责须要计算了
我们写这段简单的代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/LinearLayout1"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent" >  
  
    <TextView  
        android:layout_weight="1"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:text="one"   
        android:background="#98FB98"  
     />  
     <TextView  
        android:layout_weight="2"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:text="two"   
        android:background="#FFFF00"  
     />  
     <TextView  
        android:layout_weight="3"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:text="three"   
        android:background="#FF00FF"  
     />  
  
</LinearLayout>

运行效不雅图:
[img]http://img.blog.csdn.net/20150103134224309

这个时刻就会有疑问了,怎么会如许,这比例是2:1吧,那么three去哪了？代率攀琅绫擎明明有
three的啊,还设置了3的,而1和2的比例也纰谬耶,1:2:3却变成了2:1:0,怎么会如许呢?
答:这里其实没那么简单的,照样须要我们计算的,网上给出的算法有几种,这里就给出笔者
认为比较轻易懂得的一种:
step 1:个个都是fill_parent,然则屏幕只有一个啦,那么1 - 3 = - 2 fill_parent
step 2:依次比例是1/6,2/6,3/6
step 3:先到先得,先分给one,计算: 1 - 2 * (1/6) = 2/3 fill_parent
接着到two,计算: 1 - 2 * (2/6) = 1/3 fill_parent
最后到three,计算 1 - 2 * (3/6) = 0 fill_parent
step 4:所以最后的结不雅是:one占了两份,two占了一份,three什么督杈有
以上就是为什么three没有出现的原因了,或许大年夜家看完照样有点蒙,没事,我们举多几个
例子就知道了:
比例为:1:1:1
[img]http://img.blog.csdn.net/20150103134929859

按照膳绫擎的计算办法算一次,结不雅是:1/3 1/3 1/3,没错
接着我们再试下:2:3:4
[img]http://img.blog.csdn.net/20150103135131464

计算结不雅:5/9 3/9 1/9,比较效不雅图,5:3:1,也没错,所以这个计算办法你可得mark下了!

③Java代码设置weight属性:

setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,   
        LayoutParams.WRAP_CONTENT, 1));

3.为LinearLayout设置瓜分线

很多界面开辟中都邑设置一些下划线,或者瓜分线,大年夜而使得界面加倍整洁美不雅,比如下面的酷狗
音乐的注册页面:
[img]http://img.blog.csdn.net/20150103135703698

对于这种线,我们平日的做法有两种
①直接在构造中添加一个view,这个view的感化仅仅是显示出一条线,代码也很简单:

<View
    android:layout_width="match_parent"
    android:layout_height="1px"
    android:background="#000000" />

这个是程度偏向上的黑线,当然你也可以改成其他色彩,或者应用图片
[img]http://img.blog.csdn.net/20150103140121644

②第二种则是应用LinearLayout的一个divider属性,直接为LinearLayout设置瓜分线
这里就须要你本身预备一张线的图片了
1)android:divider设置作为瓜分线的图片
2)android:showDividers设置瓜分线的地位,none(无),begining(开端),end(停止),middle(每两个组件间)
3)dividerPadding设置瓜分线的Padding
应用示例:
[img]http://img.blog.csdn.net/20150103142734205?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY29kZXJfcGln/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

实现代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@drawable/ktv_line_div"
    android:orientation="vertical"
    android:showDividers="middle"
    android:dividerPadding="10dp"
    tools:context="com.jay.example.linearlayoutdemo.MainActivity" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3" />

</LinearLayout>

上述代码中我们设置了瓜分线的图片,以及设置瓜分线的出现地位,以及设置了padding,就实现了膳绫擎的效不雅!
当然我们也可以在代码中setXxx或者getXxx设置或者获得这些属性的值

4.LinearLayout的简单例子:

[img]http://img.blog.csdn.net/20150103143232805?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY29kZXJfcGln/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

实现代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/LinearLayout1"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:orientation="vertical"  
    tools:context=".MainActivity" >  
      
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="请输入要保存的德律风号码"    
        />  
    <EditText  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"   
        />  
    <LinearLayout  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:orientation="horizontal"  
        android:gravity="right"    
        >  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="保存"  
            />  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="清空"  
        />  
    </LinearLayout>  
</LinearLayout>

5.留意事项:

应用Layout_gravity的一个很重要的问题!!!

这个问题是一个读者有时一次发明反馈给我的,万分感激,同时欲望大年夜家在看小猪博客的时刻可以提出
一些实际开辟中碰到的问题,以及解决方法,好给后来者经验!毕竟小猪不是神,不是什么方方面面都能
推敲到的,感谢！

问题内容:

在一个LinearLayout的程度偏向中安排两个TextView,想让一个左,一个右,怎么搞?
或许你会脱口而出:"gravity设置一个left,一个right就可以啦!"
真的┞封么简单?你试过吗?写个简单的Layout你就会发明,事与愿违了:

<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:orientation="horizontal"
tools:context="com.jay.example.getscreendemo.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="left"
android:background="#FF7878"
android:gravity="center"
android:text="O(∩_∩)O哈哈~" />
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="right"
android:background="#FF7428"
android:gravity="center"
android:text="(*^__^*) 嘻嘻……" />
</LinearLayout>

运行结不雅图:
[img]http://img.blog.csdn.net/20141229160508444?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY29kZXJfcGln/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
看到这里你会说:哎呀,真的不可耶,要不在外层LinearLayout加个gravity=left的属性,然后设置第二个
TextView的layout_gravity为right,恩,好我们试一下:

<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:orientation="horizontal"
android:gravity="left"
tools:context="com.jay.example.getscreendemo.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:background="#FF7878"
android:gravity="center"
android:text="O(∩_∩)O哈哈~" />
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="right"
android:background="#FF7428"
android:gravity="center"
android:text="(*^__^*) 嘻嘻……" />
</LinearLayout>

结不雅照样一样:
[img]http://img.blog.csdn.net/20141229160508444?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY29kZXJfcGln/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
好吧,没辙了,怎么搞妥?
当 android:orientation="vertical" 时，只有程度偏向的设置才起感化，垂直偏向的设置不起感化。
即：left，right，center_horizontal 是生效的。
当 android:orientation="horizontal" 时，只有垂直偏向的设置才起感化，程度偏向的设置不起感化。
即：top，bottom，center_vertical 是生效的。

不过貌似这个解决办法有点坑爹,比如如不雅只能竖直偏向设置阁下对齐的话,就会出现下面的效不雅:
[img]http://img.blog.csdn.net/20140929110214095?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY29kZXJfcGln/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

显然不是我们要的结不雅把!
综上,要么按照上述给出的规矩来构造,不过对于这种情况照样应用相对构造RelativeLayout把！
网膳绫腔给出具体的原因,都是嗣魅如许改有人嗣魅这个和orientation的优先级有关
,暂且先mark下来吧,后续如不雅知道原因的话再解释!前面屏幕适配也说过了,构造照样建议应用
RelativeLayout!