Android——Basic Controls (17)

1.  Text switching: TextSwitcher

1.1 Knowledge points

(1) Understand the use of TextSwitcher and ViewFactory.

1.2 Specific details

 Example: Switch display of current time

<LinearLayout 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:orientation="vertical" >
    <TextSwitcher
        android:id="@+id/myTextSwitcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal"/>
    <Button
        android:id="@+id/but"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:text="显示当前时间"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

package com.example.textswitcher;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.TextSwitcher;
import android.widget.TextView;
import android.widget.ViewSwitcher.ViewFactory;

public class TextSwitcherActivity extends Activity {
	private Button but = null;
	private TextSwitcher textSwitcher = null;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.activity_text_switcher);
		this.but = (Button) super.findViewById(R.id.but);
		this.textSwitcher = (TextSwitcher) super.findViewById(R.id.myTextSwitcher);
		this.textSwitcher.setFactory(new ViewFactory() {
			@Override
			public View makeView() {
				TextView textView = new TextView(TextSwitcherActivity.this);
				textView.setLayoutParams(new TextSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
				textView.setBackgroundColor(0xFFFFFFFF);
				textView.setTextSize(30);
				return textView;
			}
		});
		this.but.setOnClickListener(new OnClickListener(){
			@Override
			public void onClick(View v) {
				Date date = new Date();
				DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS");
				String sDate = df.format(date);//将Date类型的日期转换成字符串
				TextSwitcherActivity.this.textSwitcher.setText("当前时间："+sDate);
			}
			
		});
	}
}

Of course, you can also set animation effects.

<TextSwitcher
        android:id="@+id/myTextSwitcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal"
        android:inAnimation="@android:anim/slide_in_left"
        android:outAnimation="@android:anim/slide_out_right"/>

1.3 Summary

(1) TextSwitcher is the same as ImageSwitcher. If conversion is required, it must be set through the ViewFactory interface.

2.  Drag pictures: Gallery

2.1 Knowledge points

(1) Master the use of Gallery components;

(2) Use Gallery + ImageSwitcher to complete the image browsing function.

2.2 Specific details

 

 

We use the API to find the SpinnerAdapter interface. Found that this interface has several implementation classes: ArrayAdapter, SimpleAdapter, BaseAdapter 

  · Using ArrayAdapter and BaseAdapter actually requires developers to implement the operations of the Adapter themselves, including defining components.

Step 1: Write a custom adapter

package com.example.galleryproject;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

public class ImageGalleryAdapter extends BaseAdapter{
	private Context context;
	private int img[] = {R.drawable.head0,R.drawable.head1,R.drawable.head2,
			R.drawable.head3,R.drawable.head4,R.drawable.head5,
			R.drawable.head6,R.drawable.head7,R.drawable.head8,
			R.drawable.head9,R.drawable.head10,R.drawable.head11,};
	public ImageGalleryAdapter(Context context){
		this.context = context;
	}
	@Override
	public int getCount() {//返回图片个数
		return img.length;
	}
	@Override
	public Object getItem(int position) {//取得指定位置的图片
		return img[position];
	}
	@Override
	public long getItemId(int position) {//取得指定位置的图片ID
		return img[position];
	}
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		//很明显，现在我们是要浏览图片，那么图片肯定是需要使用ImageView
		ImageView imgView = new ImageView(context);
		imgView.setBackgroundColor(0xFFFFFFFF);
		imgView.setImageResource(this.img[position]);
		imgView.setScaleType(ImageView.ScaleType.CENTER);//设置居中显示
		imgView.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
		return imgView;
	}
}

 

At this point, the custom adapter has been completed. It is an adapter specifically responsible for filling data into the Gallery component. When the Gallery needs to display content, just use the setAdapter() method to set this custom adapter.

Step 2: Define the layout file

<LinearLayout 
    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:orientation="vertical" >
    <Grallery
        android:id="@+id/myGallery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
		android:layout_gravity="center_horizontal"
		/>
</LinearLayout>

 After defining the layout file, we need to write the Activity program.

package com.example.galleryproject;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Gallery;
import android.widget.Toast;

public class GalleryActivity extends Activity {
	private Gallery myGallery = null;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.activity_gallery);
		this.myGallery = (Gallery) super.findViewById(R.id.myGallery);
		this.myGallery.setAdapter(new ImageGalleryAdapter(this));
		this.myGallery.setOnItemClickListener(new OnItemClickListener(){

			@Override
			public void onItemClick(AdapterView<?> adapter, View view, int position,
					long id) {
				Toast.makeText(GalleryActivity.this, "选中了第"+(position+1)+"张图片", Toast.LENGTH_SHORT).show();
			}
			
		});
	}
}

 

From the perspective of event processing, the operation of the ListView component is similar.

·To use SimpleAdapter, you must prepare a List, and this List stores a Map, and the key value in the Map must be of string type. If there are 100 pictures that need to be displayed using the gallery component, we can do this at this time some special handling.

Step 1: Prepare a template layout for the display of an image

 

<LinearLayout 
    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:orientation="horizontal" >
    <ImageView
        android:id="@+id/mtImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="center"
		/>
</LinearLayout>

Part 2: Write Activity program and implement gallery

package com.example.galleryproject;

import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Gallery;
import android.widget.SimpleAdapter;
import android.widget.Toast;

public class GalleryActivity extends Activity {
	private Gallery myGallery = null;
	private SimpleAdapter adapter = null;
	private List<Map<String,Integer>> list = new ArrayList<Map<String,Integer>>();
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.activity_gallery);
		this.myGallery = (Gallery) super.findViewById(R.id.myGallery);
		this.initAdapter();//装配适配器
		this.myGallery.setAdapter(adapter);
		this.myGallery.setOnItemClickListener(new OnItemClickListener(){
			@Override
			public void onItemClick(AdapterView<?> adapter, View view, int position,
					long id) {
				Toast.makeText(GalleryActivity.this, "选中了第"+(position+1)+"张图片", Toast.LENGTH_SHORT).show();
			}
		});
	}
	/**
	 * 装配适配器
	 */
	public void initAdapter(){
		//我们说如果有非常多的图片，一个一个列出来非常麻烦 现在使用一些IO知识，通过图片名称的前半部分相同就全部加载进来
		Field field[] = R.drawable.class.getDeclaredFields();//取得drawable全部内容
		for (int i = 0; i < field.length; i++) {
			if(field[i].getName().startsWith("head")){
				Map<String,Integer> map = new HashMap<String,Integer>();
				try{
					map.put("img",field[i].getInt(R.drawable.class));
				}catch(Exception e){
					e.printStackTrace();
				}
				this.list.add(map);
			}
		}
		this.adapter = new SimpleAdapter(this,this.list,R.layout.gallery_view,new String[]{"img"},new int[]{R.id.myImg});
	}
}

The above operations all implement a simple gallery. In many cases, the user can select a picture and then directly display the picture in the center. This means that the picture is switched, which needs to be completed by relying on ImageSwitcher.

<LinearLayout 
    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:orientation="vertical" >
    <ImageSwitcher
        android:id="@+id/myImageSwitcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    <Gallery
        android:id="@+id/myGallery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
		android:layout_gravity="center_horizontal"
		android:spacing="3px"
		/>
</LinearLayout>

package com.example.galleryproject;

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

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.ViewSwitcher.ViewFactory;

public class GalleryActivity extends Activity {
	private Gallery myGallery = null;
	private SimpleAdapter adapter = null;
	private List<Map<String, Integer>> list = new ArrayList<Map<String, Integer>>();
	private ImageSwitcher imageSwitcher = null;
	private int img[] = { R.drawable.head0, R.drawable.head1, R.drawable.head2,
			R.drawable.head3, R.drawable.head4, R.drawable.head5,
			R.drawable.head6, R.drawable.head7, R.drawable.head8,
			R.drawable.head9, R.drawable.head10, R.drawable.head11, };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.activity_gallery);
		this.myGallery = (Gallery) super.findViewById(R.id.myGallery);
		this.imageSwitcher = (ImageSwitcher) super.findViewById(R.id.myImageSwitcher);
		this.imageSwitcher.setFactory(new ViewFactory() {
			@Override
			public View makeView() {
				ImageView imgView = new ImageView(GalleryActivity.this);
				imgView.setBackgroundColor(0xFFFFFFFF);
				imgView.setScaleType(ImageView.ScaleType.CENTER);//设置居中显示
				imgView.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
				return imgView;
			}
		});
		this.imageSwitcher.setImageResource(img[0]);
		this.initAdapter();//装配适配器
		this.myGallery.setAdapter(adapter);
		this.myGallery.setOnItemClickListener(new OnItemClickListener(){
			@Override
			public void onItemClick(AdapterView<?> adapter, View view, int position,
					long id) {
				GalleryActivity.this.imageSwitcher.setImageResource(img[position]);
			}
		});
	}
	/**
	 * 装配适配器
	 */
	public void initAdapter() {
		for (int i = 0; i < img.length; i++) {
			Map<String, Integer> map = new HashMap<String, Integer>();
			try {
				map.put("img", img[i]);
			} catch (Exception e) {
				e.printStackTrace();
			}
			this.list.add(map);
		}
		this.adapter = new SimpleAdapter(this, this.list,
				R.layout.gallery_view, new String[] { "img" },
				new int[] { R.id.myImg });
	}
}

When using BaseAdapter, you need to customize an adapter class, but when using SimpleAdapter, you must define a layout template.

2.3 Summary

(1) The Gallery component can complete the drag-and-drop browsing function of pictures;

(2) Use the Gallery + ImageSwitcher component to complete the image switching operation;

3. Grid View: GridView

3.1 Knowledge points

(1) Master the characteristics and applications of GridView;

(2) You can use BaseAdapter to set the GridView display content.

3.2 Specific details

 

 

Main page layout:

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".GridViewActivity" >

    <GridView 
        android:id="@+id/myGirdView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="3" – 每行加载多少个单元格
        android:stretchMode="columnWidth"  --设置缩放的时候保持列宽的一致
        />

</LinearLayout>

 Cell layout:

<?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" >
    
    <ImageView 
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="center"
        android:padding="10px"
        />

</LinearLayout>

 Activity：

package com.example.gridviewproject;

import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;
import android.widget.SimpleAdapter;

public class GridViewActivity extends Activity {
	SimpleAdapter adapter = null;
	List<Map<String,Integer>> list = new ArrayList<Map<String,Integer>>();
    GridView gv = null;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_grid_view);
		gv = (GridView) super.findViewById(R.id.myGirdView);
		this.initAdapter();
		gv.setAdapter(adapter);
	}

	
	
	public void initAdapter(){//装载adapter
		Field[] fields = R.drawable.class.getDeclaredFields();//取得所有的图片
		for(int i=0;i<fields.length;i++){
			if(fields[i].getName().startsWith("date")){
				Map<String,Integer> map = new HashMap<String,Integer>();
				try {
					map.put("img", fields[i].getInt(R.drawable.class));
				} catch (IllegalArgumentException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				} catch (IllegalAccessException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
				this.list.add(map);
			}
		}
		this.adapter = new SimpleAdapter(this,list,R.layout.gird_view_item,new String[]{"img"},new int[]{R.id.img});
	}
}

So far, the loading of the grid view has been completed. Then proceed to event processing and click to display the picture.

package com.example.gridviewproject;

import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.SimpleAdapter;

public class GridViewActivity extends Activity {
	SimpleAdapter adapter = null;
	List<Map<String,Integer>> list = new ArrayList<Map<String,Integer>>();
    GridView gv = null;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_grid_view);
		gv = (GridView) super.findViewById(R.id.myGirdView);
		this.initAdapter();
		gv.setAdapter(adapter);
		gv.setOnItemClickListener(new OnItemClickListenerImpl());
	}

	
	
	public void initAdapter(){//装载adapter
		Field[] fields = R.drawable.class.getDeclaredFields();//取得所有的图片
		for(int i=0;i<fields.length;i++){
			if(fields[i].getName().startsWith("date")){
				Map<String,Integer> map = new HashMap<String,Integer>();
				try {
					map.put("img", fields[i].getInt(R.drawable.class));
				} catch (IllegalArgumentException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				} catch (IllegalAccessException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
				this.list.add(map);
			}
		}
		this.adapter = new SimpleAdapter(this,list,R.layout.gird_view_item,new String[]{"img"},new int[]{R.id.img});
	}
	
	private class OnItemClickListenerImpl implements OnItemClickListener{

		@Override
		public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
				long arg3) {
			Map<String,Integer> map = (Map<String, Integer>) GridViewActivity.this.adapter.getItem(arg2);//取得所点击的图片
			ImageView showImg = new ImageView(GridViewActivity.this);
			showImg.setScaleType(ImageView.ScaleType.CENTER);//代表设置图片居中
			showImg.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
			showImg.setImageResource(map.get("img"));
			Dialog dialog = new AlertDialog.Builder(GridViewActivity.this).setIcon(R.drawable.ic_launcher)
					         .setTitle("显示图片").setView(showImg).setNegativeButton("取消", null).create();
			dialog.show();//显示对话框
		}}
	
}

 The above was done using SimpleAdapter, now it is done using BaseAdapter

Specifically define a new adapter class:

package com.example.myAdapter;

import java.util.List;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class ImageAdapter extends BaseAdapter {
    private List<Integer> list;
	private Context context;
	
	public ImageAdapter(List<Integer> list, Context context) {
		super();
		this.list = list;
		this.context = context;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return this.list.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return this.list.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return this.list.get(position);
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
        ImageView showImg = new ImageView(this.context);
        showImg.setScaleType(ImageView.ScaleType.CENTER);//
        showImg.setImageResource(list.get(position));
        showImg.setPadding(10,10,10,10);
		return showImg;
	}

}

package com.example.gridviewproject;

import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.example.myAdapter.ImageAdapter;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.SimpleAdapter;

public class GridViewActivity extends Activity {
	List<Integer> list = new ArrayList<Integer>();
    GridView gv = null;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_grid_view);
		gv = (GridView) super.findViewById(R.id.myGirdView);
		this.initAdapter();
		gv.setAdapter(new ImageAdapter(list, this));
		gv.setOnItemClickListener(new OnItemClickListenerImpl());
	}

	
	
	public void initAdapter(){//装载adapter
		Field[] fields = R.drawable.class.getDeclaredFields();//取得所有的图片
		for(int i=0;i<fields.length;i++){
			if(fields[i].getName().startsWith("date")){
              try {
				this.list.add(fields[i].getInt(R.drawable.class));
			} catch (IllegalArgumentException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IllegalAccessException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}				
			}
		}
	}
	
	private class OnItemClickListenerImpl implements OnItemClickListener{

		@Override
		public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
				long arg3) {
			ImageView showImg = new ImageView(GridViewActivity.this);
			showImg.setScaleType(ImageView.ScaleType.CENTER);//代表设置图片居中
			showImg.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
			showImg.setImageResource(list.get(arg2));
			Dialog dialog = new AlertDialog.Builder(GridViewActivity.this).setIcon(R.drawable.ic_launcher)
					         .setTitle("显示图片").setView(showImg).setNegativeButton("取消", null).create();
			dialog.show();//显示对话框
		}}
	
}

3.3 Summary

(1) GridView can perform grid display operations;

(2) The content of GridView can be set using SimpleAdapter or through a customized BaseAdapter subclass.