当前位置:   article > 正文

Android Studio开发学习(五)———LinearLayout(线性布局)_android.widget.linearlayout

android.widget.linearlayout

一、布局

        认识了解一下Android中的布局,分别是: LinearLayout(线性布局),RelativeLayout(相对布局),TableLayout(表格布局), FrameLayout(帧布局),AbsoluteLayout(绝对布局),GridLayout(网格布局) 等。

二、LinearLayout详解

1.常见属性

(1)id值: android:id="@+id/"

        id相当于一个标识,方便后期写代码时找到

android:id="@+id/linearlayuot"
(2)布局宽度:android:layout_width;布局高度:android:layout_height

        这两个属性一般放在一起写,且必须设定,里面的值可以任意进行调整,可以是与父组件相同的match_parent,也可以是适应自身大小的wrap_content,还可以是各种数值,如50dp,100dp;其中dp是一种屏幕密度的抽象单位。

  1. // match_parent:与父组件相同
  2. // wrap_content:适应自身大小
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
(3)外边距:android:layout_margin;内边距:android:padding

外边距
android:layout_margin整体距离
android:layout_marginTop顶部距离
android:layout_marginLeft  / android:layout_marginStart左部距离
android:layout_marginRight  /  android:layout_marginEnd右部距离
android:layout_marginBottom底部距离 
内边距
android:padding

整体距离

android:paddingTop顶部距离
android:paddingLeft  /  android:paddingStart左部距离
android:paddingRight  /  android:paddingEnd右部距离
android:paddingBottom底部距离

标注:左右的距离有两种表现形式,以左为例,一种是Left一种是Start,这里主要是跟版本有关,4.2以上用Start代替Left,同理右部。

(4)定位:andorid:orientation

简单明了就是控件怎么布局,它有两个属性,水平的horizontal,垂直的vertical。

  1. <!-- android:orientation="vertical" 垂直-->
  2. <LinearLayout
  3. android:layout_width="match_parent"
  4. android:layout_height="400dp"
  5. android:orientation="vertical"
  6. >
  7. <androidx.appcompat.widget.AppCompatButton
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:background="@color/blue"
  11. />
  12. <androidx.appcompat.widget.AppCompatButton
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:background="@color/pink"
  16. />
  17. <androidx.appcompat.widget.AppCompatButton
  18. android:layout_width="wrap_content"
  19. android:layout_height="wrap_content"
  20. android:background="#00FF99"
  21. />
  22. <androidx.appcompat.widget.AppCompatButton
  23. android:layout_width="wrap_content"
  24. android:layout_height="wrap_content"
  25. android:background="#AA6699"
  26. />
  27. </LinearLayout>

  1. <!-- android:orientation="horizontal" 水平-->
  2. <LinearLayout
  3. android:layout_width="match_parent"
  4. android:layout_height="400dp"
  5. android:orientation="horizontal"
  6. >
  7. <androidx.appcompat.widget.AppCompatButton
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:background="@color/blue"
  11. />
  12. <androidx.appcompat.widget.AppCompatButton
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:background="@color/pink"
  16. />
  17. <androidx.appcompat.widget.AppCompatButton
  18. android:layout_width="wrap_content"
  19. android:layout_height="wrap_content"
  20. android:background="#00FF99"
  21. />
  22. <androidx.appcompat.widget.AppCompatButton
  23. android:layout_width="wrap_content"
  24. android:layout_height="wrap_content"
  25. android:background="#AA6699"
  26. />
  27. </LinearLayout>

在一个布局中只能有一种排列方式,要么垂直要么水平,如果想多实现,可以多用几个布局,分模块的进行布局管理 。

(5)对齐方式:andorid:gravity  

对齐方式就是布局中的控件所在的位置,我们现在主要的阅读方式为从左向右,从上向下,所以,再添加控件时,会自动的放于左上角,切记第一条属性是写在大布局中的,而不是单个的控件中,以此段代码为例,第二个可以放置在控件中调整位置,在此处我们以第一种方式为例,因为内容大同小异,只是编写的位置不同罢了 

  1. <LinearLayout
  2. android:layout_width="match_parent"
  3. android:layout_height="400dp"
  4. android:orientation="vertical"
  5. android:gravity="center"
  6. >
  7. <androidx.appcompat.widget.AppCompatButton
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:background="@color/blue"
  11. />
  12. <androidx.appcompat.widget.AppCompatButton
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:background="@color/pink"
  16. />
  17. <androidx.appcompat.widget.AppCompatButton
  18. android:layout_width="wrap_content"
  19. android:layout_height="wrap_content"
  20. android:background="#00FF99"
  21. />
  22. <androidx.appcompat.widget.AppCompatButton
  23. android:layout_width="wrap_content"
  24. android:layout_height="wrap_content"
  25. android:background="#AA6699"
  26. />
  27. </LinearLayout>
对齐方式
andorid:gravity="center"整体居中
andorid:gravity="left"  /  andorid:gravity="start"  /  andorid:gravity="top"左部
andorid:gravity="right"  /  andorid:gravity="end"右部
andorid:gravity="bottom"底部
andorid:gravity="center_horizontal"水平居中
andorid:gravity="center_vertical"垂直居中

2.权重:andorid:layout_weight

权重就是控件所占剩余布局的比例问题,怎样分配问题

  1. <LinearLayout
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="horizontal"
  5. android:background="#e50c0c"
  6. >
  7. <LinearLayout
  8. android:layout_width="0dp"
  9. android:layout_height="fill_parent"
  10. android:background="#ffc0cb"
  11. android:layout_weight="1" />
  12. <LinearLayout
  13. android:layout_width="0dp"
  14. android:layout_height="fill_parent"
  15. android:background="#0000ff"
  16. android:layout_weight="1" />
  17. </LinearLayout>

权重andorid:layout_weight=”“的值是可以随便定义的,里面的数字相当于权重,设置的数字相加为整个布局的大小,比如以上代码为例,第一个控件权重为1,第二个也为1,也就是说整个布局大小为2,两个控件各占1,数字可以任意更改,控件也可以任意添加,重要的是美观如下图

将一个控件的权重设置为2,则它 占整个布局的三分之二

0dp的设置一般情况都是因为权重问题,这样便可以按照自己所设置的比例进行显示,水平布局设置width,垂直布局设置height=0dp。

前面提到了权重是占剩余部分的占据比例,是因为我们在设计时不一定都是0dp,有可能提前某个控件设置了长度或是高度,这时,如果我们再用权重属性,分开的就是整个布局剩下没有占用的部分,例如:同样的代码,我将第一个LinearLayout的宽度提前设置了200dp。现在来看看效果

  1. <LinearLayout
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="horizontal"
  5. android:background="#e50c0c"
  6. >
  7. <LinearLayout
  8. android:layout_width="200dp"
  9. android:layout_height="fill_parent"
  10. android:background="#ffc0cb"
  11. android:layout_weight="1" />
  12. <LinearLayout
  13. android:layout_width="0dp"
  14. android:layout_height="fill_parent"
  15. android:background="#0000ff"
  16. android:layout_weight="2" />
  17. </LinearLayout>

 第一个控件先占了整个布局的一部分,剩余的部再进行分割。

附加:Java代码中设置weight属性

1.在activity_main.xml文件中新建一个<LinearLayout>

  1. <LinearLayout
  2. android:id="@+id/abc"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="horizontal"
  6. android:background="#e50c0c"
  7. >
  8. </LinearLayout>

2.在 MainActivity.java 文件中设置weight

  1. package com.example.example;
  2. import android.os.Bundle;
  3. import android.widget.Button;
  4. import android.widget.LinearLayout;
  5. import androidx.appcompat.app.AppCompatActivity;
  6. public class MainActivity extends AppCompatActivity {
  7. @Override
  8. protected void onCreate(Bundle savedInstanceState) {
  9. super.onCreate(savedInstanceState);
  10. setContentView(R.layout.activity_main);
  11. // 创建一个 LinearLayout 对象
  12. LinearLayout linearLayout = new LinearLayout(MainActivity.this);
  13. // 设置 LinearLayout 的布局方向为垂直
  14. linearLayout.setOrientation(LinearLayout.VERTICAL);
  15. // 创建一个按钮对象
  16. Button button = new Button(MainActivity.this);
  17. button.setText("点击");
  18. // 创建 LinearLayout.LayoutParams 对象并设置相应参数
  19. LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
  20. LinearLayout.LayoutParams.MATCH_PARENT,
  21. LinearLayout.LayoutParams.WRAP_CONTENT
  22. );
  23. layoutParams.weight = 1.0f;
  24. // 将布局参数应用到按钮上
  25. button.setLayoutParams(layoutParams);
  26. // 将按钮添加到 LinearLayout 中
  27. linearLayout.addView(button);
  28. LinearLayout rootLayout = findViewById(R.id.abc);
  29. // 将 LinearLayout 添加到活动的根布局中
  30. rootLayout.addView(linearLayout);
  31. }
  32. }

 3.运行应用 即可

3. 为LinearLayout设置分割线 

(1)直接在布局中添加一个view
  1. <LinearLayout
  2. android:layout_width="match_parent"
  3. android:layout_height="wrap_content"
  4. android:orientation="vertical"
  5. android:layout_marginTop="16dp"
  6. android:layout_marginBottom="16dp">
  7. <!-- 添加一条细线作为背景 -->
  8. <View
  9. android:layout_width="match_parent"
  10. android:layout_height="1dp"
  11. android:background="#000000" />
  12. <!-- 在这里添加其他布局元素 -->
  13. </LinearLayout>

(2)第二种是使用LinearLayout的一个divider属性

直接为LinearLayout设置分割线 这里就需要自己准备一张线的图片了

a. android:divider 设置作为分割线的图片

 src/main/res/drawable 下面创建 ktv_line_div.xml 内容为:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <solid android:color="#808080" /> <!-- 灰色背景 -->
  5. <size android:height="1dp" /> <!-- 定义细线高度为1dp -->
  6. </shape>

b. android:showDividers 设置分割线的位置,none(无),beginning(开始),end(结束),middle(每两个组件间)

c. android:dividerPadding 设置分割线的可以控制分隔线与子视图之间的间距,使布局在显示分隔线时具有更灵活的外观效果,主要用于 AdapterView(如ListViewGridView)中的分隔线样式

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:id="@+id/LinearLayout1"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:divider="@drawable/ktv_line_div"
  6. android:orientation="vertical"
  7. android:showDividers="middle"
  8. android:dividerPadding="10dp" >
  9. <Button
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:text="按钮1" />
  13. <Button
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:text="按钮2" />
  17. </LinearLayout>

应用之后就可以看到细线

4. 注意事项

使用Layout_gravity的一个很重要的问题

问题内容: 在一个LinearLayout的水平方向中布置两个TextView,想让一个左,一个右,怎么搞? 

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="horizontal" >
  6. <TextView
  7. android:layout_width="wrap_content"
  8. android:layout_height="200dp"
  9. android:layout_gravity="left"
  10. android:background="#ffc0cb"
  11. android:gravity="center"
  12. android:text="~~~~~~~pink......" />
  13. <TextView
  14. android:layout_width="wrap_content"
  15. android:layout_height="200dp"
  16. android:layout_gravity="right"
  17. android:background="#0000ff"
  18. android:gravity="center"
  19. android:text="~~~~~~~blue......" />
  20. </LinearLayout>

运行结果:

 看到这里,可能会想在外层LinearLayout加个 android:gravity="left" 的属性,然后设置第二个 TextView android:layout_gravity  android:layout_gravity=“right" 

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="horizontal"
  6. android:gravity="left" >
  7. <TextView
  8. android:layout_width="wrap_content"
  9. android:layout_height="200dp"
  10. android:layout_gravity="left"
  11. android:background="#ffc0cb"
  12. android:gravity="center"
  13. android:text="~~~~~~~pink......" />
  14. <TextView
  15. android:layout_width="wrap_content"
  16. android:layout_height="200dp"
  17. android:layout_gravity="right"
  18. android:background="#0000ff"
  19. android:gravity="center"
  20. android:text="~~~~~~~blue......" />
  21. </LinearLayout>

运行结果没变化:

小编想说当  android:orientation="vertical" 时, 只有水平方向的设置才起作用,垂直方向的设置不起作用。 即: left  right center_horizontal  是生效的。 当  android:orientation="horizontal" 时, 只有垂直方向的设置才起作用,水平方向的设置不起作用。 即: top bottom center_vertical  是生效的。

当改成  android:orientation="vertical" 时,看一下效果:

综上可看出,仍然没有实现想要对结果,像这种情况是建议使用 RelativeLayout(相对布局)

非要用LinearLayout的解决的话也可以:

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:id="@+id/LinearLayout1"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="horizontal" >
  6. <TextView
  7. android:layout_width="0dp"
  8. android:layout_height="200dp"
  9. android:layout_weight="1"
  10. android:background="#0000ff"
  11. android:gravity="center"
  12. android:text="O(∩_∩)O哈哈~" />
  13. <View
  14. android:layout_width="0dp"
  15. android:layout_height="0dp"
  16. android:layout_weight="1" />
  17. <TextView
  18. android:layout_width="130dp"
  19. android:layout_height="200dp"
  20. android:background="#ffc0cb"
  21. android:gravity="center"
  22. android:text="(*^__^*) 嘻嘻……" />
  23. </LinearLayout>

在两个 TextView 之间添加了一个空的 View,并将它的 layout_weight 设置为 1。这样第二个 TextView 就会被挤到右边,并且两个 TextView 以及中间的 View 将占据同样的空间,实现了水平方向上的靠右对齐。

三、总结

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号