【Android】第三章 用户界面下

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nupotian/article/details/73729071

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;
	@Override
	protected 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;
	@Override
	protected 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 {

		//返回集合数据的数量
		@Override
		public int getCount() {
			Log.e("TAG", "getCount()");
			return data.size();
		}

		//返回指定下标对应的数据对象
		@Override
		public Object getItem(int position) {
			return data.get(position);
		}

		@Override
		public long getItemId(int position) {
			return 0;
		}

3.11_ListView_优化ListView

/**
		 * 返回指定下标所对应的item的View对象
		 * position : 下标
		 * convertView : 可复用的缓存Item视图对象, 前n+1个为null
		 * parent : ListView对象
		 */
		@Override
		public 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;
	}

	@Override
	public 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;
	
	@Override
	protected 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 : 当前行的下标
			 */
			@Override
			public 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 {
		@Override
		public int getCount() {
			return data.size();
		}
		@Override
		public Object getItem(int position) {
			return data.get(position);
		}

		@Override
		public long getItemId(int position) {
			// TODO Auto-generated method stub
			return 0;
		}
		//返回带数据当前行的Item视图对象
		@Override
		public 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());
			
			//返回convertView
			return convertView;
		}
		
	}
	/*
	 * 得到手机中所有应用信息的列表
	 * AppInfo
	 *  Drawable icon  图片对象
	 *  String appName
	 *  String packageName
	 */
	protected List<AppInfo> getAllAppInfos() {

		List<AppInfo> list = new ArrayList<AppInfo>();
		// 得到应用的packgeManager
		PackageManager packageManager = getPackageManager();
		// 创建一个主界面的intent
		Intent 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);
			// 添加到list
			list.add(appInfo);
		}
		return list;
	}

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

@Override
	public 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 };
	@Override
	protected 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() {
			@Override
			public 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;
	}
	@Override
	public int getCount() {
		return names.length;
	}
	@Override
	public Object getItem(int position) {
		return names[position];
	}
	@Override
	public long getItemId(int position) {
		return 0;
	}
	@Override
	public 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;
	}
}