［转］android学习----基础UI编程(五)

  • 相框设计 ：ImageView 的堆叠作用
  • 相框设计 ：ImageButton 的堆叠作用
  • 自定义下拉菜单 ：Spinner 与setDropDownViewResource
  • 动态添加╱删除的Spinner 菜单 ： ArrayList 与Widget 的依赖性

14. 专业相框设计

1）ImageView 的堆叠应用

利用 ImageView 的堆叠，将上例中的实现不同相框的更换

示例代码

① 新建工程
② 准备三张png 图片

③ 修改main.xml 布局，添加UI 元素

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout    //使用的是绝对布局
android:id="@+id/widget34"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
><!--创建第一个ImageView (第二层图片)-->
<ImageView
android:id="@+id/myImageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="0px"
android:layout_y="36px"
/>
<!--创建第二个ImageView (第一层图片)-->
<ImageView
android:id="@+id/myImageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="0px"
android:layout_y="36px"
/>
<!--创建第一个Button -->
<Button

android:id="@+id/myButton1"
android:layout_width="105px"
android:layout_height="66px"
android:text="pic1"
android:layout_x="9px"
android:layout_y="356px"
/>
<!--创建第二个Button -->
<Button
android:id="@+id/myButton2"
android:layout_width="105px"
android:layout_height="66px"
android:text="pic2"
android:layout_x="179px"
android:layout_y="356px"
/>
</AbsoluteLayout>

④ 修改mainActivity.java

package zyf.Ex_Ctrl_7;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class Ex_Ctrl_7 extends Activity {
    // Called when the activity is first created. 
    // 声明Button、ImageView 对象
    private ImageView mImageView01;
    private ImageView mImageView02;
    private Button mButton01;
    private Button mButton02;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        // 取得Button、ImageView 对象
        mImageView01 = (ImageView) findViewById(R.id.myImageView1);
        mImageView02 = (ImageView) findViewById(R.id.myImageView2);
        mButton01 = (Button) findViewById(R.id.myButton1);
        mButton02 = (Button) findViewById(R.id.myButton2);

// 设置ImageView 背景图
        mImageView01.setImageDrawable(getResources().getDrawable(R.drawable.right));

mImageView02.setImageDrawable(getResources().getDrawable(R.drawable.photo));

// 用OnClickListener 事件来启动
        mButton01.setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 当启动后， ImageView 立刻换背景图
                mImageView01.setImageDrawable(getResources().getDrawable(R.drawable.right));
            }
        });

mButton02.setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View v) {
                mImageView01.setImageDrawable(getResources().getDrawable(R.drawable.left));
            }
        });
    }
}

⑤ 结果

2）ImageButton 的堆叠应用

利用 ImageButton 的背景图和按键响应，将上例中的 ImageView 和 Button 结合到一起，通过堆叠 ImageButton 实现相框的更换。

示例代码

① 新建项目
② 准备三张png 图片

③ 修改main.xml 布局，添加UI 元素

④ 修改mainActivity.java

package zyf.Ex_Ctrl_7_B;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;

public class Ex_Ctrl_7_B extends Activity {
    // Called when the activity is first created.
    //声明ImageButton
    private ImageButton back_Imagebutton,photo_Imagebutton;
    private boolean Tag=true;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //从XML中获取控件对象
        back_Imagebutton=(ImageButton)findViewById(R.id.myImageButton_Back );
        photo_Imagebutton=(ImageButton)findViewById(R.id.myImageButton_Photo );
        //设置默认的背景图片
        back_Imagebutton.setBackgroundResource(R.drawable.left);
        photo_Imagebutton.setBackgroundResource(R.drawable.photo);

//给ImageButton设置事件监听器
        photo_Imagebutton.setOnClickListener(new ImageButton.OnClickListener(){
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                Tag=!Tag;

//更改背景图片
                if(Tag){
                    back_Imagebutton.setBackgroundResource(R.drawable.right);
                }else{
                    back_Imagebutton.setBackgroundResource(R.drawable.left);
                }
            }
        });
    }
}

⑤ 结果

15. 自定义下拉菜单

Spinner 标签： 定义一个下拉菜单。

setDropDownViewResource ：为自定义下拉菜单设置样式。

示例代码

① 新建项目，在res 目录下新建一个anim 文件夹，存放动画效果用，在其中新建一个my_anim.xml 文件

② 在res 目录下的layout 文件夹中新建一个myspinner_dropdown.xml 文件，用来存放下拉菜单弹出内容的布局

③ 修改main.xml，添加UI 元素

④ 定义一个下拉菜单

⑨ mainActivity.java 完整代码

package zyf.Ex_Ctrl_8;
import android.app.Activity;
import android.os.Bundle;

import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;

public class Ex_Ctrl_8 extends Activity {
    // Called when the activity is first created.
    private static final String[] countriesStr ={ " 北京市", " 上海市", " 天津市", " 重庆市" };
    private TextView myTextView;
    private Spinner mySpinner;
    private ArrayAdapter<String> adapter;
    Animation myAnimation;

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 载入main.xml Layout
        setContentView(R.layout.main);
        // 以findViewById() 取得对象
        myTextView = (TextView) findViewById(R.id.TextView_Show);
        mySpinner = (Spinner) findViewById(R.id.spinner_City);

//取得Animation 定义在res/anim 目录下
        myAnimation = AnimationUtils.loadAnimation(this, R.anim.my_anim);
        adapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, countriesStr );

// myspinner_dropdown 为自定义下拉菜单样式定义在res/layout 目录下
        adapter.setDropDownViewResource(R.layout.myspinner_dropdown);

// 给下拉菜单添加内容Adapter适配器
        mySpinner.setAdapter(adapter);

//下拉菜单弹出的内容选项被选中事件处理
        mySpinner.setOnItemSelectedListener(new Spinner.OnItemSelectedListener(){
            public void onItemSelected(AdapterView<?> arg0, View arg1,int arg2, long arg3) {
                // TODO Auto-generated method stub
                // 将所选mySpinner 的值带入myTextView 中
                myTextView.setText(setText("您选择的是："+ countriesStr [arg2]);
                // 将mySpinner 显示

arg0.setVisibility(View.VISIBLE);
            }
            public void onNothingSelected(AdapterView<?> arg0) {
                // TODO Auto-generated method stub
                myTextView.setText("NONE");
            }
        });

//下拉菜单弹出的内容选项触屏事件处理
        mySpinner.setOnTouchListener(new Spinner.OnTouchListener(){
            public boolean onTouch(View v, MotionEvent event) {
                // TODO Auto-generated method stub
                // 将mySpinner 运行Animation
                v.startAnimation(myAnimation);
                // 将mySpinner 隐藏
                v.setVisibility(View.INVISIBLE);
                return false;
            }
        });

//下拉菜单弹出的内容选项焦点改变事件处理
        mySpinner.setOnFocusChangeListener(new Spinner.OnFocusChangeListener(){
            public void onFocusChange(View v, boolean hasFocus) {
                // TODO Auto-generated method stub
            }
        });
    }
}

⑩ 结果

关键点

1. Android 控件之 Spinner

Spinner是一个每次只能选择所有项的一个项的控件。它的项来自于与之相关联的适配器中。

详见：http://blog.sina.com.cn/s/blog_4b3c1f950100qzqt.html

2. 适配器 Adapter

一个Adapter的对象扮演一个桥梁的角色。这个桥梁连接着一个 AdapterView 和它所包含的数据 。

详见：http://blog.sina.com.cn/s/blog_4b3c1f950100qzro.html

3. AdapterView

AdapterView 是内容由 Adapter 来决定的视图类。

参见子类 ListView、GridView、Spinner 和 Gallery 等。

16. 动态添加╱删除的Spinner 菜单

核心代码

// mainActivity.java，实现动态添加和删除

public class Ex_Ctrl_9ME extends Activity implementsButton.OnClickListener,Spinner.OnItemSelectedListener

{
    // Called when the activity is first created.
    //声明程序使用的对象
    private TextView show_yourChoice_TextView;
    private EditText input_City_EditText;
    private Button Add_Button, Del_Button;
    private Spinner city_Spinner;
    private ArrayAdapter<String> arrayAdapter;
    private String[] cities;
    private String addString;
    private List<String> cityList;

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //设置主屏显示布局为main.xml
        setContentView(R.layout.main);
        //findViewByID()获取XML中的UI元素
        show_yourChoice_TextView = (TextView) findViewById(R.id.TextView_Show_yourChoice );
        input_City_EditText = (EditText) findViewById(R.id.EditView_Input);
        Add_Button = (Button) findViewById(R.id.Button_ADD);
        Del_Button = (Button) findViewById(R.id.Button_DEL);
        city_Spinner = (Spinner) findViewById(R.id.Spinner_Slecte);

//初始化字符串数组

cities = new String[] { "Android", "BlackBerry", "J2ME","Symbian","Broncho", "LinuxMobile","Palm","WindwosMobile" };

//初始化List实例ArrayList的对象

cityList = new ArrayList<String>();
        //遍历，把字符串数组添加到ArrayList中
        for (int i = 0; i < cities.length; i++) {
            cityList.add(cities[i]);
        }

// 这里应该使用List<> ,如果使用String[]则会出错
        //初始化下拉菜单的内容适配器
        arrayAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, cityList);
        //设置下拉菜单显示内容的风格
        arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item );
        //给下拉菜单对象添加内容适配器
        city_Spinner.setAdapter(arrayAdapter);
       //默认启动时文本标题显示
        show_yourChoice_TextView.setText(arrayAdapter.getItem(0));
        //默认启动时下拉菜单第一项被选中
        city_Spinner.setSelection(0);
        //为按钮添加点击事件监听器
        Add_Button.setOnClickListener(this);
        Del_Button.setOnClickListener(this);
        //为下拉菜单添加选项选中事件监听器
        city_Spinner.setOnItemSelectedListener(this);
    }

@Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
            //区别按钮来进行不同动作
            case R.id.Button_ADD:
                //显示Toast提示
                Toast.makeText(this, "添加", Toast.LENGTH_SHORT).show();
               //获得输入框中的将要添加的字符串
                addString = input_City_EditText.getText().toString();
                //遍历，比较是否和下拉菜单中内容重复
                for (int i = 0; i < arrayAdapter.getCount(); i++) {
                    if (addString.equals(arrayAdapter.getItemId(i))) {
                        return;   //重复了，则跳出
                    }

}

//如果添加字符串不为""
                if (!addString.equals("")) {
                    //添加进适配器中
                    arrayAdapter.add(addString);
                   //获取刚刚添加进的字符串位置
                    int post = arrayAdapter.getPosition(addString);
                    //设置刚刚添加进的下拉菜单内容被选中
                    city_Spinner.setSelection(post);
                    //清空输入框
                    input_City_EditText.setText("");
                }

break;
            case R.id.Button_DEL:
                if (city_Spinner.getSelectedItem() != null) {
                   // 删除mySpinner 的值
                    arrayAdapter.remove(city_Spinner.getSelectedItem().toString());
                    // 将myEditText 清空
                    input_City_EditText.setText("");
                    if (arrayAdapter.getCount() == 0) {
                        // 将myTextView 清空
                        Toast.makeText(this, "删完了", Toast.LENGTH_SHORT).show();
                        show_yourChoice_TextView.setText("");
                    }
                }

break;
            default:
                break;
        }
    }

//下拉菜单选项被选中事件处理
    @Override
    public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,long arg3) {
        // TODO Auto-generated method stub
        show_yourChoice_TextView.setText(arrayAdapter.getItem(arg2));
    }

//未被选中事件处理
    @Override
    public void onNothingSelected(AdapterView<?> arg0) {
        // TODO Auto-generated method stub

}

//添加Menu菜单进行退出操作
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // TODO Auto-generated method stub
        menu.add("Exit");
        return super.onCreateOptionsMenu(menu);
    }

//Menu菜单退出
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub
        finish();
        return super.onOptionsItemSelected(item);
    }
}

关键点

1.  Adapter 与AdapterView 之间的依赖性

数据 – adapter – adapterView

在对Adapter 进行数据增减时，会直接反应发到adapterView上。？那对原始数据 list 有影响吗 ？

时间： 2024-10-08 14:58:17

［转］android学习----基础UI编程(五)的相关文章

［转］android学习----基础UI编程(四)

CheckBox 的使用 RadioButton 的使用 12. CheckBox 的使用 1)通过只含有一个CheckBox的实例来学习CheckBox的使用 示例代码 ① 创建新工程② 在string.xml 中添加字符串 <?xml version="1.0" encoding="utf-8"?><resources><string name="app_name">Ex_Ctrl_4</string

［转］android学习----基础UI编程(六)

相簿浏览 Gallery 文件搜索引擎FileSearch 17. Gallery 与 衍生BaseAdapter 容器 Gallery控件,即Android的图片库控件. 需要定义一个BaseAdaper的子类(eg.ImageAdapter)来操作控制图片资源,然后在主类中通过Gallery.setAdapter(new ImageAdapter(this));来使用这个控制类. 示例代码 本例中 ImageView 和 Gallery 控件相互协作 . ① 新建项目 ② 定义layout

［转］android学习----基础UI编程(七)

自动完成输入框 AutoCompleteTextView 多内容自动完成输入框 19. AutoCompleteTextView 自动完成输入框 智能输入框 AutoCompleteTextView 1. 简介 一个可编辑的文本视图显示自动完成建议当用户键入.建议列表显示在一个下拉菜单,用户可以从中选择一项,以完成输入.建议列表是从一个数据适配器获取的数据. 2. 重要方法 clearListSelection():清除选中的列表项 dismissDropDown():如果存在关闭下拉菜单 ge

［转］android学习----基础UI编程(八)

模拟/数字/线程小时钟设计 动态输入日期与时间 日期设置/时间设置对话框 21. 模拟/数字/线程小时钟设计 AnalogClock 与DigitalClock 的原理,以及线程时钟的实现 . 示例代码 ① 新建工程② 修改man.xml 布局,添加一个AnalogClock.一个DigitalClock.一个TextView<TextView  //这个TextView 用来显示线程时钟    android:id="@+id/TextView_showTime"    and

［转］android学习----基础UI编程(三)

9. Toast--Android 专属浮动小提示 下例中,实现在一个EditView中输入一段话后,点击Button,Toast显示这段话. 示例代码: ① 新建工程② 在string.xml 中添加字符串 <?xml version="1.0" encoding="utf-8"?>    <resources>        <string name="app_name">EX_Ctrl_3</str

［转］android学习----基础UI编程(二)

7. TextView 和 EditView 共舞 预达到效果:在EditText中输入同时TextView进行输出 //前提:在main.xml中添加EditText 和 TextView控件 核心代码示例: public class EX_Ctrl_1 extends Activity {    private TextView mTextView01;    private EditText mEditText01;    // Called when the activity is fi

［转］android学习----基础UI编程(一)

1 通过 DisplayMetrics 类获取屏幕宽高 示例代码: package zyp.Activity; import android.app.Activity;import android.os.Bundle;import android.widget.*;import android.util.*; public class Test extends Activity {    //Called when the activity is first created. private T

［转］android学习----消息机制

一. 角色描述 1. Looper : 一个线程可以产生一个Looper对象,由它来管理此线程里的Message Queue(消息队列). 2. Handler : 你可以构造Handler对象来与Looper沟通,以便push新消息到Message Queue里:或者接收Looper(从Message Queue取出)所送来的消息. 3. Message Queue(消息队列) : 用来存放线程放入的消息. 4. 线程 :UI thread通常就是main thread,而Android启动程

［转］android学习总结----Activity view

什么是Activity? Activity 是用户接口程序,原则上它会提供给用户一个交互式的接口功能. 它是 android 应用程序的基本功能单元. Activity 本身是没有界面的 什么是view/ viewGroups? view/ viewGroups :表示在 android 平台上的基本用户界面单元. view :为指定的屏幕矩形区域存储布局和内容.处理尺寸和布局,绘制,焦点改变,翻屏,按键 等… viewGroups:包含并管理下级系列的views 和 下级的 viewGroup