Android UI(ImageView CheckBox)、ListView和Adapter

Android UI

ImageView

ImageView适用于在界面上展示图片的一种控件，通过它可以让我们的程序界面编的更加丰富多彩。

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/imageview"
            android:tint="#4F0000FF"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/imageview"
            android:scaleType="fitEnd"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/imageview"
            android:scaleType="centerInside"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/imageview"
            android:scaleType="fitXY"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/imageview"
            android:scaleType="matrix"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/imageview"
            android:scaleType="fitCenter"/>
        <ImageView

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/imageview"
            android:scaleType="centerCrop"/>
        <ImageView
            android:id="@+id/imageview_alpha"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/imageview"
            android:background="@mipmap/background"
            android:scaleType="fitStart"/>
        <Button
            android:id="@+id/button_alpha_add"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="增加透明度"/>
        <Button
            android:id="@+id/button_alpha_sub"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="减小透明度"/>
    </LinearLayout>
</ScrollView>

 public void onClick(View v) {
        int code= Build.VERSION.SDK_INT;
        switch (v.getId()){
            case R.id.button_alpha_add:
                mAlphaCount +=5;
                if(code<16){
                    mImageViewAlpha.setAlpha(mAlphaCount);
                }else{
                    mImageViewAlpha.setImageAlpha(mAlphaCount);
                }
                break;
            case R.id.button_alpha_sub:
                mAlphaCount -=5;
                if(code<16){
                    mImageViewAlpha.setAlpha(mAlphaCount);
                }else{
                    mImageViewAlpha.setImageAlpha(mAlphaCount);
                }
                break;
            default:
                break;
        }
    }

这里列举了ImageView的一些属性，主要是用于位置的确定和图片的拉伸等 ，该程序中还写入了两个按钮，可以通过点击事件来改变图片的透明度。

CheckBox

CheckBox用于多项选择事件的时候使用。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <EditText
        android:id="@+id/edittext_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入密码"
        android:password="true"
        />
    <CheckBox
        android:id="@+id/checkbox_password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="显示密码"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="科目："/>
        <CheckBox
            android:id="@+id/checkbox_chinese"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="chinese"/>
        <CheckBox
            android:id="@+id/checkbox_math"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="math"/>
        <CheckBox
            android:id="@+id/checkbox_english"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="english"/>
    </LinearLayout>
</LinearLayout>

public class CheckBoxActivity extends Activity {
    private CheckBox mCheckBoxShowPassword;
    private EditText mEditTextPassword;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_checkbox);
        mCheckBoxShowPassword= (CheckBox) findViewById(R.id.checkbox_password);
        mEditTextPassword= (EditText) findViewById(R.id.edittext_password);
        mCheckBoxShowPassword.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if(isChecked){
                    mEditTextPassword.setTransformationMethod(null);
                }else{
                    mEditTextPassword.setTransformationMethod(new PasswordTransformationMethod());
                }
            }
        });
    }
}

通过这段代码可以了解CheckBox的基本属性，并通过点击事件来获取选择结果。

ListView

由于手机屏幕空间都非常有限，能够一次性在屏幕上显示的内容并不多，当我们的程序中有大量的数据需要显示的时候，就可以借助ListView来实现。ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内，同时屏幕上的原有数据则会滚动出屏幕。

ListView的基础

既然ListView是用来展示大量数据的，就需要有数据内容，数据可以存储在数据库中，这里采用String数组来存放一些数据。不过数组中的数据是无法直接传递给ListView的，这里就用到了适配器。这里使用的是ArrayAdapter。他可以通过泛型来制定要适配的数据类型，然后在构造函数中把要适配的数据传入即可。ArrayAdapter的构造函数中依次传入当前上下文，ListView自相布局的id，以及要适配的数据。最后调用ListView的serAdapter（）犯法，将构建号的适配器对象传递进去，这样ListView跟数据之间的关联就建立完成了。

public class ListViewActivity extends Activity {

    private ListView myListView;
    private String []array={"张三","李四","王五","赵六"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_listview);
        myListView= (ListView) findViewById(R.id.listview);
        ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,R.layout.activity_selflistview,array);
        myListView.setAdapter(adapter);
    }
}

R.layout.activity_selflistview是一个简单的线性布局。

定制ListView的界面

在这里，重新定义了一个布局，可以显示一个人的姓名性别年龄爱好等。

先定义一个Student的实体类，包括基本属性和set get方法。

package com.example1.administrator.myui.model;

/**
 * Created by Administrator on 2015/8/24.
 */
public class Student {
    private String name;
    private String age;
    private String sex;
    private String hobby;
    public Student(String name,String age,String sex,String hobby){
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.hobby=hobby;
    }
    public String getName() {
        return name;
    }

    public String getHobby() {
        return hobby;
    }

    public String getSex() {
        return sex;
    }

    public String getAge() {
        return age;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public void setName(String name) {
        this.name = name;
    }

    public void setAge(String age) {
        this.age = age;
    }

    public void setHobby(String hobby) {
        this.hobby = hobby;
    }


}

定义一个布局，用来显示每个人的基本信息。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/text_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/red"
        android:text="name"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:id="@+id/text_age"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/blue"
            android:text="age"/>
        <TextView
            android:id="@+id/text_sex"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/blue"
            android:text="sex"/>
    </LinearLayout>
    <TextView
        android:id="@+id/text_hobby"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/green"
        android:text="hobby"/>

</LinearLayout>

接下来写一个自定义的适配器StudentAdapter

package com.example1.administrator.myui.adapter;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.example1.administrator.myui.R;
import com.example1.administrator.myui.model.Student;

import org.w3c.dom.Text;

import java.util.HashMap;
import java.util.List;

/**
 * Created by Administrator on 2015/8/24.
 */
public class StudentAdapter extends BaseAdapter {
    private List<Student> mData;
    private LayoutInflater mInflater;
    public StudentAdapter(LayoutInflater inflater,List<Student>data){
        mInflater=inflater;
        mData=data;
    }
    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public Object getItem(int position) {
        return position;
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
     //使用inflate方法来载入layout的xml
        View view=mInflater.inflate(R.layout.activity_simplelist,null);
        Student student=mData.get(position);
        TextView textView_name= (TextView) view.findViewById(R.id.text_name);
        TextView textView_age= (TextView) view.findViewById(R.id.text_age);
        TextView textView_sex= (TextView) view.findViewById(R.id.text_sex);
        TextView textView_hobby= (TextView) view.findViewById(R.id.text_hobby);
        textView_name.setText(student.getName());
        textView_age.setText(student.getAge());
        textView_sex.setText(student.getSex());
        textView_hobby.setText(student.getHobby());
        return view;
    }
}

在这里重写了getView（）方法，这个方法在每个子项被滚动到屏幕内的时候会被调用，在该方法中，首先得到Student的实例，然后使用LayoutInflater来为这个子项加载我们传入的布局，接着调用findViewById（）方法分别获取到不居中每个控件的实例，并分别调用其setTest方法来设置显示的内容，最后将布局返回。

在Activity中进行MVC整合

package com.example1.administrator.myui;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.ListView;

import com.example1.administrator.myui.adapter.StudentAdapter;
import com.example1.administrator.myui.model.Student;

import java.util.AbstractCollection;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

/**
 * Created by Administrator on 2015/8/24.
 */
public class SelfAdapterActivity extends Activity {
    private List<Student> mData;
    private ListView mListView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_listview);
        mListView= (ListView) findViewById(R.id.listview);
        //在Activity里面就使用了LayoutInflater来载入界面,
        // 通过LayoutInflater inflater = getLayoutInflater()一个LayoutInflater;来获得.
        //LayoutInflater这个类作用类似于 findViewById()
        LayoutInflater inflater=getLayoutInflater();
        initData();
        StudentAdapter adapter=new StudentAdapter(inflater,mData);
        mListView.setAdapter(adapter);
    }
    private void initData(){
        mData=new ArrayList<>();
        Student zhangsan=new Student("张三","18","男","玩");
        mData.add(zhangsan);
        Student lisi=new Student("李四","12","女","玩玩玩");
        mData.add(lisi);
        Student wangwu=new Student("王五","28","男","玩玩玩玩玩玩玩玩");
        mData.add(wangwu);
    }
}

在这里使用了一个初始化数据的一个方法，用于初始化所有的数据，在Student构造函数中将每个人的信息都传入，然后把创建好的对象添加到定义好的ArrayList中，然后在onCreate中创建了适配器对象，并将该适配器传递给了ListView。

ListView的点击事件

首先要说明的是ListView不允许使用OnClickListener，点击事件使用setOnitemClickListener

 mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                HashMap<String,String> itemdata=mData.get(position);
                Log.d("information", itemdata.get("name") + itemdata.get("age") + itemdata.get("sex") + itemdata.get("hobby"));
            }
        });

点击ListView中的任何一个子项是就会毁掉onItemClick（）方法，在这个方法中可以通过position参数判断用户点击的是哪一个子项，然后得到该子项的信息。

Adapter

Adapter是连接后端数据和前端显示的适配器接口，是数据和UI（View）之间一个重要的纽带。在常见的View(ListView,GridView)等地方都需要用到Adapter。比较常用的有 BaseAdapter，SimpleAdapter，ArrayAdapter，SimpleCursorAdapter等。

BaseAdapter是一个抽象类，继承它需要实现较多的方法，所以也就具有较高的灵活性；
ArrayAdapter支持泛型操作，最为简单，只能展示一行字。
SimpleAdapter有最好的扩充性，可以自定义出各种效果。
SimpleCursorAdapter可以适用于简单的纯文字型ListView，它需要Cursor的字段和UI的id对应起来。如需要实现更复杂的UI也可以重写其他方法。可以认为是SimpleAdapter对数据库的简单结合，可以方便地把数据库的内容以列表的形式展示出来。