UI布局
一。第1组UI组件:布局管理器:
所有布局管理器都是ViewGroup的子类,都可作为容器类使用,因其继承View,所以可嵌套
单位:边边:dp, 字体:sp
线性布局 相对布局 是使用最多的两种布局
1. LinearLayout(线性布局)
LinearLayout是线性布局控件,它包含的子控件将以横向或竖向的方式排列,按照相对位置来排列所有的widgets或者其他的containers,超过边界时,某些控件将缺失或消失。因此一个垂直列表的每一行只会有一个widget或者是container,而不管他们有多宽,而一个水平列表将会只有一个行高(高度为最高子控件的高度加上边框高度)。LinearLayout保持其所包含的widget或者是container之间的间隔以及互相对齐(相对一个控件的右对齐、中间对齐或者左对齐)。
常用属性:
属性1:android:orientation 指定线性布局的方向(水平或者垂直)
android:orientation=“vertical” 相对于上一个元素垂直排列。
属性2:android:width 线性布局的容器宽度
属性3:android:height 线性布局的容器高度
属性4:android:background 线性布局的背景
属性5:android:gravity 线性布局中,子容器相对于父容器所在的位置
layout_padding:内边距
属性6:android:margin 元素与其他元素的间距
属性7:android:padding 元素的内边距
在res目录下有一个layout xml布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" //垂直
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background"
>
<Button
android:text="按钮 1"
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<Button
android:text="按钮 2"
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<Button
android:text="按钮 3"
android:id="@+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<Button
android:text="按钮 4"
android:id="@+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
2. RelativeLayout
-
上下相对
android:layout_above----------位于给定DI控件之上
android:layout_below ----------位于给定DI控件之下 -
左右相对
android:layout_toLeftOf -------位于给定控件左边
android:layout_toRightOf ------位于给定控件右边 -
指定id
android:layout_alignLeft -------左边与给定ID控件的左边对齐
android:layout_alignRight ------右边与给定ID控件的右边对齐
android:layout_alignTop -------上边与给定ID控件的上边对齐
android:layout_alignBottom ----底边与给定ID控件的底边对齐
android:layout_alignParentBottom ----靠父对象底部对齐
android:layout_alignBaseline----对齐到控件基准线
相对父容器,值是true或false
android:layout_alignParentLeft ------相对于父靠左
android:layout_alignParentTop-------相对于父靠上
android:layout_alignParentRight------相对于父靠右
android:layout_alignParentBottom —相对于父靠下
android:layout_alignStart---------------------将控件对齐给定ID控件的头部
android:layout_alignEnd----------------------将控件对齐给定ID控件的尾部
android:layout_alignParentStart--------------将控件对齐到父控件的头部
android:layout_alignParentEnd---------------将控件对齐到父控件的尾部
android:layout_above 将该控件的底部置于给定ID的控件之上;
android:layout_below 将该控件的底部置于给定ID的控件之下;
android:layout_toLeftOf 将该控件的右边缘与给定ID的控件左边缘对齐;
android:layout_toRightOf 将该控件的左边缘与给定ID的控件右边缘对齐;
android:layout_alignBaseline 将该控件的baseline与给定ID的baseline对齐;
android:layout_alignTop 将该控件的顶部边缘与给定ID的顶部边缘对齐;
android:layout_alignBottom 将该控件的底部边缘与给定ID的底部边缘对齐;
android:layout_alignLeft 将该控件的左边缘与给定ID的左边缘对齐;
android:layout_alignRight 将该控件的右边缘与给定ID的右边缘对齐;
// 相对于父组件
android:layout_alignParentTop 如果为true,将该控件的顶部与其父控件的顶部对齐;
android:layout_alignParentBottom 如果为true,将该控件的底部与其父控件的底部对齐;
android:layout_alignParentLeft 如果为true,将该控件的左部与其父控件的左部对齐;
android:layout_alignParentRight 如果为true,将该控件的右部与其父控件的右部对齐;
// 居中
android:layout_centerHorizontal 如果为true,将该控件的置于水平居中;
android:layout_centerVertical 如果为true,将该控件的置于垂直居中;
android:layout_centerInParent 如果为true,将该控件的置于父控件的中央;
续
android:layout_alignParentRight=“true”
使当前控件的右端和父控件的右端对齐。这里属性值只能为true或false,默认false。
android:layout_marginLeft=“10dip”
使当前控件左边空出相应的空间。
android:layout_toLeftOf="@id/ok"
使当前控件置于id为ok的控件的左边。
android:layout_alignTop="@id/ok"
使当前控件与id控件的上端对齐。
padding表示填充,margin表示边距
可通过android:padding属性进行设置,4个方向的边距属性为android:paddingLeft, android:paddingRight, android:paddingTop, and android:paddingBottom.
结论:
*android:layout_marginBottom
*android:layout_marginLeft
*android:layout_marginRight
*android:layout_marginTop
上面几个属性的值是根据下面的相对位置的对象的值来做计算的,如果没有相对的对象就以总体布局来计算
*android:layout_below
*android:layout_above
*android:layout_toLeftOf
*android:layout_toRightOf
*android:layout_alignTop
*android:layout_centerHrizontal //是否支持横屏或竖屏
*android:layout_centerVertical //这个根据单词的意思:中心垂直
*android:layout_centerInparent //
android:layout_centerInParent=“true”//居中在父对象
android:layout_centerInParent=“false” … 浏览器不支持多窗口显示,意思就是说所有页面在单一窗口打开,这样避免了页面布局控制显示问题
下面的相对于父的相对位置
*android:layout_alignParentBottom
*android:layout_alignParentLeft
*android:layout_alignParentRight
*android:layout_alignParentTop
*android:layout_alignWithParentIfMissing
二. TextView控件(用来显示文字的工具)
1、TextView常用属性
1、android:text 设置文本的内容
2、android:textColor 设置文本的颜色
3、android:textSize 设置文本的字体大小(一般使用sp)
4、android:height 设置文本的高度(一般使用dp)
5、android:width 设置文本的宽度(一般使用dp)
6、android:inputType 设置文本的类型,默认为普通文本,可选textPassword等类型(通常在EditText中使用)
7、android:ems 设置textView的宽度为N个字符的宽度
8、android:gravity 设置文本框的内容相对于文本框的位置(可以使用多个属性 中间用 “ | ”分割)
9、android:drawableLeft 用于在文本框左侧绘制图片
10、android:drawableRight 用于在文本框右侧绘制图片
11、android:drawableTop 用于在文本框顶部绘制图片
12、android:drawableBottom 用于在文本框底部绘制图片
13、android:hint 设置默认显示字体
14、android:textStyle设置字形,斜体,粗体等,多个属性用“ | ”隔开
15、android:ellipsize 设置当文字过长的时候该控件如何显示。
16、android:maxLength:限制文本 的长度,超出部分将会不显示
17、android:lines 设置显示的行数,即使没有数据也会显示
18、android:singleLine 设置文本是否单行显示
19、android:clickable 把其属性更改为true,为textView设置事件拦截
使用:在主文件中,创建一个私有的Button类(注意import button包)
package com.example.activity;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class firstactivity extends AppCompatActivity {
private Button nBtnTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.firstlayout );
nBtnTextView=findViewById(R.id.btn_textview);
nBtnTextView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//跳转到TextView演示
Intent intent = new Intent(firstactivity.this,TextViewActivity.class);
startActivity(intent);
}
});
}
}
R.layout.main是个布局文件即控件都是如何摆放如何显示的,setContentView就是设置一个Activity的显示界面,这句话就是设置这个这句话所在的Activity采用R.layout下的main布局文件进行布局
使用setContentView可以在Activity中动态切换显示的View,这样,不需要多个Activity就可以显示不同的界面,因此不再需要在Activity间传送数据,变量可以直接引用。但是,在android SDK给我们建的默认的Hello World程序中,调用的是setContentView(int layoutResID)方法,如果使用该方法切换view,在切换后再切换回,无法显示切换前修改后的样子,也就是说,相当于重新显示一个view,并非是把原来的view隐藏后再显示。其实setContentView是个多态方法,我们可以先用LayoutInflater把布局xml文件引入成View对象,再通过setContentView(View view)方法来切换视图。因为所有对View的修改都保存在View对象里,所以,当切换回原来的view时,就可以直接显示原来修改后的样子。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.activity">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".TextViewActivity"></activity>
<activity android:name=".firstactivity" />
</application>
</manifest>
例子:给文字添加中划线(使用Activity添加)
xml文件:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textColor="#000000"
android:textSize="30dp"
android:id="@+id/tv_1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
java文件
package com.example.tv_study;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private TextView mt_1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mt_1 = (TextView) findViewById(R.id.tv_1);
mt_1.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);
mt_1.getPaint().setAntiAlias(true);
}
}
结果: