美文网首页
[Android]开发App,你得知道这些2——布局

[Android]开发App,你得知道这些2——布局

作者: 入梦瞌睡 | 来源:发表于2019-08-26 23:09 被阅读0次

0.前言

  • 上一篇文章中,我们讲解了Android的一些基本概念,以及AS的用法
    有兴趣的可以去看一看

准备工作

在读本文前,你最好有以下准备:

  • (1)安装Android Stuido(以下简称AS
  • (2)有一定的Java基础
  • (3)有一台安卓机
    (可以用模拟器来代替,包括AS自带的以及网上的一些著名模拟器)
  • 若想要了解有关Java的文章等其他主要知识,可以去看前面的文章

(不会使用AS的读者可以参考下面这篇文章中的例子)
[Java]开发安卓,你得掌握的Java知识2

1.本文内容简介

  • 线性布局讲解

  • 相对布局讲解

  • 约束布局讲解

  • 布局的实际应用


2.基础知识讲解

2.1线性布局

布局特点:

  • 添加的控件会一个接一个紧挨在一起

  • 控件无法重叠

  • 线性布局一般会用在侧边菜单中使用

使用线性布局的一些技巧(语句)

第一步

在layout的activity_main.xml中,将
<androidx.constraintlayout.widget.ConstraintLayout
改为
<LinearLayout
(最下面的标签也要改)

第二步

添加TextView

   <TextView
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:text="Hello World!"
        android:background="@color/colorAccent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:text="Hello World!"
        android:background="@color/colorPrimary"/>

其中:

  • android:layout_width(height)表示控件的宽(高)
  • android:text="Hello World!"表示TextView的内容
  • android:background="@color/colorAccent"表示为控件添加背景(色)
    效果:


第三步

可以使用layout_margin(Top/Bottom/Left/Right)属性来设置间距
如:
android:layout_marginStart="100dp"

<TextView
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:text="Hello World!"
        android:background="@color/colorPrimary"
        android:layout_marginStart="100dp"
        android:layout_marginTop="200dp"/>

注意:

  • android:layout_marginStart与 android:layout_marginLeft基本没有区别

  • android:layout_marginEnd与 android:layout_marginRight也同上

  • android:layout_marginTop与android:layout_marginBottom则是针>对父容器(横向线性布局的话)

效果:
如何改变线性布局方向

android:orientation=""可以改变线性布局的方向,vertical为纵向,horizontal表示横向

2.2相对布局

布局特点:

  • 控件可以重叠

  • 每一个控件都可以设置相对于另一个控件的距离(靠id)
    (包括可以重叠时设置某条边对齐等)

使用相对布局的一些技巧(语句)

第一步

在layout的activity_main.xml中,将
<androidx.constraintlayout.widget.ConstraintLayout
改为:
<RelativeLayout
(最下面的标签也要改)

第二步

为控件增加id
格式: android:id="@+id/ (这里写自定义的id)"
android:id="@+id/tv_001"

第三步

使用 android:layout_align语句来使两个控件对齐
android:layout_alignRight="@id/tv_001"
android:layout_alignBottom="@id/tv_001"

    <TextView
        android:id="@+id/tv_001"
        android:layout_width="400dp"
        android:layout_height="500dp"
        android:text="Hello World!"
        android:background="@color/colorAccent"/>
    <View
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="@color/colorPrimary"
        android:layout_alignRight="@id/tv_001"
        android:layout_alignBottom="@id/tv_001"/>

效果如图:


2.3约束布局(重要)

  • 约束布局是从iOS那边借鉴过来的,约束布局基本能代替其他所有布局,因此比较重要
    布局特点为:
  • 控件可以重叠
  • 与相对布局不同,约束布局更关注控件的四边以谁为参照物

使用相对布局的一些技巧(语句)

第一步

在layout的activity_main.xml中,改为
<androidx.constraintlayout.widget.ConstraintLayout
(一般默认就是约束布局)

第二步

添加控件

  • 如果不确定控件大小,定宽高为0dp
<TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"/>
    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"/>
第三步·上

添加约束条件
app:layout_constraint

  • 如:app:layout_constraintStart_toStartOf
    它的意思为:该控件的左边以谁的左边为参照物
  • 如:app:layout_constraintEnd_toStartOf
    它的意思为:该控件的右边以谁的左边为参照物
<TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tv2"/>
    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintStart_toEndOf="@id/tv1"
        app:layout_constraintTop_toTopOf="@id/tv1"
        app:layout_constraintBottom_toBottomOf="@id/tv1"
        app:layout_constraintEnd_toEndOf="parent"/>

效果如图:


第三步·下

  • 可以在写出约束条件之后,然后设置margin来永久地控制到参照物的边距

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_margin="20dp"/>

效果如图:


  • 可以用weight来设置权重
    app:layout_constraintHorizontal_weight="1"
    表示占总分量的1份,尽量不要太大,以1为单位

  • app:layout_constraintDimensionRatio="h,2:1"
    h表示高,那就是w : h

<TextView
        android:id="@+id/tv_001"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tv_002"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        app:layout_constraintHorizontal_weight="1"/>
    <TextView
        android:id="@+id/tv_002"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintStart_toEndOf="@id/tv_001"
        app:layout_constraintTop_toTopOf="@id/tv_001"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintBottom_toBottomOf="@id/tv_001"/>

Java代码中添加控件的思路、步骤

  • 1.获取容器
    RelativeLayout rl = findViewById(R.id.root_layout);

  • 2.获取背景视图
    ImageView iv = findViewById(R.id.opView);

  • 3.背景视图尺寸
    int x = iv.getLeft();
    int y = iv.getTop();

  • 4.创建用于显示点的视图
    ImageView dotView = new ImageView(this);

  • 5.显示对应的图片(用一张图片作为背景)
    dotView.setBackgroundResource(R.drawable.selected_dot);

  • 6.创建控件的尺寸
    RelativeLayout.LayoutParams params =
    new RelativeLayout.LayoutParams
    (ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);

(ViewGroup.LayoutParams.WRAP_CONTENT表示这个控件原来多大就多大)

  • 7.设置控件params(这里就是设置位置)
    float scale = getResources().getDisplayMetrics().density;
    params.leftMargin = x + (int) (scale * 35 + 99 * scale * i);
    params.topMargin = y + (int) (scale * 162 + 99 * scale * j);
  • 8.将控件添加到容器中
    rl.addView(dotView,params);

3.总结

(1)今天讲解了常见布局中的三种,其中,最主要是要搞清楚约束布局的使用
(2)安卓中的布局其实与html中的布局有不少相似之处,如果有学过html的布局的读者,可以进行对比学习
(3)在Android中更推荐使用xml添加控件,但是如果有需要的话(即如果控件的变化比较多)还是得使用java代码
(4)xml文件中添加的控件看似语句很多,但实际上每一句话的可读性都很强,也很容易理解,多多使用即可熟练掌握

相关文章

网友评论

      本文标题:[Android]开发App,你得知道这些2——布局

      本文链接:https://www.haomeiwen.com/subject/avalectx.html