安卓005常用高级UI

Android高级UI

 ProgressBar

ProgressBar 进度条，常用于文件下载进度显示、系统初始化进度等，默认情况是没有进度值的(转圈圈)

* 提示点：

         style="@android:style/Widget.ProgressBar.Horizontal" 样式设置

         setProgress(int) 设置当前进度值

         getProgress() 得到当前进度值

         setMax(int) 设置最大值

案例：通过按钮设置进度条进度

    * 界面设计:

       

* 代码实现

  

 

  

 RatingBar

RatingBar 评分进度条，常用于对商品、用户的评价，比如满意度调查等

* 提示点：

       setOnRatingBarChangeListener 设置监听器

       setNumStars 设置星星的个数(设置总分)

       setStepSize 设置分数间隔

       getRating 获得当前的分数值

       setRating 设置当前的分数值

案例：对欧冠精彩程度打分

    * 界面设计:

       

* 代码实现

  

 ToggleButton

 ToggleButton:开关按钮,它是CompoundButton的子类，实现开与关的效果，比如蓝牙开关、wifi开关、声音开关等

* 提示点：

  - 实现的监听接口：CompoundButton.OnCheckedChangeListener

    该接口是监听开关按钮状态的改变

  - toggle() :取反操作

- xml属性设置

textOn: 表示状态为开的提示文本

textOff: 表示状态为关的提示文本

案例：设置声音开关

   * 界面设计

                    

* 代码实现

  

 

ScrollView

ScrollView:滚屏视图，它是FrameLayout的子类，能够被用户滚动的布局容器，它只能拥有一个子控件，经常应用于一个垂直方向的线性布局中。

ScrollView只支持垂直滚动，对于需要水平滚动，则用HorizontalScollView

 

 ListView

 ListView 列表框，常用控件，用来显示相同数据结构的批量数据，比如：从数据库获取的数据列表，从网络解析的批量结构数据，一般都会采用ListView展示数据，系统中的设置、未接来电、通信录等显示可采用ListView进行展示

 用ListView展示数据的四个步骤：列表项描述、初始化数据、适配器数据装配、设置适配器

 

案例：在ListView中显示好友列表

    * 界面设计与分析:

       

* 代码实现

  

1.对话框
Arrays.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="android_version">
<item >棒棒糖</item>
<item >奇巧巧克力</item>
<item >果冻豆</item>
<item >冰淇淋三明治</item>
<item >蜂巢</item>
<item >姜饼</item>
</string-array>
</resources>
Activity_dialog.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".DialogActivity" >
<Button
android:id="@+id/normal_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="28dp"
android:text="标准对话框" />
<Button
android:id="@+id/menu_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/normal_btn"
android:layout_centerHorizontal="true"
android:layout_marginTop="43dp"
android:text="菜单式对话框" />
<Button
android:id="@+id/multi_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/menu_btn"
android:layout_centerHorizontal="true"
android:layout_marginTop="36dp"
android:text="复选对话框" />
<Button
android:id="@+id/diy_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/multi_btn"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="自定义对话框" />
</RelativeLayout>
DialogActivity.java
package cn.itcast.dialog;
import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.support.v4.widget.SimpleCursorAdapter.ViewBinder;
import android.util.SparseBooleanArray;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ListView;
import android.widget.Toast;
public class DialogActivity extends Activity implements View.OnClickListener{
private MyDialogListener myDialogListener;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dialog);
myDialogListener=new MyDialogListener();
//1. 引用标准对话框按钮
Button button=(Button)findViewById(R.id.normal_btn);
//设置监听
button.setOnClickListener(this);
//2. 引用菜单对话框按钮
button=(Button)findViewById(R.id.menu_btn);
//设置监听
button.setOnClickListener(this);
//3. 引用复选对话框按钮
button=(Button)findViewById(R.id.multi_btn);
//设置监听
button.setOnClickListener(this);
//4. 引用自定义对话框按钮
button=(Button)findViewById(R.id.diy_btn);
//设置监听
button.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.normal_btn://点击的是标准对话框按钮
normalDialog();
break;
case R.id.menu_btn://菜单式对话框
menuDialog();
break;
case R.id.multi_btn://复选对话框
multiDialog();
break;
case R.id.diy_btn://自定义输入对话框
break;
default:
break;
}
}
//显示复选对话框
private void multiDialog() {
//通过资源 id 获取数组资源
final
String[] versions = getResources().getStringArray(R.array.android_version);
new AlertDialog.Builder(this)
.setIcon(R.drawable.emoji_062)
.setTitle("复选对话框")
/**设置复选项
* itemId ：复选项的资源 id
* checkedItems:设置复选项的缺省值
*
*/
.setMultiChoiceItems(R.array.android_version,
new boolean[]{true,true,true,false,false,false},
new DialogInterface.OnMultiChoiceClickListener() {
/**当点击复选项时，回调该方法
* dialog：AlertDialog
* which：你点了哪一个复选项
* isChecked：当前点击的复选项的状态
*/
@Override
public void onClick(DialogInterface dialog, int which, boolean isChecked) {
Toast.makeText(getApplicationContext(), versions[which]+isChecked,
Toast.LENGTH_SHORT).show();
}
})
.setPositiveButton("确定", new DialogInterface.OnClickListener() {
/**当点击了复选对话框的确定按钮，则回调该方法
* which：点击了哪一个按钮
*/
@Override
public void onClick(DialogInterface dialog, int which) {
//取得 ListView
AlertDialog alertDialog=(AlertDialog) dialog;
ListView dialogLstView=alertDialog.getListView();
/**
* 把操作了的复选项放在稀疏布尔数组
SparseBooleanArray
* 好比 HashMap
：key(integer) ：position
value(boolean) 当前
复选项的状态
*/
SparseBooleanArray
checkedItemPositions
=
dialogLstView.getCheckedItemPositions();
StringBuilder sb=newStringBuilder();//拼串 ， 把所选的复选项 拼起来
//遍历稀疏布尔数组
int size=checkedItemPositions.size();
for(int i=0;i<size;i++){
if(checkedItemPositions.valueAt(i)){ //当
稀疏布尔数组的复选项
的状态为真
//依据复选项的 position 取复选项的相应数据
int position=checkedItemPositions.keyAt(i);
String
currentItem=dialogLstView.getAdapter().getItem(position).toString();
sb.append(currentItem);
}
}
Toast.makeText(getApplicationContext(),
sb.toString(),
Toast.LENGTH_LONG).show();
}
})
.setNegativeButton("取消", null)
.create()
.show();
}
//显示菜单式对话框 ,链式编程
private void menuDialog() {
//通过资源 id 获取数组资源
final
String[]versions = getResources().getStringArray(R.array.android_version);
newAlertDialog.Builder(this)
.setIcon(R.drawable.emoji_062)
.setTitle("菜单式对话框")
.setItems(R.array.android_version, new DialogInterface.OnClickListener() {
/**当点击对话框的 item 项时，回调该方法
* dialog：AlertDialog
* which ：点击了哪一个
，从 0--maxSize-1
*/
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(getApplicationContext(),
versions[which],
Toast.LENGTH_SHORT).show();
}
})
.create()
.show();
}
//显示标准对话框
private void normalDialog() {
//准备一个对话框的构建器，通过构建器来构建对话框
AlertDialog.Builderbuilder=new AlertDialog.Builder(this);
builder.setIcon(R.drawable.emoji_054);//设置图标
builder.setTitle("标准对话框");//设置标题
builder.setMessage("你真的不理我了吗?");//设置提示消息
//设置积极的按钮
builder.setPositiveButton("确定", myDialogListener);
builder.setNegativeButton("取消", myDialogListener);
AlertDialog alertDialog=builder.create();
alertDialog.show();
}
private class MyDialogListener implements DialogInterface.OnClickListener{
/**当点击确定对话框按钮时，回调该方法
* dialog：AlertDialog
* which:你点了哪一个
*/
@Override
public void onClick(DialogInterface dialog, int which) {
switch (which) {
case -1:
Toast.makeText(getApplicationContext(),
"
确
定
按
钮
",
Toast.LENGTH_SHORT).show();
break;
case -2:
Toast.makeText(getApplicationContext(),
"
取
消
按
钮
",
Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
}
}
2.日志猫
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".LogcatActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
</RelativeLayout>
package cn.itcast.logcast;
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
public class LogcatActivity extends Activity {
private static final String TAG = "LogcatActivity";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_logcat);
Log.v(TAG, "vervbose 混淆级别");
Log.d(TAG, "debug 调试级别");
Log.i(TAG, "info 信息级别");
Log.w("MyAppTag", "warn 警告级别");
Log.e(TAG, "error 错误级别");
System.out.println("println");
System.out.print("print");
System.out.flush();//刷缓存
}
}
3.吐司
Toast.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00d4d4"
android:orientation="horizontal" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/pic8" />
<TextView
android:id="@+id/title_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="放假好好复习"
android:layout_marginLeft="10dp"
android:layout_gravity="center_vertical"
android:textSize="26sp"
></TextView>
</LinearLayout>
Activity_toast.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".ToastActivity" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="14dp"
android:text="自定义 Toast 界面"
android:textSize="26sp" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button1"
android:layout_alignBottom="@+id/button1"
android:layout_alignParentRight="true"
android:layout_marginRight="26dp"
android:onClick="byXml"
android:text="xml 自定义" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_marginRight="26dp"
android:layout_marginTop="91dp"
android:layout_toLeftOf="@+id/button2"
android:onClick="byCode"
android:text="代码自定义" />
</RelativeLayout>
Toastactivity.java
package cn.itcast.toast;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.TextureView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;
import android.widget.Toast;
public class ToastActivity extends Activity {
private Context context;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toast);
context=this;
}
//代码自定义 Toast 界面
public void byCode(View v){
//构建一个 Toast 对象
Toasttoast=new Toast(context);
//构建一个线性布局
LinearLayout layout=newLinearLayout(context);
LinearLayout.LayoutParams
layoutParams=new
LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT);
//
ViewGroup.LayoutParams layoutParams2=new ViewGroup.LayoutParams();
layout.setLayoutParams(layoutParams);//设置布局参数 ：宽和高
layout.setOrientation(LinearLayout.HORIZONTAL);//设置方向
layout.setBackgroundResource(R.drawable.bg_yellow);//设置背景
//构建一个图片控件
ImageViewimage=new ImageView(context);
//可以不用设置宽和高，代码自定义会自动设置 wrap_content 属性
image.setImageResource(R.drawable.btn_up_normal);//设置 ImageView 的前景图片
属性
layout.addView(image);//ViewGroup 的方法
TextView messageTxt=newTextView(context);
messageTxt.setText("放假回家!");
layout.addView(messageTxt);//把子控件添加到父控件中
//
layout.removeView(image);//把 ImageView 控件对象从父控件移除
//设置 Toast 的显示界面视图
toast.setView(layout);
toast.setDuration(Toast.LENGTH_SHORT);//设置文本显示持续的时间
/**设置位置
* gravity：位置
* xOffset:x 方向的偏移量
* yOffset：y 方向的偏移量
*/
toast.setGravity(Gravity.TOP|Gravity.CENTER_HORIZONTAL, -50, 0);
toast.show();
}
//xml 自定义 Toast 界面
public void byXml(View v){
//构建 Toast 对象
Toasttoast=new Toast(context);
//设置 Toast 显示的界面
/**把 xml 布局文件实例化为 View 对象， 返回的是 R.layout.toast 布局的根节点对象
* resource ：xml 文件的资源 id
* root ：根节点
*/
Viewlayout=LayoutInflater.from(context).inflate(R.layout.toast, null);
//依据父控件来引用子控件
TextView titleTxt=(TextView) layout.findViewById(R.id.title_txt);
//
TextView titleTxt=(TextView) ToastActivity.this.findViewById(R.id.title_txt);
//设置属性
titleTxt.setText("Android&IOS");
toast.setView(layout);
toast.setDuration(Toast.LENGTH_SHORT);//设置文本显示持续的时间
/**设置位置
* gravity：位置
* xOffset:x 方向的偏移量
* yOffset：y 方向的偏移量
*/
toast.setGravity(Gravity.CENTER, 0, 0);
toast.show();
}
}
4.ListView 应用管理
Values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="dark_yellow">#33ffa54f</color>
<color name="black">#000000</color>
<color name="white">#ffffff</color>
</resources>
Layout/1、2、3.xml
Activity_app_manager.xml
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/appManager_lstView"
tools:context=".AppManagerActivity"
android:divider="@color/dark_yellow"
android:dividerHeight="3dp"
android:background="@color/black"
>
</ListView>
<!--android:divider: 分割线
android:dividerHeight:分割线高度
在 ListView 中，不能直接添加子控件，而是通过 Adapter 来添加
-->
List_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="@android:color/black"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/icon_image"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/ic_launcher"
/>
<TextView
android:id="@+id/name_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/icon_image"
android:layout_marginLeft="10dp"
android:textSize="20sp"
android:layout_marginBottom="5dp"
android:textColor="@android:color/white"
android:text="应用名"
/>
<TextView
android:id="@+id/size_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="大小"
android:textSize="20sp"
android:layout_below="@id/name_txt"
android:textColor="@android:color/white"
android:layout_alignLeft="@+id/name_txt"
/>
</RelativeLayout>
List_footer.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:gravity="center_vertical"
android:background="#d1eeee"
android:id="@+id/footer_view"
android:orientation="horizontal" >
<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="正在拼命加载..." />
</LinearLayout>
AppManager.java
package cn.itcast.appmanager;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
public class AppManagerActivity extends Activity {
private Context context;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);//设置没有标题，但是它要在
setContentView 方法之前
setContentView(R.layout.activity_app_manager);
context=this;
final ListViewappManagerLstView=(ListView)findViewById(R.id.appManager_lstView);
/**通过 ListView 展示动态的结构相同的数据实现步骤：
*
1. 准备列表项布局
*
2. 准备要装配的列表项的数据
*
3. 准备 Adapter
*
4.ListView 设置适配器
*
展示列表项、监听列表项
*/
// 2. 准备要装配的列表项的数据
//引用列表视图
final List<Map<String,Object>> data=new ArrayList<Map<String,Object>>();
//给数据初始化
for(int i=0;i<20;i++){
Map<String,Object> map=new HashMap<String, Object>();
map.put("icon", R.drawable.btn_up_normal+i);//添加图片
map.put("name", "应用名"+(i+1));//添加名称
map.put("size", 3.09);//添加大小
data.add(map);
}
//3. 准备 Adapter:用 SimpleAdapter
/**简单适配器 继承 BaseAdapter ，实现 Adapter 接口
*
要操作的使用简单适配器 的列表项的布局控件必须是：
*
1. 实现 Checkable 接口的 View
*
2. TextView
*
3. ImageView
* context：上下文
*
分 类
：
应 用 级 别 上 下 文 (Application)
组 件 级 别 的 上 下 文
(Activity\Service)
*
作用： 获取系统的服务
、获取项目的资源
*
context.getSystemService(Context.NOTIFICATION_SERVICE);//取服务
context.getResources().getDrawable(R.drawable.ic_launcher);//取资源
data ：要装配列表项的数据 List<Map>
resouce: 列表项布局的资源 id
from：数据从哪里来：数据从 List<Map>的相应的 key 中来
to
：数据到哪里去 :到列表项相应的控件中去
*/
SimpleAdapter adapter=newSimpleAdapter(context, data, R.layout.list_item,
new String[]{"icon","name","size"},
new int[]{R.id.icon_image,R.id.name_txt,R.id.size_txt});
//4.ListView 设置适配器
展示列表项、监听列表项
appManagerLstView.setAdapter(adapter);
// 把 xml 布局文件实例化为 View 对象
ViewfooterView=LayoutInflater.from(context).inflate(R.layout.list_footer,null);
//findViewById:是在当前的 Activity 设置的 xml 布局中去找控件
//
LinearLayout layout=(LinearLayout) this.findViewById(R.id.footer_view);
//
layout.getOrientation();
appManagerLstView.addFooterView(footerView);//添加底部的视图
//
appManagerLstView.removeFooterView(footerView);//移除底部的视图
//
appManagerLstView.addHeaderView(v);//添加头部的视图
//
appManagerLstView.removeHeaderView(v)//移除头部的额视图
//设置列表项点击事件的监听
appManagerLstView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
/**当点击列表项，回调该方法
* parent：ListView
* view：View ：当前操作的列表项视图
* position： 当前点击的列表项的数据在 Adapter 适配器中的位置
* id： 当前点击的列表项的数据的行号 （id 属性）
*/
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
//通过在适配器装配的 List<Data>的 Position 位置来获取数据
HashMap<String
,Object>
map=(HashMap<String,
Object>)
data.get(position);
Toast.makeText(context,
map.get("name").toString()+"
点
击
",
Toast.LENGTH_SHORT).show();
}
});
//设置列表项的长按的监听
appManagerLstView.setOnItemLongClickListener(new
AdapterView.OnItemLongClickListener() {
@Override
public boolean onItemLongClick(AdapterView<?> parent, Viewview,
int position, long id) {
//依据当前列表项的数据在适配器中的位置来获取数据
HashMap<String
,Object>
map=(HashMap<String,
Object>)
appManagerLstView.getAdapter().getItem(position);
Toast.makeText(context,
map.get("name").toString()+"
长
按
",
Toast.LENGTH_SHORT).show();
return false;
}
});
}
}