$《第一行代码:Android》读书笔记——第3章 UI基础
(一)Android常用控件及简单用法
1、如下图:

2、补充:
(1)margin:外边距;padding:内边距。
(2)gravity:子元素的位置;layout_gravity:子元素在父元素中的位置。
(3)当布局方向为横向时,不能指定子元素在横向上的对齐方式;竖向同理。
(二)四种布局
1、布局与控件的嵌套关系:

2、四种基本布局

(三)自定义控件的使用
1、Android中控件和布局的继承结构图:

2、在xml文件中引入布局
假如新建了一个名为title.xml的布局文件,作为标题栏,然后在activity_main.xml中可以用<include layout="@layout/title" />这样的方法引入title.xml的布局。
3、创建自定义控件并为控件中的元素添加点击事件:
(1)title_base.xml和color.xml(用于保存常用颜色)
title_base.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/TitleBaseBg"
android:orientation="horizontal" > <LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="left"
android:orientation="vertical" > <ImageButton
android:id="@+id/title_base_left_ib"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/Transparent"
android:padding="5dp"
android:src="@drawable/back1_64" />
</LinearLayout> <LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" > <TextView
android:id="@+id/title_base_middle_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的App"
android:textColor="@drawable/White"
android:textSize="20sp" />
</LinearLayout> <LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="right"
android:orientation="vertical" > <ImageButton
android:id="@+id/title_base_right_ib"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/Transparent"
android:padding="5dp"
android:src="@drawable/add4_64" />
</LinearLayout> </LinearLayout>
color.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources> <drawable name="TitleBaseBg">#ff272636</drawable>
<drawable name="Transparent">#00ffffff</drawable>
<drawable name="White">#ffffffff</drawable> </resources>
(2)BaseTitleLayout.java,是个抽象类,继承自LinearLayout:
public abstract class BaseTitleLayout extends LinearLayout {
protected ImageButton titleBaseLeftIb;
protected TextView titleBaseMiddleTv;
protected ImageButton titleBaseRightIb;
public BaseTitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title_base, this);
titleBaseLeftIb = (ImageButton) findViewById(R.id.title_base_left_ib);
titleBaseMiddleTv = (TextView) findViewById(R.id.title_base_middle_tv);
titleBaseRightIb = (ImageButton) findViewById(R.id.title_base_right_ib);
changeUI();
onLeftClick();
onRightClick();
}
// 改变标题栏按钮、文字、背景等
protected abstract void changeUI();
// 标题栏左边按钮的点击事件
protected abstract void onLeftClick();
// 标题栏右边按钮的点击事件
protected abstract void onRightClick();
}
(3)MainActivityTitleLayout.java,继承自BaseTitleLayout:
public class MainActivityTitleLayout extends BaseTitleLayout {
public MainActivityTitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void changeUI() {
titleBaseLeftIb.setVisibility(View.INVISIBLE);
}
@Override
protected void onLeftClick() {
}
@Override
protected void onRightClick() {
titleBaseRightIb.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getContext(), "点击了添加按钮", Toast.LENGTH_SHORT)
.show();
}
});
}
}
(4)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="vertical" > <com.easydo.layout.MainActivityTitleLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</com.easydo.layout.MainActivityTitleLayout> </LinearLayout>
(5)MainActivity:
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
}
}
(6)运行效果:
(四)ListView的用法
1、最简单的用法
(1)xml文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <ListView
android:id="@+id/content_lv"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView> </LinearLayout>
(2)MainActivity(详细步骤见注释)
public class MainActivity extends Activity {
// 1.创建数据数组
private String[] animalList = { "猫", "狗", "狐狸", "小熊", "鱼", "老虎",
"长颈鹿", "象", "龙猫" };
ListView listView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 2.创建以数据列表元素类型为泛型的适配器
// 构造函数:第一个参数为上下文;第二个参数为列表项的布局,这里用Android自带的布局;第三个参数为第1步中准备好的数据数组.
// simple_list_item_1:单行显示,其中只有一个TextView
// simple_list_item_2:双行显示,有两个TextView,两行字大小不一样
// two_line_list_item:双行显示,有两个TextView,两行字大小一样
ArrayAdapter<String> adapter = new ArrayAdapter<String>(
MainActivity.this, android.R.layout.simple_list_item_1,
animalList);
// 3.获取xml中的ListView实例
listView = (ListView) findViewById(R.id.content_lv);
// 4.用第2步创建好的适配器来设置ListView实例的内容
listView.setAdapter(adapter);
}
}
(3)运行结果:

2、定制的ListView界面
上面的ListView每个项只能显示一个文本,太单调了,下面通过定制的方式让它丰富起来。实现左边显示一个图片,右边显示动物名字的效果。
步骤如下:
(1)创建一个实体类Animal,作为ListView适配器的类型:
public class Animal {
private String name;
private int imageId;
public Animal(String name, int imageId) {
this.name = name;
// 对应的图片ID
this.imageId = imageId;
}
public String getName() {
return name;
}
public int getImageId() {
return imageId;
}
}
(2)创建animal_item.xml文件,其中包含一个ImageView和一个TextView:
<?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="match_parent"
android:orientation="vertical" > <ImageView
android:id="@+id/animal_img_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content" /> <TextView
android:id="@+id/animal_name_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp" /> </LinearLayout>
(3)创建自定义适配器类AnimalAdapter,以Animal类为泛型,继承自ArrayAdapter<Animal>,重写父类的构造方法和getView方法,getView方法会在每个子项被滚动到屏幕内的时候调用:
public class AnimalAdapter extends ArrayAdapter<Animal> {
private int resourceId;
public AnimalAdapter(Context context, int textViewResourceId,
List<Animal> objects) {
super(context, textViewResourceId, objects);
// textViewResourceId:ListView子项布局的id;objects:数据
resourceId = textViewResourceId;
}
// getView方法会在每个子项被滚动到屏幕内的时候调用
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// 1.获取当前项的Animal实例
Animal animal = getItem(position);
// 2.为这个子项加载传入的布局
View view = LayoutInflater.from(getContext()).inflate(resourceId, null);
// 3.用view的findViewById方法获取到子项布局控件的实例
ImageView animalImage = (ImageView) view
.findViewById(R.id.animal_img_iv);
TextView animalName = (TextView) view.findViewById(R.id.animal_name_tv);
// 4.设置相应控件的内容
animalImage.setImageResource(animal.getImageId());
animalName.setText(animal.getName());
// 5.返回view
return view;
}
}
注:在getView方法里还可以为item的子控件添加点击事件。
(4)MainActivity:
public class MainActivity extends Activity {
// 1.创建动物名字数组和动物数据列表
private String[] animalNameList = { "猫", "狗", "狐狸", "小熊", "鱼", "老虎", "长颈鹿",
"象", "龙猫" };
private List<Animal> animalList = new ArrayList<Animal>();
// 为简单起见,把所有动物的图片都设置为ic_launcher
private int animalImageResourceId = R.drawable.ic_launcher;
ListView listView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 2.初始化动物数据
initAnimals();
// 3.创建自定义的适配器实例
// 构造函数:第一个参数:当前上下文;第二个参数:子项布局xml文件;第三个参数:动物数据List
AnimalAdapter adapter = new AnimalAdapter(MainActivity.this,
R.layout.animal_item, animalList);
// 4.获取ListView实例
listView = (ListView) findViewById(R.id.content_lv);
// 5.设置适配器
listView.setAdapter(adapter);
}
private void initAnimals() {
for (int i = 0; i < animalNameList.length; i++) {
Animal animal = new Animal(animalNameList[i], animalImageResourceId);
animalList.add(animal);
}
}
}
(5)运行效果:

3、提升ListView的效率
在AnimalAdapter的getView方法中,每次都将布局重新加载一遍,当快速滚动屏幕时候就会带来性能问题,为此要做一些优化。修改如下:
public class AnimalAdapter extends ArrayAdapter<Animal> {
private int resourceId;
public AnimalAdapter(Context context, int textViewResourceId,
List<Animal> objects) {
super(context, textViewResourceId, objects);
// textViewResourceId:ListView子项布局的id;objects:数据
resourceId = textViewResourceId;
}
// getView方法会在每个子项被滚动到屏幕内的时候调用
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Animal animal = getItem(position);
// 用于提升性能
View view;
ViewHolder viewHolder;
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resourceId, null);
viewHolder = new ViewHolder();
viewHolder.animalImage = (ImageView) view
.findViewById(R.id.animal_img_iv);
viewHolder.animalName = (TextView) view
.findViewById(R.id.animal_name_tv);
// 将viewHolder存储在View中
view.setTag(viewHolder);
} else {
view = convertView;
// 重新获取viewHolder
viewHolder = (ViewHolder) view.getTag();
}
viewHolder.animalImage.setImageResource(animal.getImageId());
viewHolder.animalName.setText(animal.getName());
return view;
}
// 创建内部类用于缓存,优化性能
class ViewHolder {
ImageView animalImage;
TextView animalName;
}
}
4、为ListView的子项添加点击事件
使用ListView对象的setOnItemClickListener方法,如:
...
listView.setAdapter(adapter); listView.setOnItemClickListener(new OnItemClickListener() { @Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
Animal animal = animalList.get(position);
Toast.makeText(MainActivity.this, animal.getName(),
Toast.LENGTH_SHORT).show();
} });
5、补充:
(1)xml中设置ListView的分割线颜色:android:divider="#000"
(2)将ListView定位到最后一行:listView.setSelection(dataList.size());
(五)单位和尺寸
1、像素密度:每英寸所包含的像素数,单位为dpi.
x方向像素密度值的获取方法:float xdpi = getResources().getDisplayMetrics().xdpi;
y方向像素密度值的获取方法:float ydpi = getResources().getDisplayMetrics().ydpi;
2、使用dp为单位来设置控件的宽和高,就可以保证控件在不同像素密度的屏幕上显示的比例是一致的。使用sp来设置字体大小同理。
(六)制作Nine-Patch图片
详见另一篇博文:Android制作和使用Nine-Patch图片
随机推荐
- eclipse 建立maven项目 显示红叉的解决方法
1.建立好之后就会发现项目有红叉. 这时发现查查在main处,打开项目>属性>Java Build Path>source,发现里边有红叉(如下图),这是由于我们的src/main下 ...
- figure margins too large错误解决
使用Rstudio,遇到下面这个错误: figure margins too large 这是因为界面右下角的“plot”窗口太小,显示不了,将右下角的窗口调大就能解决
- 【转】Monkey测试4——Monkey命令行可用的全部选项
Monkey命令行可用的全部选项 常规 --help 列出简单的用法. -v 命令行的每一个-v将增加反馈信息的级别. Level 0(缺省值)除启动提示.测试完成和最终结果之外,提供较少信息. Le ...
- JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的. 当编写 JavaScript 语句时,请留意是否关闭大小写切换键. 函数 getElementById 与 getElementbyID 是不同的. 同样,变 ...
- sqlserver tips
方括号内的表示一个对象名(视图,存储过程,表 等).列名:正常使用时,加不加一样,但是如果对象名是保留字的话,比如cascade,就必须加:不过建议不用保留字作为对象名 if object_id('[ ...
- ios -逆向-代码混淆
该方法只能针对有.m.h的类进行混淆,静态库等只有.h文件的没法进行混淆 代码混淆,刚刚看到是不是有点懵逼,反正我是最近才接触到这么个东西,因为之前对于代码和APP,只需要实现功能就好了,根本没有考虑 ...
- HDU1712ACboy needs your help【分组背包】
ACboy needs your help Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- Oracle SQL*Loader 数据导入工具
SQL*Loader是一个向Orale大量倒数据的工具,可以从界定文件中导入数据如用 , 界定的,可以从定宽的文件导入数据,
- Linq与扩展方法
使用数据集 /// <summary> /// 库房信息类 /// </summary> public class Kfxx { /// <summary> /// ...
- hdu5125(LIS)
相当于用多个O(nlog(n))LIS来做. // // main.cpp // 160322 // // Created by 陈加寿 on 16/3/22. // Copyright © 2016 ...