3 UI开发
3.1 常用控件的使用
3.1.1 TextView
用于显示文本信息。文字默认居左上角对齐。可以使用 android:gravity 来指定文字的对齐方式,可选值有 top、bottom、left、right、center等,可以用 “|”来同时指定多个值,这里我们指定的center ,效果等同于 center_vertical | center_horizontal,表示文字在垂直和水平方向都居中对齐。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is TextView" />
</LinearLayout>
可以通过 android:textSize 设置文字大小,通过 android:textColor 设置文字颜色。如下:
<TextView
android:id="@+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="24sp"
android:textColor="#00ff00"
android:text="This is TextView" />
Android中字体大小使用sp为单位。
3.1.2 Button
系统会对Button中所有的英文字母自动进行大写转换,如果不想要这种效果,可以使用android:textAllCaps="false"
来禁用这一默认属性:
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
android:textAllCaps="false" />
在MainActivity中给Button的点击事件注册一个监听器,两种方式:
方式一——匿名类:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = findViewById(R.id.button);
// 匿名类方式给按钮注册监听器
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 此处添加逻辑
}
});
}
方式二——实现 View.OnClickListener 接口
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = findViewById(R.id.button);
button.setOnClickListener(this);
}
// 实现View.OnClickListener接口,重写onClick()方法
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.button:
// 在此处添加逻辑
break;
default:
break;
}
}
}
3.1.3 EditText
允许用户在控件里输入和编辑内容,并可以在程序中对这些内容进行处理。可以使用android:hint="****"
在输入框中加入提示信息,然后一旦用户输入了任何内容,提示性的文字就会消失。
<EditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Type something here"
/>
效果如图:
随着输入内容的不断增多,EditText会被不断拉长。这是由于EditText的高度指定为wrap_content ,因此它总能包含住里面的内容,但是输入的内容过多时,界面就会非常难看。我们可以使用android:maxLines=""
来解决,指定最大行数。
<EditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Type something here"
android:maxLines="3"
/>
当输入的内容超过规定行数(此处为3行)时,文本就会向上滚动,而EditText则不会再继续拉伸。效果如图:
3.1.4 ImageView
界面上展示图片的控件。需要提起准备好一些图片,图片通常都是放在以 “drawable”开头的目录下。目前我们项目中有一个空的drawable 目录,不过由于这个目录没有指定具体的分辨率,所以一般不使用它来放置图片。我们在res目录下新建一个 drawable-xhdpi 目录,然后将事先准备好的两张图片放入其中。
接下来修改activity_main.xml,如下所示:
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/img1"
/>
通过android:src
属性给ImageView指定图片。
还可以在程序中通过代码动态地更改ImageView中的图片。修改MainActivity的代码,如下所示:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private EditText editText;
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = findViewById(R.id.button);
// 获取EditText
editText = findViewById(R.id.edit_text);
// 获取ImageView
imageView = findViewById(R.id.image_view);
button.setOnClickListener(this);
}
// 实现View.OnClickListener接口,重写onClick()方法
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.button:
Toast.makeText(MainActivity.this,inputText,Toast.LENGTH_SHORT).show();*/
imageView.setImageResource(R.drawable.img2);
break;
default:
break;
}
}
}
3.1.5 ProgressBar
用于在界面上系那是一个进度条。
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
Android控件的可见属性:
所有的Android控件都具有这个属性,可以通过android:visibility
进行指定,可选值有3种:visible、invisible、gone。
- visible表示控件是可见的,这个值是默认值,不指定
android:visibility
时,控件都是可见的; - invisible:控件不可见,但它仍然占据着原来的位置和大小,可以理解为控件变成透明状态了;
- gone:控件不仅不可见,而且不再占据任何屏幕控件。
我们还可以通过代码来设置控件的可见性,使用的是setVisibility()方法,可以传入 View.VISIBLE、View.INVISIBLE、View.GONE这三种值。修改MainActivity中 的代码如下:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private EditText editText;
private ImageView imageView;
private ProgressBar progressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = findViewById(R.id.button);
// 获取EditText
editText = findViewById(R.id.edit_text);
// 获取ImageView
imageView = findViewById(R.id.image_view);
// 获取ProgressBar
progressBar = findViewById(R.id.progress_bar);
button.setOnClickListener(this);
}
// 实现View.OnClickListener接口,重写onClick()方法
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.button:
if (progressBar.getVisibility() == View.GONE) {
progressBar.setVisibility(View.VISIBLE);
} else {
progressBar.setVisibility(View.GONE);
}
break;
default:
break;
}
}
}
点击按钮即可切换进度条的可见性。
3.1.6 AlertDialog
当前界面弹出一个对话框,这个对话框是置于所有界面元素之上的,能给屏蔽掉其他控件的交互能力。因此AlertDialog 一般多是用于提示非常重要的内容或者警告信息。
public void onClick(View v) {
switch (v.getId()) {
case R.id.button:
AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
dialog.setTitle("This is Dialog");
dialog.setMessage("zhh好看吗?");
dialog.setCancelable(false);// 是否用Back键关闭对话框(否)
dialog.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(MainActivity.this,"zhh好看好看最好看!",Toast.LENGTH_LONG).show();
}
});
dialog.setNegativeButton("No", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(MainActivity.this,"你撒谎你个骗子",Toast.LENGTH_LONG).show();
}
});
dialog.show();
break;
default:
break;
}
}
注释:dialog.setCancelable(false);// 是否用Back键关闭对话框(否)
参数为false——Back键无法关闭对话框;true——可以。
3.1.7 ProgressDialog
显示一个对话框并在对话框中显示一个进度条。一般用于表示当前操作比较耗时,让用户耐心等待。修改MainActivity代码如下:
public void onClick(View v) {
switch (v.getId()) {
case R.id.button:
ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
progressDialog.setTitle("This is ProgressDialog");
progressDialog.setMessage("加载中…");
progressDialog.setCancelable(true);
progressDialog.show();
break;
default:
break;
}
}
效果:
**注意:**如果在setCancelable()中传入false,表示ProgressDialog是不能通过Back键取消的,此时就一定要在代码中做好控制,当数据加载完毕后必须要调用ProgressDialog的dismiss()方法来关闭对话框,否则ProgressDialog将会一直存在。
3.2 详解4种布局
布局是一种可用于放置很多控件的容器,它可以按照一定的规律调整内部控件的位置,从而编写出精美的界面。当然,布局的内部除了放置控件外,也可以放置布局,通过多层布局的嵌套,就能够完成一些比较复杂的界面实现。
3.2.1 线性布局
LinearLayout又称线性布局,是一种非常常用的布局。这个布局会将它所包含的控件在线性方向上依次排列。通过 android:orientation
属性指定排列发方向,取值有:vertical——垂直;horizontal——水平。
android:layout_gravity
属性,指定控件在布局中的对齐方式。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="Button1"
/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button2"
/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button3"
/>
</LinearLayout>
效果:
android:layout_weight
属性:允许使用比例的方式来指定控件的大小,在手机屏幕的适配性方面可以起到非常重要的左右。例如:编写一个消息发送界面,需要一个文本编辑器和一个发送按钮,修改activity_main.xml 中的代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<EditText
android:id="@+id/input_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="请输入信息" />
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发送" />
</LinearLayout>
效果:
EditText的宽度指定成了0dp,不会影响宽度,指定属性android:layout_weight
之后,控件的宽度不应该再由android:layout_width
来决定,这里指定成 0dp 是一种比较规范的写法。
3.2.3 相对布局
RelativeLayout 又称作相对布局,也是一种非常常用的布局。和LinearLayout的排列规则不同,RelativeLayout 显得更加随意一些,它可以通过相对定位的方式让控件出现在布局的任何位置。也正因为如此,RelativeLayout中的属性非常多。修改xml文件如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button 1"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button 2"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button 3"/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="Button 4"/>
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:text="Button 5"/>
</RelativeLayout>
效果:
3.2.3 帧布局
FrameLayout又称作 帧布局,相比于前面两种布局简单了很多,因此它的应用场景也就少了很多。这种布局没有方便的定位方式,所有的控件都会默认摆放在布局的左上角。使用android:layout_gravity
可以指定对齐方式。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="This is TextView" />
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="@mipmap/ic_launcher" />
</FrameLayout
效果:
总体来讲,FrameLayout由于定位方式的欠缺,导致它的应用场景较少,不过在碎片中可以用到。
3.2.4 百分比布局
在这种布局中,不再使用 wrap_content、match_parent 等方式来指定控件的大小,而是允许直接指定控件在布局中所占的百分比,这样的话就可以轻松实现平分布局甚至是任意比例分割布局的效果。
由于LinearLayout 本身已经支持按比例指定控件的大小了,因此百分比布局只为FrameLayout 和 RelativeLayout 进行了功能扩展,提供了 PercentFrameLayout 和 PercentRelativeLayout 这两个全新的布局。
不同于前三种布局,百分比布局属于新增布局,那么怎样才能做到让新增布局在所有Android版本上都能使用呢?为此,Android 团队将百分比布局定义在了 support库 中,我们只需要在项目的 build.gradle 中添加百分比布局库的依赖,就能保证百分比布局在 Android 所有系统版本上的兼容性了。
打开app/build.gradle 文件,在 dependencies 闭包中添加如下内容(与郭神书中所述有些出入,版本更新导致,我的As版本3.5.2):
dependencies {
// 添加百分比布局库的依赖
implementation 'androidx.percentlayout:percentlayout:1.0.0'
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.1'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}
需要注意的是,每当修改了任何 gradle 文件时,As 都会弹出一个如图所示的提示:
点击 Sync No 进行同步。
修改layout中的 *.xml 文件,代码如下(新版本取消了support库,放在androidx下):
<androidx.percentlayout.widget.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_gravity="left|top"
android:text="Button 1"
app:layout_heightPercent="50%"
app:layout_widthPercent="50%" />
<Button
android:id="@+id/button2"
android:layout_gravity="right|top"
android:text="Button 2"
app:layout_heightPercent="50%"
app:layout_widthPercent="50%" />
<Button
android:id="@+id/button3"
android:layout_gravity="left|bottom"
android:text="Button 3"
app:layout_heightPercent="50%"
app:layout_widthPercent="50%" />
<Button
android:id="@+id/button4"
android:layout_gravity="right|bottom"
android:text="Button 4"
app:layout_heightPercent="50%"
app:layout_widthPercent="50%" />
</androidx.percentlayout.widget.PercentFrameLayout>
效果:
注:Android中还有 AbsoluteLayout、TableLayout等布局,不过使用得实在太少,不做讲解。
3.3 创建自定义控件
控件和布局的继承结构:
由图可知,我们所用的所有控件都是直接或间接继承自View 的,所用的所有布局都是直接或间接继承自 ViewGroup的。View是Android中最基本的一种UI组件,它可以在屏幕上绘制一块矩形区域,并能响应这块区域的各种事件,因此,我们使用的各种控件其实就是在 View的基础上又添加了各自特有的功能。而 ViewGroup则是一种特殊的 View,它可以包含很多子 View和子ViewGroup,是一个用于放置控件和布局的容器。
3.3.1 引入布局
界面顶部标题栏的实现:
1.新建布局title.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/title_bg">
<Button
android:id="@+id/title_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:background="@drawable/back_bg"
android:text="Back"
android:textColor="#fff" />
<TextView
android:id="@+id/text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="Title text"
android:textColor="#fff"
android:textSize="24sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:background="@drawable/edit_bg"
android:text="Edit"
android:textColor="#fff" />
</LinearLayout>
2.程序中使用这个标题栏
修改activity.xml 中的代码,如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/title" />
</LinearLayout>
3.在MainActivity 中将系统自带的标题栏隐藏掉,代码如下:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
actionBar.hide();
}
}
效果:
3.3.2 创建自定义控件
如果标题栏的返回按钮,不管在哪一个活动中,这个按钮的功能都是相同的,即销毁当前活动,此时最好使用自定义控件的方式来实现。
新建TitleLayout 继承自 LinearLayout,让它成为我们自定义的标题栏控件,代码如下:
public class TitleLayout extends LinearLayout {
public TitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title,this);
}
}
重写了LinearLayout中带有两个参数的构造函数,在布局中引入TitleLayout控件就会调用这个构造函数。然后在构造函数中想、需要对标题栏布局进行动态加载,就要借助LayoutInflater 来实现。
自定义kongjian创建好之后,需要在布局文件中添加这个自定义控件,修改activity.xml中的代码,如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.ts.uicustomviews.TitleLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
添加自定义控件和添加普通控件的方式基本是一样的,只不过在添加自定义控件的时候,我们需要指明控件的完整类名,包名在这里不可以省略。
为标题栏的按钮注册点击事件,修改TitleLayout中的代码,如下:
public class TitleLayout extends LinearLayout {
public TitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title,this);
Button titleBack = findViewById(R.id.title_back);
Button titleEdit = findViewById(R.id.title_edit);
titleBack.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
((Activity)getContext()).finish();
}
});
titleEdit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getContext(),"You clicked Edit button",Toast.LENGTH_SHORT).show();
}
});
}
}
3.4 最常用和最难用的控件——ListView
ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内,同时屏幕上原有的数据则会滚出屏幕。
3.4.1 ListView的简单用法
新建ListViewTest项目,修改activity_main.xml中代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
修改MainActivity中的代码如下:
public class MainActivity extends AppCompatActivity {
private String[] data = {"Apple", "Banana", "Orange", "Watermelon",
"Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango",
"Apple", "Banana", "Orange", "Watermelon",
"Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,data);
ListView listView = findViewById(R.id.list_view);
listView.setAdapter(adapter);
}
}
数组中的数据无法直接传递给ListView,需要借助于适配器,此处使用ArrayAdapter。
效果:
3.4.2 定制ListView的界面
给每行数据前添加图片。
1 定义一个实体类 Fruit,作为ListView 适配器的适配类型。
public class Fruit {
private String name; // 水果名
private int imageId; // 对应图片的资源id
public Fruit(String name, int imageId) {
this.name = name;
this.imageId = imageId;
}
public String getName() {
return name;
}
public int getImageId() {
return imageId;
}
}
2 为ListView 的子项指定一个我们自定义的布局,在layout 目录下新建 fruit_item.xml ,代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/fruit_iamge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/fruit_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp" />
</LinearLayout>
3 创建一个自定义的适配器,继承自 ArrayAdapter,并将泛型指定为Fruit 类。新建类 FruitAdapter,代码如下:
public class FruitAdapter extends ArrayAdapter {
private int resourceId;
public FruitAdapter(Context context, int textViewResourceId, List<Fruit> objects) {
super(context, textViewResourceId, objects);
resourceId = textViewResourceId;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Fruit fruit = (Fruit) getItem(position);
View view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false);
ImageView fruitImage = view.findViewById(R.id.fruit_iamge);
TextView fruitName = view.findViewById(R.id.fruit_name);
fruitImage.setImageResource(fruit.getImageId());
fruitName.setText(fruit.getName());
return view;
}
}
4 修改 MainActivity 中的代码,如下:
public class MainActivity extends AppCompatActivity {
private List<Fruit> fruitList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initFruits(); // 初始化水果数据
FruitAdapter adapter = new FruitAdapter(MainActivity.this,R.layout.fruit_item,fruitList);
ListView listView = findViewById(R.id.list_view);
listView.setAdapter(adapter);
}
// 初始化水果数据的方法
private void initFruits(){
for (int i=0;i<2;i++){
Fruit apple = new Fruit("Apple",R.drawable.apple);
fruitList.add(apple);
Fruit banana = new Fruit("Banana",R.drawable.banana);
fruitList.add(banana);
Fruit orange = new Fruit("Orange",R.drawable.orange);
fruitList.add(orange);
Fruit watermelon = new Fruit("Watermelon",R.drawable.watermelon);
fruitList.add(watermelon);
Fruit pear = new Fruit("Pear",R.drawable.pear);
fruitList.add(pear);
Fruit grape = new Fruit("Grape",R.drawable.grape);
fruitList.add(grape);
Fruit pineapple = new Fruit("Pineapple",R.drawable.pineapple);
fruitList.add(pineapple);
Fruit strawberry = new Fruit("Strawberry",R.drawable.strawberry);
fruitList.add(strawberry);
Fruit cherry = new Fruit("Cherry",R.drawable.cherry);
fruitList.add(cherry);
Fruit mango = new Fruit("Mango",R.drawable.mango);
fruitList.add(mango);
}
}
}
5 效果
3.4.3 提升ListView的运行效率
目前我们 ListView 的运行效率很低,因为在 FruitAdapter的getView() 方法中,每次都将布局重新加载了一遍,当ListView 快速滚动的时候,这就会成为性能的瓶颈。
优化方式:
getView()方法中还有一个 convertView 参数,这个参数用于将之前加载好的布局进行缓存,以便之后进行重用。修改 FruitAdapter 中的代码,如下:
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Fruit fruit = (Fruit) getItem(position);
View view;
// 通过加入判断提高运行效率
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
} else {
view = convertView;
}
ImageView fruitImage = view.findViewById(R.id.fruit_iamge);
TextView fruitName = view.findViewById(R.id.fruit_name);
fruitImage.setImageResource(fruit.getImageId());
fruitName.setText(fruit.getName());
return view;
}
还可继续优化:
虽然现在已经不会再重复去加载布局,但是每次在 getView() 方法中还是会调用 View的 findViewById() 方法来获取一次控件的实例。我们可以借助于一个 ViewHolder 来对这部分性能进行优化,修改 FruitAdapter 中的代码,如下:
public class FruitAdapter extends ArrayAdapter<Fruit> {
private int resourceId;
public FruitAdapter(Context context, int textViewResourceId, List<Fruit> objects) {
super(context, textViewResourceId, objects);
resourceId = textViewResourceId;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Fruit fruit = getItem(position);
View view;
ViewHolder viewHolder;
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
viewHolder = new ViewHolder();
viewHolder.fruitImage = view.findViewById(R.id.fruit_iamge);
viewHolder.fruitName = view.findViewById(R.id.fruit_name);
view.setTag(viewHolder); // 将 ViewHolder存储在View中
} else {
view = convertView;
viewHolder = (ViewHolder) view.getTag(); // 重新获取 viewHolder
}
viewHolder.fruitImage.setImageResource(fruit.getImageId());
viewHolder.fruitName.setText(fruit.getName());
return view;
}
class ViewHolder{
ImageView fruitImage;
TextView fruitName;
}
}
其中新增了一个内部类,用于对控件的实例进行缓存。
3.3.4 ListView的点击事件
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Fruit fruit = fruitList.get(position);
Toast.makeText(MainActivity.this,fruit.getName(),Toast.LENGTH_SHORT).show();
}
});
3.5 更强大的滚动控件——RecyclerView
背景:ListView虽然强大,但是并非完全没有缺点,比如我们不使用技巧来提升它的运行效率,那么它的性能非常差。还有 ListView的扩展性不够好,只能实现数据纵向滚动,无法实现横向滚动。
为此,RecyclerView 应运而生,可以理解为加强版的ListView。轻松实现和ListView 同样的效果,还优化了 ListView中存在的各种不足之处。
3.5.1 RecyclerView的基本用法
1 在 app/build.gradle文件概念,添加下图所示红色部分的依赖(As版本为3.5.2,版本不同添加上方式略有不同,请留意):
2 添加完记得点击一个 Sync Now 来同步。然后修改 activity_main.xml 中的代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
注意:由于RecyclerView并不是内置在系统SDK当中的,所以需要把完整的包路径写出来。
3 图片、Fruit类、fruit_item.xml 和ListViewTest 项目中一样,直接复制过来。新建FruitAdapter类,让这个适配器继承自 RecyclerView.Adapter,并将泛型指定为FruitAdapter.ViewHolder。其中ViewHolder使我们在FruitAdapter中定义的一个内部类,代码如下:
public class FruitAdapter extends RecyclerView.Adapter <FruitAdapter.ViewHolder>{
private List<Fruit> mFruitList;
public FruitAdapter(List<Fruit> fruitList) {
mFruitList = fruitList;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,parent,false);
ViewHolder viewHolder = new ViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
Fruit fruit = mFruitList.get(position);
holder.fruitImage.setImageResource(fruit.getImageId());
holder.fruitName.setText(fruit.getName());
}
@Override
public int getItemCount() {
return mFruitList.size();
}
static class ViewHolder extends RecyclerView.ViewHolder {
ImageView fruitImage;
TextView fruitName;
public ViewHolder(@NonNull View itemView) {
super(itemView);
fruitImage = itemView.findViewById(R.id.fruit_iamge);
fruitName = itemView.findViewById(R.id.fruit_name);
}
}
}
4 修改MainActivity中的代码
public class MainActivity extends AppCompatActivity {
private List<Fruit> fruitList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initFruits();// 初始化水果数据
RecyclerView recyclerView = findViewById(R.id.recycler_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
FruitAdapter adapter = new FruitAdapter(fruitList);
recyclerView.setAdapter(adapter);
}
// 初始化水果方法
private void initFruits() {
for (int i = 0; i < 3; i++) {
Fruit apple = new Fruit("Apple", R.drawable.apple);
fruitList.add(apple);
Fruit banana = new Fruit("Banana", R.drawable.banana);
fruitList.add(banana);
Fruit orange = new Fruit("Orange", R.drawable.orange);
fruitList.add(orange);
Fruit watermelon = new Fruit("Watermelon", R.drawable.watermelon);
fruitList.add(watermelon);
Fruit pear = new Fruit("Pear", R.drawable.pear);
fruitList.add(pear);
Fruit grape = new Fruit("Grape", R.drawable.grape);
fruitList.add(grape);
Fruit pineapple = new Fruit("Pineapple", R.drawable.pineapple);
fruitList.add(pineapple);
Fruit strawberry = new Fruit("Strawberry", R.drawable.strawberry);
fruitList.add(strawberry);
Fruit cherry = new Fruit("Cherry", R.drawable.cherry);
fruitList.add(cherry);
Fruit mango = new Fruit("Mango", R.drawable.mango);
fruitList.add(mango);
}
}
}
3.5.2 实现横向滚动和瀑布流布局
1 首先对fruit_item.xml进行修改,将它里面的元素改成垂直排列。如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/fruit_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<TextView
android:id="@+id/fruit_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp" />
</LinearLayout>
2 修改MainActivity中的代码如下:
public class MainActivity extends AppCompatActivity {
private List<Fruit> fruitList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initFruits();// 初始化水果数据
RecyclerView recyclerView = findViewById(R.id.recycler_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
// 水平***************
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
// 水平***************
recyclerView.setLayoutManager(layoutManager);
FruitAdapter adapter = new FruitAdapter(fruitList);
recyclerView.setAdapter(adapter);
}
...
}
3 效果
ListView和RecyclerView在布局上的区别:
ListView的布局排列是由自身去管理的,而RecyclerView 则将这个工作交给了 LayoutManager,LayoutManager 中制定了一套可扩展的布局排列接口,自雷只需要按照接口的规范来实现,就能定制出各种不同排列方式的布局了。
除了LinearLayoutManager 之外,RecyclerView还给我们提供了 GridLayoutManager和 StaggerGridLayoutManager 这两种内置的布局排列方式。GridLayoutManager 可以用于实现网格布局,StaggerGridLayoutManager 可以用于实现瀑布流布局。
3.5.3 RecyclerView的点击事件
RecyclerView 并没有提供类似于setOnItemClickListener()这样的注册监听器方法,而是需要我们自己给子项具体的View去注册点击事件。
1 修改FruitAdapter :
public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
private List<Fruit> mFruitList;
public FruitAdapter(List<Fruit> fruitList) {
mFruitList = fruitList;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item, parent, false);
final ViewHolder holder = new ViewHolder(view);
holder.fruitView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getAdapterPosition();
Fruit fruit = mFruitList.get(position);
Toast.makeText(v.getContext(), "You clicked view " + fruit.getName(), Toast.LENGTH_SHORT).show();
}
});
holder.fruitImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getAdapterPosition();
Fruit fruit = mFruitList.get(position);
Toast.makeText(v.getContext(),"You clicked image "+fruit.getName(),Toast.LENGTH_SHORT).show();
}
});
return holder;
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
Fruit fruit = mFruitList.get(position);
holder.fruitImage.setImageResource(fruit.getImageId());
holder.fruitName.setText(fruit.getName());
}
@Override
public int getItemCount() {
return mFruitList.size();
}
static class ViewHolder extends RecyclerView.ViewHolder {
View fruitView;
ImageView fruitImage;
TextView fruitName;
public ViewHolder(@NonNull View itemView) {
super(itemView);
fruitView = itemView;
fruitImage = itemView.findViewById(R.id.fruit_image);
fruitName = itemView.findViewById(R.id.fruit_name);
}
}
}
2 效果
点击图片 :
点击文字,由于 TextView并没有注册点击事件,因此点击文字这个事件会被子项的最外层布局捕获到。如下: