大纲
单位
引用菜鸟教程的介绍:
dp
(dip): device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个,不依赖像素。px
: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多。 pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;sp
: scaled pixels(放大像素). 主要用于字体显示best for textsize。
一、TextView文本框
TextView即文本视图,可用于展示一些文字或简单的图案。
常用属性&操作:
- 文字大小、颜色
- 显示超范围
- 文字 + 图片
- 删除线、下划线
- 转动效果
实例:
1. 最基础的使用
设置内容、大小、颜色
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="NameisBoy"
android:textColor="#000000"
android:textSize="25sp"/>
wrap_content是根据内容大小设置控件的大小,text的值即为显示内容
2. 显示内容超出大小
当显示的内容超出宽度时,就会显示省略号:...
<TextView
android:layout_width="170dp"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:maxLines="1"
android:ellipsize="end"
android:text="正在学习Android开发"
android:textColor="#000000"
android:textSize="20sp"/>
这里限制最大行数为1,否则内容超出宽度时会换行显示。
3. 文字+图案显示
drawableXXX,XXX为图案的方向,有上下左右等等。
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:drawableTop="@drawable/icon"
android:text="Android图标"
android:textColor="#000000"
android:textSize="20sp"/>
4. 删除线
删除线和下划线都是特殊的设置,需要在java代码中设置,如:
布局代码:
<TextView
android:id="@+id/tv4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="删除线"
android:textColor="#000000"
android:textSize="20sp"/>
Java代码:
public class TextViewActivity extends AppCompatActivity {
private TextView mTv4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_view);
//删除线
mTv4 = findViewById(R.id.tv4);
mTv4.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);
mTv4.getPaint().setAntiAlias(true);//消除锯齿
}
}
通过调用
setFlags
方法设置,STRIKE_THRU_TEXT_FLAG
代表的就是删除线,设置后内容可能会出现锯齿,通过设置setAntiAlias
可以消除锯齿。
5. 下划线
与删除线是类似的,只不过下划线是使用UNDERLINE_TEXT_FLAG
。
public class TextViewActivity extends AppCompatActivity {
private TextView mTv5;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_view);
//删除线
mTv5 = findViewById(R.id.tv5);
mTv5.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);
mTv5.getPaint().setAntiAlias(true);//消除锯齿
}
}
6. 滚动显示
与生活中的广告滚动显示一样,内容不断循环滚动显示。
重点是设置5个属性:singleLine
、ellipsize
、marqueeRepeatLimit
(循环次数)、focusable
(获取焦点)、focusableInTouchMode
<TextView
android:id="@+id/tv6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="这是一串滚动的文字这是一串滚动的文字"
android:textColor="#0000ff"
android:textSize="20sp"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:focusable="true"
android:focusableInTouchMode="true"/>
singleLine是已经弃用的属性,但必须设置,用其他的属性设置单行显示代替singleLine无效。
设置后如果还不能滚动,需要在Activity的Java代码中设置选中setSelected
,如:
TextView tv = (TextView) findViewById(R.id.textView);
tv.setSelected(true);
实例效果:
以上每个实例对应每一行:
二、Button按钮
常用属性&操作:
- 大小、颜色
- 自定义背景形状
- 自定义按压效果
- 点击事件
Button是继承自TextView控件的,所以很多属性都是一样的操作,重点关注不相同的属性与操作。
1. 基础使用
<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="按钮1"
android:textSize="20sp"
android:layout_gravity="center"/>
2. 自定义背景形状
- 新建一个shape类型xml资源文件:
- 编写xml代码:
- 设置按钮背景:
将background
属性设置为刚刚创建的资源文件。
<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="按钮2"
android:background="@drawable/gb_btn2"
android:textSize="20sp"
android:layout_gravity="center"
android:layout_marginTop="10dp"/>
预览效果:
3. 自定义按压形状
同样是通过xml资源文件进行创建,不过根元素选择selector
:
xml代码:
设置background
属性:
<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="按钮3"
android:textSize="20sp"
android:background="@drawable/bg_btn3"
android:layout_gravity="center"
android:layout_marginTop="10dp"/>
按压效果:
4.点击事件
按钮的点击事件处理都涉及Java代码,常用的有2种处理方式:
- 使用
onClick
属性 - 使用
OnClickListener
实例
4.1 使用onClick
属性
这种方法首先要设置按钮的onClick
属性,如:
<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="按钮2"
android:background="@drawable/gb_btn2"
android:textSize="20sp"
android:layout_gravity="center"
android:onClick="Btn2_Onclick"
android:layout_marginTop="10dp"/>
然后在Activity中实现绑定的回调函数:
效果:
4.2 使用OnClickListener
实例
首先需要在布局中给按钮设置id:
<Button
android:id="@+id/Btn_3"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="按钮3"
android:textSize="20sp"
android:background="@drawable/bg_btn3"
android:layout_gravity="center"
android:layout_marginTop="10dp"/>
然后在Activity中编写如下代码:
Button mBtn3 = findViewById(R.id.Btn_3);
mBtn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(BtnTest.this,"按钮3被点击了",Toast.LENGTH_SHORT).show();
}
});
效果:
不只是Button控件可以设置点击事件,其他的一些控件也是可以设置的,具体的可以百度。
三、EditText文本编辑框
EditText是文本编辑框,常用来输入信息,如输入账号密码等。
常用属性&操作:
- 文本大小、内容、颜色…
- 图片和文本混合显示
- 提示信息,即未输入时显示的内容
- 输入文本类型,使用场景:输入密码时设置不可见
- Activity中获取输入的文本信息
1. 基础使用
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="账号"
android:textSize="24sp"/>
这里的text是实际显示的内容,不是提示信息
2. 显示提示信息
设置hint
属性,它的值就是提示信息内容:
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="50dp"
android:int="账号"
android:textSize="24sp"/>
3. 显示图片和文本
使用drawableXXX
属性显示图片,drawablePadding
设置图片和文字间距:
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="50dp"
android:hint="账号"
android:drawableLeft="@drawable/username"
android:drawablePadding="5dp"
android:textSize="24sp"/>
4. 输入文本类型
设置属性inputType
,限制输入的文本类型,如当输入的是密码等非明文信息时,设置inputType
为Password
即可用*****
显示。
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="50dp"
android:hint="密码"
android:inputType="textPassword"
android:textSize="24sp"
android:drawableLeft="@drawable/pswd"
android:drawablePadding="5dp"
android:layout_below="@+id/et_username"
android:layout_marginTop="20dp"/>
5.登录界面实例
EditText也是可以设置背景形状的,下面的例子就设置了圆角和描边。
布局代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:padding="20dp"
tools:context=".MainActivity">
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="50dp"
android:hint="账号"
android:background="@drawable/bg_et"
android:drawableLeft="@drawable/username"
android:drawablePadding="5dp"
android:textSize="24sp"/>
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="50dp"
android:hint="密码"
android:inputType="textPassword"
android:textSize="24sp"
android:drawableLeft="@drawable/pswd"
android:drawablePadding="5dp"
android:background="@drawable/bg_et"
android:layout_below="@+id/et_username"
android:layout_marginTop="20dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:text="登录"
android:layout_below="@id/et_password"
android:layout_centerHorizontal="true"
android:layout_marginTop="150dp"/>
</RelativeLayout>
效果:
这里输入密码时,因为手机安全保护的问题,投屏显示不了。
5. 获取输入文本
类似于Button的点击事件处理方式,EditText的文本变化事件在Activity中通过TextWatcher
实例来处理。
如,获取UserName的Java代码:
EditText mEtUsername = findViewById(R.id.et_username);
mEtUsername.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
Log.d("Before-username",s.toString());
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
Log.d("username",s.toString());
}
@Override
public void afterTextChanged(Editable s) {
Log.d("After-username",s.toString());
}
});
beforeTextChanged
是处理文本改变前的函数,onTextChanged
是当文本改变时的处理函数,afterTextChanged
则是文本改变后的处理函数,通常使用onTextChanged
处理文本改变事件。
使用Log将输入文本打印出来,在6:Logcat中6可以看到这几个函数的调用顺序:
四、ImageView图像视图
常用属性&操作:
- 图片内容、背景
- 图片缩放类型
- 加载网络图片
1. 图片内容设置
使用src
属性设置ImageView的内容,background
属性是设置背景图或背景色,注意区分。
<ImageView
android:layout_width="300dp"
android:layout_height="150dp"
android:background="#FF9966"
android:src="@drawable/img_test"/>
2. 图片缩放类型
使用scaleType
属性设置图片的缩放类型,常用选项(摘自菜鸟教程):
- fitXY:对图像的横向与纵向进行独立缩放,使得该图片完全适应ImageView,但是图片的横纵比可能会发生改变
- fitStart:保持纵横比缩放图片,知道较长的边与Image的编程相等,缩放完成后将图片放在ImageView的左上角
- fitCenter:同上,缩放后放于中间;
- fitEnd:同上,缩放后放于右下角;
- center:保持原图的大小,显示在ImageView的中心。当原图的size大于ImageView的size,超过部分裁剪处理。
- centerCrop:保持横纵比缩放图片,知道完全覆盖ImageView,可能会出现图片的显示不完全
- centerInside:保持横纵比缩放图片,直到ImageView能够完全地显示图片
- matrix:默认值,不改变原图的大小,从ImageView的左上角开始绘制原图, 原图超过ImageView的部分作裁剪处理
简单对比一下区别:
3. 加载网络图片
当使用的图片在网络上不在本地时,我们就需要进行对图片进行加载处理。通常使用第三方的开源库来加载网络图片。
这里使用Glide开源库加载网络图片,github仓库上也有源代码和使用方法。
使用步骤:
- 修改gradle
- 使用glide库加载图片
上一步修改gradle并同步完成后,就可以使用它来加载网络图片。
参考官方的使用方法:
// For a simple view:
@Override public void onCreate(Bundle savedInstanceState) {
...
ImageView imageView = (ImageView) findViewById(R.id.my_image_view);
Glide.with(this).load("http://goo.gl/gEgYUd").into(imageView);
}
// For a simple image list:
@Override public View getView(int position, View recycled, ViewGroup container) {
final ImageView myImageView;
if (recycled == null) {
myImageView = (ImageView) inflater.inflate(R.layout.my_image_view, container, false);
} else {
myImageView = (ImageView) recycled;
}
String url = myUrls.get(position);
Glide
.with(myFragment)
.load(url)
.centerCrop()
.placeholder(R.drawable.loading_spinner)
.into(myImageView);
return myImageView;
}
只需要修改load里面图片的url链接即可,如:
ImageView imageView = (ImageView) findViewById(R.id.iv_1);
Glide.with(this).load("https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png").into(imageView);
- 打开网络权限
图片是在网络上的,所以必须打开网络权限。在AndroidManifest.xml
文件中加入:
<uses-permission android:name="android.permission.INTERNET"/>
- 效果
五、SeekBar拖动条
SeekBar拖动条,常用属性&操作:
- 拖动范围、高度、长度
- 滑块样式(形状、颜色、图片等)
- 拖动条的颜色
- 拖动事件处理
1. 常用属性&操作
- 拖动范围通过
min
和max
属性设置,progress
是当前值,设置后滑块会处在当前值的位置。minHeight
和maxHeight
设置拖动条的高度,长度(宽度)则用minWidth
和maxWidth
设置; - 滑块样式可以使用图片或者xml资源文件,使用
thumb
属性设置; - 拖动条的颜色同样可以使用图片或xml文件,使用
progressDrawable
设置;
直接放一个实例:
<SeekBar
android:id="@+id/sb_1"
android:layout_marginTop="100dp"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:max="100"
android:progress="50"
android:maxHeight="8dp"
android:thumb="@drawable/sb_thumb"
android:progressDrawable="@drawable/bg_adjust_seek_bar"/>
效果:
2. 拖动事件处理
与按钮、文本编辑框类似,使用OnSeekBarChangeListener
实例处理,常用格式:
有三个处理函数:
onProgressChanged
:进度发生改变时会触发onStartTrackingTouch
:按住SeekBar时会触发onStopTrackingTouch
:放开SeekBar时触发
final TextView mTv1 = findViewById(R.id.iv_1);
SeekBar mSb1 = findViewById(R.id.sb_1);
mSb1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
Toast.makeText(getApplicationContext(),String.format("当前值:%d",progress),Toast.LENGTH_SHORT).show();
mTv1.setText("当前值: " + progress + " /100 ");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
Toast.makeText(getApplicationContext(),"按下SeekBar",Toast.LENGTH_SHORT).show();
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
Toast.makeText(getApplicationContext(),"释放SeekBar",Toast.LENGTH_SHORT).show();
}
});
效果: