凡是过往,皆为序章

0%

Android_UI

Android UI的知识点总结,初入Android,做些总结。

现在学习主要是跟着视频教程边看边学,现将学习到的零星知识点总结如下:

Android 系统中的所有 UI 类都是建立在 View 和 ViewGroup 两个类的基础之上的,所有 View 的子类称为 Widget,所有 ViewGroup 的子类称为 Layout。其中 ViewGroup 是 View 的子类。

View 是所有 UI 组件的基类,基本上所有的高级 UI 组件都是继承 View 类实现的,如 TextView(文本框)、Button、List、EditText(编辑框)、Checkbox 等。一个 View 在屏幕占据一块矩形区域,负责渲染这块矩形区域,也可以处理这块矩形区域发生的事件,并可以设置该区域是否可见以及获取焦点等。

ViewGroup 是容纳这些组件的容器,其本身也是从 View 中派生出来的,它继承于 Android.view.View,功能就是装载和管理下一层的 View 对象或 ViewGroup 对象,也就是说它是一个容纳其他元素的容器,负责对添加进来的 View 和 ViewGroup 进行管理和布局。

Android常用的UI组件:参见链接

首先有一些属性是通用的:

id=”@+id/name”创建一个id 引用时:”@id/name”

orientation 水平方向或垂直方向

margin:外边距

padding:内边距

gravity:位置管理

一、布局管理

Android SDK 定义了多种布局方式以方便用户设计 UI。各种布局方式均为 ViewGroup 类的子类。

主要学习的是两种最常用的布局,是线性布局(LinearLayout)和相对布局(RelativeLayout)。

1、线性布局(LinearLayout)

LinearLayout 又称线性布局,该布局应该是 Android 视图设计中最经常使用的布局。该布局可以使放入其中的组件以水平方式或者垂直方式整齐排列,通过 android:orientation 属性指定具体的排列方式,通过 weight 属性设置每个组件在布局中所占的比重。

其中weight属性需要特别注意:weight代表的是权值,但此权值的分配是指剩余的空间(未被元素使用的空间按照权值比例分配),需要理解掌握。

2、相对布局(RelativeLayout)

RelativeLayout 又称相对布局。从名称上可以看出,这种布局方式是以一种让组件以相对于容器或者相对于容器中的另一个组件的相对位置进行放置的布局方式。

属性 描述
android:layout_above=”@id/xxx” 将控件置于给定 ID 控件之上
android:layout_below=”@id/xxx” 将控件置于给定 ID 控件之下
android:layout_toLeftOf=”@id/xxx” 将控件的右边缘和给定 ID 控件的左边缘对齐
android:layout_toRightOf=”@id/xxx” 将控件的左边缘和给定 ID 控件的右边缘对齐
android:layout_alignBaseline=”@id/xxx” 将控件的 baseline 与给定 ID 的 baseline 对齐
android:layout_alignTop=”@id/xxx” 将控件的上边缘和给定 ID 控件的上边缘对齐
android:layout_alignBottom=”@id/xxx” 将控件的底边缘和给定 ID 控件的底边缘对齐
android:layout_alignLeft=”@id/xxx” 将控件的左边缘和给定 ID 控件的左边缘对齐
android:layout_alignRight=”@id/xxx” 将控件的右边缘和给定 ID 控件的右边缘对齐
android:layout_alignParentLeft=”true” 将控件的左边缘和父控件的左边缘对齐
android:layout_alignParentTop=”true” 将控件的上边缘和父控件的上边缘对齐
android:layout_alignParentRight=”true” 将控件的右边缘和父控件的右边缘对齐
android:layout_alignParentBottom=”true” 将控件的底边缘和父控件的底边缘对齐
android:layout_centerInParent=”true” 将控件置于父控件的中心位置
android:layout_centerHorizontal=”true” 将控件置于水平方向的中心位置
android:layout_centerVertical=”true” 将控件置于垂直方向的中心位置

二、TextView(文本框)

设置文本框的最大行数(当然还有其他设置最大):android:maxLines=”1”
设置文本显示方式:
end表示显示不完省略号:android:ellipsize=”end”
marquee表示显示不完播放:android:ellipsize=”marquee”
再加上这样几行可以循环播放
android:marqueeRepeatLimit=”marquee_forever”
android:focusable=”true”
android:focusableInTouchMode=”true”
添加图片,调整图片边距等
android:drawableRight=”@drawable/name”//表示在文本右边添加图片
android:drawablePadding=”5dp”

三、Button(按钮)

按钮学习的重点在改变按钮的样式和添加点击事件。

改变样式主要是将按钮改为圆角,更加美观。

可在drawable目录下新建xml文件修改。

1
2
3
4
5
6
7
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#FF9900"/>
<corners
android:radius="5dp"/>
</shape>

再在要设置的按钮添加背景属性,设置为此xml文件即可。

同样可以设置很多效果,比如未点击和点击的不同颜色区分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#CC7A00"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item android:state_pressed="false">
<shape>

<solid android:color="#FF9900"/>
<corners android:radius="5dp"/>
</shape>
</item>
</selector>

再就是添加点击事件,为普通按钮添加单击事件监听器。两种方式:

1、匿名内部类作为单击事件监听器,这里添加内容为显示被点击的按钮内容。

1
2
3
4
5
6
7
//按钮3的点击事件
mBtn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(ButtonActivity.this,"btn3我被点击了",Toast.LENGTH_SHORT).show();
}
});

2、通过onClick属性实现

① 在Activity中编写一个包含View类型参数的方法。  public void myClick(View view){}

② 将android:onClick属性指定为 ① 内的方法名。   android:onClick=”myClick”

扩展 :ImageButton图片按钮

通过src属性指定

四、EditText(编辑框)

属性

android:hint=”请输入用户名” :输入框提示信息

android:inputType=”number”:规定输入格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
android:inputType="none"//输入普通字符
android:inputType="text"//输入普通字符
android:inputType="textCapCharacters"//输入普通字符
android:inputType="textCapWords"//单词首字母大小
android:inputType="textCapSentences"//仅第一个字母大小
android:inputType="textAutoCorrect"//前两个自动完成
android:inputType="textAutoComplete"//前两个自动完成
android:inputType="textMultiLine"//多行输入
android:inputType="textImeMultiLine"//输入法多行(不一定支持)
android:inputType="textNoSuggestions"//不提示
android:inputType="textUri"//URI格式
android:inputType="textEmailAddress"//电子邮件地址格式
android:inputType="textEmailSubject"//邮件主题格式
android:inputType="textShortMessage"//短消息格式
android:inputType="textLongMessage"//长消息格式
android:inputType="textPersonName"//人名格式
android:inputType="textPostalAddress"//邮政格式
android:inputType="textPassword"//密码格式
android:inputType="textVisiblePassword"//密码可见格式
android:inputType="textWebEditText"//作为网页表单的文本格式
android:inputType="textFilter"//文本筛选格式
android:inputType="textPhonetic"//拼音输入格式

//数值类型
android:inputType="number"//数字格式
android:inputType="numberSigned"//有符号数字格式
android:inputType="numberDecimal"//可以带小数点的浮点格式
android:inputType="phone"//拨号键盘
android:inputType="datetime"//日期+时间格式
android:inputType="date"//日期键盘
android:inputType="time"//时间键盘
转自CSDN:原文链接:https://blog.csdn.net/zhangphil/article/details/79970667

同样也可在编辑框里添加图片等操作,android:drawableLeft=”@drawable/name” 。(与android:drawableStart相同)

同理:android:drawableBottom,android:drawableRight(android:drawableEnd)

android:drawablePadding:内边距

android:lines:限制行数,超出时向上滚动。

getText():获取编辑框内容

五、RadioButton(单选框)

RadioGroup 为单项选择按钮组,其中可以包含多个 RadioButton,即单选按钮,它们共同为用户提供一种多选一的选择方式。在多个 RadioButton 被同一个 RadioGroup 包含的情况下,多个 RadioButton 之间自动形成互斥关系,仅有一个可以被选择。

基本格式:

1
2
3
4
5
<RadioGroup>
  <RadioButton/>
  <RadioButton/>
  .....
</RadioGroup>

RadioGroup中也有orientation属性,即选择水平或竖直方向排列RadioButton。

RadioButton中的属性:

按钮名称:android:text=”name”

表示被默认选中的选项:android:checked=”true”
设置按钮形状:android:button=”@null”(表示不设置)

可以自定义按钮选中时的样式:

同样在drawable目录下新建xml文件修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape>
<solid android:color="#CC7A00"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item android:state_checked="false">
<shape>
<stroke
android:width="1dp"
android:color="#CC7A00"/>
<corners android:radius="5dp"/>
</shape>
</item>
</selector>

其中state_checked表示是否选中的状态

效果:

这种效果时通过背景实现不同的状态表示。

添加选中事件获取选中的内容。

1
2
3
4
5
6
7
8
9
10
//获取单选按钮组RadioGroup mRg1,设置选中监听事件
mRg1.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
//根据选中的checkedId值获取内容
RadioButton radioButton = group.findViewById(checkedId);
//输出
Toast.makeText(RadioButtonActivity.this,radioButton.getText(),Toast.LENGTH_SHORT).show();
}
});

六、CheckBox(多选框)

大致与单选相同,介绍另一种通过自定义改变按钮形状实现按钮样式。

这里将 android:button=”@drawable/bg_checkbox” 设置为自定义的。bg_checkbox同样新建的xml文件。

1
2
3
4
5
6
7
8
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="false"
android:drawable="@drawable/face"/>
<item
android:state_checked="true"
android:drawable="@drawable/selection"/>
</selector>

七、ImageView(图片视图)

1、介绍属性

background为背景,src为内容。

scaleType:覆盖方式,常见属性值有:

  fixXY:撑满控件,宽高比可能发生改变。

  fitCenter:保持宽高比缩放,直至能够完全显示。

  centerCrop:保持宽高比缩放,直至能够完全覆盖控件,剪裁显示。

2、加载网络图片

首先使用第三方的库,这里选择的是Github上的glide库

https://github.com/bumptech/glide

将其添加到Android Studio中的build.gradle目录下。

同步好后在activity的Java代码部分添加代码

1
2
3
4
5
6
7
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_view);
mIv2 = findViewById(R.id.iv_2);
//加载一张网络图片
Glide.with(this).load("http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg").into(mIv2);
}

同时需要在AndroidManifest.xml中声明使用网络权限。

添加一行代码: 即可。

八、日期选择器,时间选择器,计时器

1、DatePicker(日期选择器)

即可显示日期,可以添加事件接收选择的日期。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
int year,month,day;
DatePicker datePicker;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_date_pcker);
//日期选择器的id为datepicker
datePicker = findViewById(R.id.datepicker);
Calendar calendar = Calendar.getInstance();
//初始化
year = calendar.get(calendar.YEAR);
month = calendar.get(calendar.MONTH);
day = calendar.get(calendar.DAY_OF_MONTH);
//添加选择事件
datePicker.init(year, month, day, new DatePicker.OnDateChangedListener() {
@Override
public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
DatePickerActivity.this.year = year;
DatePickerActivity.this.month = monthOfYear;
DatePickerActivity.this.day = dayOfMonth;
show(year,month,day);
}
});
}

private void show(int year,int month,int day) {
String str = year+"年"+(month+1)+"月"+day+"日";
Toast.makeText(DatePickerActivity.this,str,Toast.LENGTH_SHORT).show();
}

2、TimePicker(时间选择器)

显示时间,添加一个监听器。

1
2
3
4
5
6
7
8
9
10
11
//timepicker为时间选择器的id
TimePicker tp = findViewById(R.id.timepicker);
tp.setIs24HourView(true);//采用24小时支持
//时间改变的监听器
tp.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
@Override
public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
String str = hourOfDay+"时"+minute+"分";
Toast.makeText(TimePickerActivity.this,str,Toast.LENGTH_SHORT).show();
}
});

3、Chronometer(计时器)

属性通常设置 android:format=”已用时间:%s” 表示用时分秒的格式计时。

并通常需要为计时器设定四个方法。

① setBase():设置计时器的起始时间

② setFormat():设置显示时间的格式

③ start():指定开始计时

④ stop():指定结束计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Chronometer ch ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_chronometer);
ch = findViewById(R.id.chromometer);
//获取当前的系统时间
ch.setBase(SystemClock.elapsedRealtime());
//设置时间格式
ch.setFormat("%s");
//开启计时器
ch.start();
//添加监听器,计时器改变时触发
ch.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
@Override
public void onChronometerTick(Chronometer chronometer) {
if(SystemClock.elapsedRealtime()-ch.getBase()>=60000){//如果大于60s,停止计时
ch.stop();
}
}
});
}

综上,第一部分总结。


以下为第二部分总结。

一、ProgressBar(进度条)

进度条有两种形式,圆形加载式和水平长条形状,可通过style属性设置(注意:前面没有android:)

列举几种:

  ?android:attr/progressBarStyleHorizontal    细水平长度进度条

  ?android:attr/progressBarStyleSmall      旋转画面的小圆形进度条

  ?android:attr/progressBarStyleLarge      旋转画面的大圆形进度条

  @android:style/Widget.ProgressBar.Horizontal  粗水平长度进度条

  @android:style/Widget.ProgressBar.Small    旋转画面的小圆形进度条

  @android:style/Widget.ProgressBar.Large    旋转画面的大圆形进度条

android:max=”100”      该属性设置进程的最大值
android:progress=”50”   表示初始的进程值

实现动态进度条步骤:

创建线程,判断耗时操作是否完成,若没有完成,调用进度条的setProgress()方法更新进度,然后循环操作,直到耗时操作完成,然后调用setVisibility()方法设置进度条不显示。

1
2
3
4
5
6
7
8
9
    <!--    style确定进度条样式,max指定进度条值,便于后台判断    -->
<ProgressBar
android:id="@+id/progressbar"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="60dp"
android:max="100"/>

后台Java代码:

private ProgressBar progressBar;
private int mProgress=0;
private Handler mhandler;//消息处理对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_progress_bar);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);//设置全屏显示
progressBar = findViewById(R.id.progressbar);
mhandler = new Handler(){
@Override
public void handleMessage(Message msg) {
//判断线程是否完成,未完成则更新进度,完成则隐藏(通过线程模拟耗时操作)
if(msg.what==0x111)
progressBar.setProgress(mProgress);
else
{
Toast.makeText(ProgressBarActivity.this,"耗时操作已完成",Toast.LENGTH_SHORT).show();
progressBar.setVisibility(View.GONE);//设置进度条不显示
}

}
};
new Thread(new Runnable() {
@Override
public void run() {
while(true){
mProgress = doWork();//耗时操作
Message message = new Message();
if(mProgress<100){//耗时操作未完成
message.what=0x111;//自定义消息代码,表示未完成
mhandler.sendMessage(message);//发送消息,更新进度
}else{
message.what=0x110;//表示已完成
mhandler.sendMessage(message);
break;
}
}
}
private int doWork(){//自定义doWork方法,模拟耗时
mProgress+=Math.random()*10;//利用随机数生成加载进度
try {
Thread.sleep(200);
} catch (InterruptedException e) {
e.printStackTrace();
}
return mProgress;
}
}).start();
}

二、SeekBar(拖动条)

是ProgressBar的子类,有些相同之处。

属性:

与ProgressBar一样,有 max,progress属性。

android:thumb=”@drawable/pwd”属性设置进度条的按钮形状。

使用时,需要添加可以获取进度条改变的事件监听器,来改变当前显示的内容。

seekseekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {//进度改变所执行的方法
Toast.makeText(SeekBarActivity.this,”进度改变:”+progress,Toast.LENGTH_SHORT).show();
}

1
2
3
4
5
6
7
8
9
10
    @Override
public void onStartTrackingTouch(SeekBar seekBar) {//开始触摸所执行的方法
Toast.makeText(SeekBarActivity.this,"开始触摸",Toast.LENGTH_SHORT).show();
}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {
Toast.makeText(SeekBarActivity.this,"停止触摸",Toast.LENGTH_SHORT).show();
}
});

三、RatingBar(星级评分条)

属性:

android:numStars=”5” 代表有五颗星
android:rating=”4”   代表默认选择四颗
android:stepSize=”1” 选择的最小单位为一颗

android:isIndicator=”true” 代表不可改变

注意:宽度不要设置为match_parent,否则会影响星星数量。

package com.example.tiange_project;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class RatingBarActivity extends AppCompatActivity {

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
private RatingBar ratingBar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_rating_bar);
ratingBar = findViewById(R.id.ratingbar);
//获取选中几颗星
String rating = String.valueOf(ratingBar.getRating());
Toast.makeText(RatingBarActivity.this,"Rating:"+rating,Toast.LENGTH_SHORT).show();
//获取改变的星星数量
String stepSize = String.valueOf(ratingBar.getStepSize());
Toast.makeText(RatingBarActivity.this,"StepSize:"+stepSize,Toast.LENGTH_SHORT).show();
//获取进度
String progress = String.valueOf(ratingBar.getProgress());
Toast.makeText(RatingBarActivity.this,"Progress:"+progress,Toast.LENGTH_SHORT).show();

//2、添加单击事件,提交按钮
Button button = findViewById(R.id.rating_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
float rating = ratingBar.getRating();
Toast.makeText(RatingBarActivity.this,"你得到了"+rating+"颗星!",Toast.LENGTH_SHORT).show();
}
});
}

}

四、ImageSwitcher(图像切换器)

设置切换图片的淡入淡出效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
package com.example.tiange_project;

import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;

import androidx.appcompat.app.AppCompatActivity;

public class ImageSwitcherActivity extends AppCompatActivity {
private ImageSwitcher imageSwitcher;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_switcher);
imageSwitcher = findViewById(R.id.imageswitcher);
//设置淡出动画
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this,android.R.anim.fade_out));
//设置进入动画
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this,android.R.anim.fade_in));

imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
@Override
public View makeView() {//为图像切换器指定视图工厂
ImageView imageView = new ImageView(ImageSwitcherActivity.this);
imageView.setImageResource(R.drawable.image01);
return imageView;
}
});
imageSwitcher.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
((ImageSwitcher)v).setImageResource(R.drawable.image02);
}
});
}

}

五、GrideView(网格视图)

属性:

android:numColumns=”3” 设定列数为3

适配器(Adapter):连接后端数据与前端显示的接口,数据和UI组件的重要纽带。

通过适配器adapter实现数据源显示到GrideView上。

Android提供了四个适配器实现类,分别是

① ArrayAdapter:数组适配器。

② SimpleAdapter:简单适配器,功能强大。

③ SimpleCursorAdapter:简单数据库适配器。

④ BaseAdapter:对各个列表项进行限制。

为GrideView添加适配器

在Java代码中添加适配器,但在使用其时,一般先创捷一个布局文件cell.xml(在其内部添加ImageView组件,显示视图)。我们可在其中任意自定义资源文件,以显示不同的效果。

package com.example.tiange_project;

import android.os.Bundle;
import android.widget.GridView;
import android.widget.SimpleAdapter;

import androidx.appcompat.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class GrideViewActivity extends AppCompatActivity {
//创建int数组,记录资源id
private int[] picture = new int[]{R.drawable.img01,R.drawable.img02,R.drawable.img03,
R.drawable.img04,R.drawable.img05,R.drawable.img06,
R.drawable.img07,R.drawable.img08,R.drawable.img09};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_gride_view);
GridView gridView = findViewById(R.id.grideview);
//存储图片资源
List<Map<String,Object>> listitem = new ArrayList<Map<String,Object>>();
for(int i = 0;i<picture.length;i++){//通过for循环添加对象
Map<String,Object> map = new HashMap<String,Object>();
map.put("image",picture[i]);
listitem.add(map);
}
//建立适配器对象
SimpleAdapter simpleAdapter = new SimpleAdapter(this,listitem,R.layout.cell,new String[]{"image"},new int[]{R.id.image});
//设置适配器
gridView.setAdapter(simpleAdapter);
}

}

六、Spinner(下拉列表)

属性:

entries=“” 是一个数组资源,表示下拉列表的内容选项。数据存储在values下自己新建的arrays目录。

在其中编写代码

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 使用item添加各个数组元素 -->
<string-array name="ctype">
<item>全部</item>
<item>电影</item>
<item>图书</item>
<item>游戏</item>
</string-array>
</resources>

即可正常显示出下拉列表。

也可通过适配器设置下拉选项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package com.example.tiange_project;

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class SpinnerActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_spinner);
String[] ctype = new String[]{"全部","1","2","3"};
//数组适配器
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,ctype);
//为适配器设置下拉的选择样式
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
Spinner spinner = findViewById(R.id.spinner);
spinner.setAdapter(adapter);
//获取选择的选项
String str = spinner.getSelectedItem().toString();
Toast.makeText(SpinnerActivity.this,str,Toast.LENGTH_SHORT).show();
}
}

七、ListView(列表视图)

和下拉列表基本一致。

八、滚动视图

分为 ScrollView(垂直滚动) 和 HorizontalScrollView(水平滚动)

要注意的是,其中只能包含一个组件,若要包含多个,则需要用布局管理器将其包含起来。

九、选项卡

在Android中,没有固定的组件实现,一般通过以下四个步骤实现。

1、在布局文件中添加TabHost、TabWidget和TabContent组件

2、编写各标签页的xmi布局文件,即各个选项的显示页面。

3、获取并初始化TabHost组件

4、将TabHost添加到标签页中

实例

1、先创建固定格式的布局文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8"?>
<TabHost 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=".TabActivity"
android:id="@android:id/tabhost">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabs">
</TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</LinearLayout>
</TabHost>

2、编写后台Java代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package com.example.tiange_project;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;

import androidx.appcompat.app.AppCompatActivity;

public class TabActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab);
//初始化TabHost组件
TabHost tabHost = findViewById(android.R.id.tabhost);
tabHost.setup();//初始化

LayoutInflater inflater = LayoutInflater.from(this);//用这个对象加载两个标签页的布局文件
inflater.inflate(R.layout.tab1,tabHost.getTabContentView());//1
inflater.inflate(R.layout.tab2,tabHost.getTabContentView());//2
//添加标签页
tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("精选表情").setContent(R.id.left));
tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("投稿表情").setContent(R.id.right));
}
}

注意,tab1和tab2都是自定义的xml布局文件,表示标签页显示的内容。

即可完成。

到此,基本的UI组件学习已经完成,当然每个组件都只是刚刚入门,想要精通还有很长一段路要走。

继续加油吧!

~感谢你请我吃糖果~
-------------本文结束,感谢您的阅读,欢迎评论留言!-------------