【Android】第三章 用户界面下

3.1常用UI布局_LinearLayout

1)概述

布局本身是不能显示出任何数据, 它可以包含一些子视图, 并控制子视图的布局

常用的Layout

LinearLayout

RelativeLayout

FrameLayout

ListView(后面讲)

GridView(后面讲)

其它

2)LinearLayout

线性布局: 用来控制其子View以水平或垂直方式展开显示

3)理解LinearLayout权重

layout_weight(权重)的值

=0(默认值): 指定多大空间就占据多大的空间

>0:  将父视图中的可用空间进行分割, 值越大权重就越大, 占据的比例就会越大

Layout_weight的使用场景

将布局的宽度或高度平均分成几个等份

垂直方向上占用中间所有空间 或水平方向上占用中间所有空间

<?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" >    <EditText        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="To" >    </EditText>      <EditText        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="Subject" >    </EditText>    <EditText        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:hint="Message"         android:gravity="top">    </EditText>      <LinearLayout          android:layout_width="match_parent"          android:layout_height="wrap_content" >        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="Reset" />        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="Send" />      </LinearLayout></LinearLayout>

3.2_常用UI布局_RelativeLayout

相对布局: 用来控制其子View以相对定位的方式进行布局显示

相对布局是最灵活, 最强大,也是学习难度最大的布局

相对布局相关属性比较多:

兄弟视图之间: 同方向对齐, 反方向对齐

与父视图之间: 同方向对齐, 居中

3.3_常用UI布局_FrameLayout

帧布局中的每一个子View都代表一个画面，默认以屏幕左上角作为（ 0,0 ）坐标，按定义的先后顺序依次逐屏显示， 后面出现的会覆盖前面的画面,

通过子View的android:layout_gravity 属性来指定子视图的位置

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <TextView        android:layout_width="280dp"        android:layout_height="280dp"        android:layout_gravity="center"        android:background="#33ffff" />    <TextView        android:layout_width="240dp"        android:layout_height="240dp"        android:layout_gravity="center"        android:background="#33ccff" />    <TextView        android:layout_width="200dp"        android:layout_height="200dp"        android:layout_gravity="center"        android:background="#33aaff" />    <TextView        android:layout_width="160dp"        android:layout_height="160dp"        android:layout_gravity="center"        android:background="#3399ff" />    <TextView        android:layout_width="120dp"        android:layout_height="120dp"        android:layout_gravity="center"        android:background="#3366ff" />    <TextView        android:layout_width="80dp"        android:layout_height="80dp"        android:layout_gravity="center"        android:background="#3300ff" />    <!--     gravity: 控制是当前视图的内容/子View    layout_gravity: 控制当前视图自己     --></FrameLayout>

3.4_视图标签属性_分类和常用基本属性

1)属性的划分

针对任何View的属性

•     常用的最基本属性

•     内边距属性padding

•     外边距属性margin

只针对RelativeLayout的属性

•     反方向对齐属性to/above/below

•     同方向对齐属性  align

•     相对父视图的属性  alignparent/center

只针对LinearLayout的属性

•     权重属性  weight

•     方向属性oritation

2)视图的常用属性

3.5_视图标签属性_内边距与外边距属性

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <EditText        android:id="@+id/editText1"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_margin="20dp"        android:hint="Message"        android:paddingLeft="20dp"/>    <Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignRight="@+id/editText1"        android:layout_below="@id/editText1"        android:layout_marginTop="20dp"        android:text="OK" /></RelativeLayout>

3.6_视图标签属性_相对布局特有属性

相对兄弟视图定位

相对父视图定位

3.7_ListView_基本使用说明

1)ListView的理解

ListView是一种用来显示多个可滑动项(Item)列表的的ViewGroup

需要使用Adapter将集合数据和每一个Item所对应的布局动态适配到ListView中显示

显示列表: listView.setAdapter(adapter)

更新列表: adapter.notifyDataSetChanged()

2)ListView效果样例 

3）Adapter

3.8ListView_使用ArrayAdapter显示文本列表

<ListView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/lv_main"    android:layout_width="fill_parent"    android:layout_height="fill_parent" ></ListView><?xml version="1.0" encoding="utf-8"?><TextView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="50dp"     android:textSize="20sp"    android:gravity="center_vertical"></TextView>package com.xp.l03_listview;import android.app.Activity;import android.os.Bundle;import android.widget.ArrayAdapter;import android.widget.ListView;public class MainActivity extends Activity {private ListView lv_main;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);lv_main = (ListView) findViewById(R.id.lv_main);//准备集合数据String[] data={"A","B","C","D","E","F","G","H","I","J","K","L"};//准备ArrayAdapter列表ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,R.layout.item_array_adapter,data);//设置Adapter显示列表lv_main.setAdapter(adapter);}}

3.9ListView_使用SimpleAdapter显示复杂列表

<?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:orientation="horizontal" >    <ImageView        android:id="@+id/iv_item_icon"        android:layout_width="70dp"        android:layout_height="70dp"        android:src="@drawable/f1" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"         android:gravity="center_vertical"        android:layout_marginLeft="10dp">        <TextView            android:id="@+id/tv_item_name"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="TextView" />        <TextView            android:id="@+id/tv_item_content"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="TextView" />    </LinearLayout></LinearLayout>

3.10ListView_使用BaseAdapter显示复杂列表

package com.atguigu.l03_listview;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.ListView;import android.widget.TextView;public class MainActivity extends Activity {private ListView lv_main;private List<ShopInfo> data;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);lv_main = (ListView) findViewById(R.id.lv_main);//准备集合数据data = new ArrayList<ShopInfo>();data.add(new ShopInfo(R.drawable.f1, "name----1", "content----1"));data.add(new ShopInfo(R.drawable.f2, "name----2", "content----2"));data.add(new ShopInfo(R.drawable.f3, "name----3", "content----3"));data.add(new ShopInfo(R.drawable.f4, "name----4", "content----4"));data.add(new ShopInfo(R.drawable.f5, "name----5", "content----5"));data.add(new ShopInfo(R.drawable.f6, "name----6", "content----6"));data.add(new ShopInfo(R.drawable.f7, "name----7", "content----7"));data.add(new ShopInfo(R.drawable.f8, "name----8", "content----8"));data.add(new ShopInfo(R.drawable.f9, "name----9", "content----9"));data.add(new ShopInfo(R.drawable.f10, "name----10", "content----10"));//准备BaseAdapter对象MyAdapter adapter = new MyAdapter();//设置Adapter显示列表lv_main.setAdapter(adapter);}class MyAdapter extends BaseAdapter {//返回集合数据的数量@Overridepublic int getCount() {Log.e("TAG", "getCount()");return data.size();}//返回指定下标对应的数据对象@Overridepublic Object getItem(int position) {return data.get(position);}@Overridepublic long getItemId(int position) {return 0;}

3.11_ListView_优化ListView

/** * 返回指定下标所对应的item的View对象 * position : 下标 * convertView : 可复用的缓存Item视图对象, 前n+1个为null * parent : ListView对象 */@Overridepublic View getView(int position, View convertView, ViewGroup parent) {//Log.e("TAG", "getView() position="+position+" convertView="+convertView);//如果没有复用的if(convertView==null) {Log.e("TAG", "getView() position="+position+" convertView="+convertView);//加载item的布局, 得到View对象convertView = View.inflate(MainActivity.this, R.layout.item_simple_adapter, null);}//根据position设置对应的数据//得到当前行的数据对象ShopInfo shopInfo = data.get(position);//得到子View对象ImageView imageView = (ImageView) convertView.findViewById(R.id.iv_item_icon);TextView nameTV = (TextView) convertView.findViewById(R.id.tv_item_name);TextView contentTV = (TextView) convertView.findViewById(R.id.tv_item_content);//设置数据imageView.setImageResource(shopInfo.getIcon());nameTV.setText(shopInfo.getName());contentTV.setText(shopInfo.getContent());return convertView;}}}package com.atguigu.l03_listview;/** * 每行Item的数据信息封装类 */public class ShopInfo {private int icon;private String name;private String content;public ShopInfo(int icon, String name, String content) {super();this.icon = icon;this.name = name;this.content = content;}public ShopInfo() {super();}public int getIcon() {return icon;}public void setIcon(int icon) {this.icon = icon;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getContent() {return content;}public void setContent(String content) {this.content = content;}@Overridepublic String toString() {return "ShopInfo [icon=" + icon + ", name=" + name + ", content="+ content + "]";}}

3.12_样式和主题_Style

1)样式(style)

2)主题(theme)

•     理解:

•     主题的本质也是style

•     在styles.xml中定义, 在manifest.xml中引用

•     作用:

•     复用视图标签属性

•     目标:

•     针对整个应用或某个Activity的界面

•     系统常用主题:

•     @android:style/Theme.Light.NoTitleBar : 没有标题

•     @android:style/Theme.Light.NoTitleBar.Fullscreen: 全屏

•     @android:style/Theme.Dialog : 对话框

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <TextView        style="@style/myStyle"        android:text="SIM卡变更报警"/>    <TextView        style="@style/myStyle"        android:text="GPS定位" />    <TextView        android:text="远程销毁数据"         style="@style/myStyle"        android:textColor="#00ff00"/>    <TextView        android:text="远程锁屏"         style="@style/myStyle"/>     <TextView        android:text="xxxxx"         android:layout_width="wrap_content"        android:layout_height="wrap_content"        style="@android:style/TextAppearance"/></LinearLayout><style name="myStyle">        <item name="android:layout_width">wrap_content</item>        <item name="android:layout_height">wrap_content</item>        <item name="android:drawableLeft">@android:drawable/star_big_on</item>        <item name="android:gravity">center_vertical</item>        <item name="android:textSize">20sp</item>        <item name="android:layout_marginLeft">10dp</item>    </style>        <style name="myTheme">         <item name="android:textColor">#ff0000</item></style>

3.14_应用练习1_分析

1.分析界面结构，编写布局文件

1)整体的布局，ListView

2)Item的布局文件:RelativeLayout

2.使用ListView+BaseAdapter显示所有应用信息的列表

1)得到所有应用信息数据对象的集合List<AppInfo>

2)定义BaseAdapter的实现类，getView()

3.给ListView设置item的点击监听，在回调方法中作出响应

4.给ListView设置item的长按监听，在回调方法中做相应

显示所有列表

•     功能描述:

•     此功能是手机卫士程序管理模块的一部分

•     它以列表的形式列出手机中所有应用的信息

•     点击某一项, 提示选择的应用的名称

•     长按某一项, 删除当前行

•     主要技术:

•     应用的整体布局与Item的布局

•     获取手机中所有安装的应用信息集合(已定义)

•     使用BaseAdapter显示列表信息

•     ListView的item点击响应

•     scaleType=“fitXY” //图片充满View的宽度

•     minHeight=“70dp” //最小高度

3.15界面布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <TextView        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="#c610ef"        android:gravity="center"        android:padding="5dp"        android:text="所有应用"        android:textColor="#ffffff"        android:textSize="25sp" />    <ListView        android:id="@+id/lv_main"        android:layout_width="match_parent"        android:layout_height="fill_parent" >    </ListView></LinearLayout>

3.16_应用练习1_显示列表

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content" >    <ImageView        android:id="@+id/iv_item_icon"        android:layout_width="60dp"        android:layout_height="60dp"        android:src="@drawable/ic_launcher" />    <TextView        android:id="@+id/tv_item_name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_toRightOf="@id/iv_item_icon"        android:layout_centerVertical="true"        android:text="应用名称"        android:layout_marginLeft="10dp"        android:textSize="20sp"/></RelativeLayout>

import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.content.Intent;import android.content.pm.PackageManager;import android.content.pm.ResolveInfo;import android.graphics.drawable.Drawable;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.AdapterView.OnItemLongClickListener;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.ListView;import android.widget.TextView;import android.widget.Toast;public class MainActivity extends Activity implements OnItemLongClickListener {private ListView lv_main;private List<AppInfo> data;private AppAdapter adapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化成员变量lv_main = (ListView) findViewById(R.id.lv_main);data = getAllAppInfos();adapter = new AppAdapter();//显示列表lv_main.setAdapter(adapter);//给ListView设置item的点击监听lv_main.setOnItemClickListener(new OnItemClickListener() {/** * parent : ListView * view : 当前行的item视图对象 * position : 当前行的下标 */@Overridepublic void onItemClick(AdapterView<?> parent, View view,int position, long id) {//提示当前行的应用名称String appName = data.get(position).getAppName();//提示Toast.makeText(MainActivity.this, appName, 0).show();}});//给LitView设置Item的长按监听lv_main.setOnItemLongClickListener(this);}class  AppAdapter extends BaseAdapter {@Overridepublic int getCount() {return data.size();}@Overridepublic Object getItem(int position) {return data.get(position);}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn 0;}//返回带数据当前行的Item视图对象@Overridepublic View getView(int position, View convertView, ViewGroup parent) {//1. 如果convertView是null, 加载item的布局文件if(convertView==null) {Log.e("TAG", "getView() load layout");convertView = View.inflate(MainActivity.this, R.layout.item_main, null);}//2. 得到当前行数据对象AppInfo appInfo = data.get(position);//3. 得到当前行需要更新的子View对象ImageView imageView = (ImageView) convertView.findViewById(R.id.iv_item_icon);TextView textView = (TextView) convertView.findViewById(R.id.tv_item_name);//4. 给视图设置数据imageView.setImageDrawable(appInfo.getIcon());textView.setText(appInfo.getAppName());//返回convertViewreturn convertView;}}/* * 得到手机中所有应用信息的列表 * AppInfo *  Drawable icon  图片对象 *  String appName *  String packageName */protected List<AppInfo> getAllAppInfos() {List<AppInfo> list = new ArrayList<AppInfo>();// 得到应用的packgeManagerPackageManager packageManager = getPackageManager();// 创建一个主界面的intentIntent intent = new Intent();intent.setAction(Intent.ACTION_MAIN);intent.addCategory(Intent.CATEGORY_LAUNCHER);// 得到包含应用信息的列表List<ResolveInfo> ResolveInfos = packageManager.queryIntentActivities(intent, 0);// 遍历for (ResolveInfo ri : ResolveInfos) {// 得到包名String packageName = ri.activityInfo.packageName;// 得到图标Drawable icon = ri.loadIcon(packageManager);// 得到应用名称String appName = ri.loadLabel(packageManager).toString();// 封装应用信息对象AppInfo appInfo = new AppInfo(icon, appName, packageName);// 添加到listlist.add(appInfo);}return list;}

3.17_应用练习1_实现点击和长按功能

@Overridepublic boolean onItemLongClick(AdapterView<?> parent, View view,int position, long id) {//删除当前行//删除当前行的数据data.remove(position);//更新列表//lv_main.setAdapter(adapter);//显示列表, 不会使用缓存的item的视图对象adapter.notifyDataSetChanged();//通知更新列表, 使用所有缓存的item的视图对象return true;}}

3.18_应用练习2_功能分析和界面布局

1.编写布局<GridView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/gv_main"    android:layout_width="fill_parent"    android:layout_height="fill_parent"     android:numColumns="3"    android:layout_marginTop="10dp"    android:verticalSpacing="5dp"></GridView>

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="80dp"    android:layout_height="80dp"    android:orientation="vertical"     android:gravity="center">    <ImageView        android:id="@+id/iv_item_icon"        android:layout_width="60dp"        android:layout_height="60dp"        android:src="@drawable/ic_launcher" />    <TextView        android:id="@+id/tv_item_name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="名称"         android:textSize="16sp"/></LinearLayout>

import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.Toast;import android.widget.AdapterView.OnItemClickListener;import android.widget.GridView;public class MainActivity extends Activity {private GridView gv_main;private MainAdapter adapter;String[] names = new String[] { "手机防盗", "通讯卫士", "软件管理", "流量管理", "进程管理","手机杀毒", "缓存清理", "高级工具", "设置中心" };int[] icons = new int[] { R.drawable.widget01, R.drawable.widget02,R.drawable.widget03, R.drawable.widget04, R.drawable.widget05,R.drawable.widget06, R.drawable.widget07, R.drawable.widget08,R.drawable.widget09 };@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);gv_main = (GridView) findViewById(R.id.gv_main);adapter = new MainAdapter(this, names, icons);gv_main.setAdapter(adapter);//给gridView的Item设置点击监听gv_main.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view,int position, long id) {//得到当前点击的名称String name = names[position];//提示Toast.makeText(MainActivity.this, name, 1).show();}});}}import android.content.Context;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;public class MainAdapter extends BaseAdapter {private String[] names;private int[] icons;private Context context;public MainAdapter(Context context, String[] names, int[] icons) {super();this.context = context;this.names = names;this.icons = icons;}@Overridepublic int getCount() {return names.length;}@Overridepublic Object getItem(int position) {return names[position];}@Overridepublic long getItemId(int position) {return 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {if(convertView==null) {convertView = View.inflate(context, R.layout.item_main, null);}ImageView imageView = (ImageView) convertView.findViewById(R.id.iv_item_icon);TextView textView = (TextView) convertView.findViewById(R.id.tv_item_name);imageView.setImageResource(icons[position]);textView.setText(names[position]);return convertView;}}