介绍
在 Android 中使用各种控件(View)
TextSwitcher - 文字转换器控件(改变文字时增加一些动画效果)
Gallery - 缩略图浏览器控件
ImageSwitcher - 图片转换器控件(改变图片时增加一些动画效果)
GridView - 网格控件
ListView - 列表控件
ExpandableList - 支持展开/收缩功能的列表控件
在 Android 中使用各种控件(View)
TextSwitcher - 文字转换器控件(改变文字时增加一些动画效果)
Gallery - 缩略图浏览器控件
ImageSwitcher - 图片转换器控件(改变图片时增加一些动画效果)
GridView - 网格控件
ListView - 列表控件
ExpandableList - 支持展开/收缩功能的列表控件
- 1、TextSwitcher 的 Demo
- textswitcher.xml
- 代码
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical" android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <Button android:id="@+id/btnChange" android:layout_width="wrap_content"
- android:layout_height="wrap_content" android:text="改变文字" />
- <!--
- TextSwitcher - 文字转换器控件(改变文字时增加一些动画效果)
- -->
- <TextSwitcher android:id="@+id/textSwitcher"
- android:layout_width="fill_parent" android:layout_height="wrap_content" />
- </LinearLayout>
- _TextSwitcher.java
- 代码
- package com.webabcd.view;
- import java.util.Random;
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.View;
- import android.view.animation.Animation;
- import android.view.animation.AnimationUtils;
- import android.widget.Button;
- import android.widget.TextSwitcher;
- import android.widget.TextView;
- import android.widget.ViewSwitcher;
- public class _TextSwitcher extends Activity implements ViewSwitcher.ViewFactory {
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- // TODO Auto-generated method stub
- super.onCreate(savedInstanceState);
- this.setContentView(R.layout.textswithcer);
- setTitle("TextSwithcer");
- final TextSwitcher switcher = (TextSwitcher) findViewById(R.id.textSwitcher);
- // 指定转换器的 ViewSwitcher.ViewFactory
- switcher.setFactory(this);
- // 设置淡入和淡出的动画效果
- Animation in = AnimationUtils.loadAnimation(this, android.R.anim.fade_in);
- Animation out = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
- switcher.setInAnimation(in);
- switcher.setOutAnimation(out);
- // 单击一次按钮改变一次文字
- Button btnChange = (Button) this.findViewById(R.id.btnChange);
- btnChange.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View v) {
- switcher.setText(String.valueOf(new Random().nextInt()));
- }
- });
- }
- // 重写 ViewSwitcher.ViewFactory 的 makeView(),返回一个 View
- @Override
- public View makeView() {
- TextView textView = new TextView(this);
- textView.setTextSize(36);
- return textView;
- }
- }
- 2、Gallery 的 Demo
- gallery.xml
- 代码
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical" android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <!--
- Gallery - 缩略图浏览器控件
- spacing - 缩略图列表中各个缩略图之间的间距
- -->
- <Gallery android:id="@+id/gallery" android:layout_width="fill_parent"
- android:layout_height="wrap_content" android:spacing="20px" />
- </LinearLayout>
- _Gallery.java
- 代码
- package com.webabcd.view;
- import android.app.Activity;
- import android.content.Context;
- import android.os.Bundle;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.AdapterView;
- import android.widget.BaseAdapter;
- import android.widget.Gallery;
- import android.widget.ImageView;
- import android.widget.Toast;
- import android.widget.Gallery.LayoutParams;
- public class _Gallery extends Activity {
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- // TODO Auto-generated method stub
- super.onCreate(savedInstanceState);
- this.setContentView(R.layout.gallery);
- setTitle("Gallery");
- Gallery gallery = (Gallery) findViewById(R.id.gallery);
- // 为缩略图浏览器指定一个适配器
- gallery.setAdapter(new ImageAdapter(this));
- // 响应 在缩略图列表上选中某个缩略图后的 事件
- gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
- @Override
- public void onItemSelected(AdapterView<?> parent, View v,
- int position, long id) {
- Toast.makeText(_Gallery.this, String.valueOf(position), Toast.LENGTH_SHORT).show();
- }
- @Override
- public void onNothingSelected(AdapterView<?> arg0) {
- }
- });
- }
- // 继承 BaseAdapter 用以实现自定义的图片适配器
- public class ImageAdapter extends BaseAdapter {
- private Context mContext;
- public ImageAdapter(Context context) {
- mContext = context;
- }
- public int getCount() {
- return mThumbIds.length;
- }
- public Object getItem(int position) {
- return position;
- }
- public long getItemId(int position) {
- return position;
- }
- public View getView(int position, View convertView, ViewGroup parent) {
- ImageView image = new ImageView(mContext);
- image.setImageResource(mThumbIds[position]);
- image.setAdjustViewBounds(true);
- image.setLayoutParams(new Gallery.LayoutParams(
- LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
- return image;
- }
- }
- // 需要显示的图片集合
- private Integer[] mThumbIds = { R.drawable.icon01, R.drawable.icon02,
- R.drawable.icon03, R.drawable.icon04, R.drawable.icon05 };
- }
- 3、ImageSwitcher 的 Demo
- imageswitcher.xml
- 代码
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical" android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <Gallery android:id="@+id/gallery" android:layout_width="fill_parent"
- android:layout_height="wrap_content" android:spacing="20px" />
- <!--
- ImageSwitcher - 图片转换器控件(改变图片时增加一些动画效果)
- -->
- <ImageSwitcher android:id="@+id/imageSwitcher"
- android:layout_width="fill_parent" android:layout_height="wrap_content" />
- </LinearLayout>
- _ImageSwitcher.java
- 代码
- package com.webabcd.view;
- import android.app.Activity;
- import android.content.Context;
- import android.os.Bundle;
- import android.view.View;
- import android.view.ViewGroup;
- import android.view.animation.AnimationUtils;
- import android.widget.AdapterView;
- import android.widget.BaseAdapter;
- import android.widget.Gallery;
- import android.widget.ImageSwitcher;
- import android.widget.ImageView;
- import android.widget.ViewSwitcher;
- import android.widget.Gallery.LayoutParams;
- // 图片转换器的使用基本同文字转换器
- // 以下是一个用 ImageSwitcher + Gallery 实现的经典的图片浏览器的 Demo
- public class _ImageSwitcher extends Activity implements
- ViewSwitcher.ViewFactory {
- private ImageSwitcher mSwitcher;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- // TODO Auto-generated method stub
- super.onCreate(savedInstanceState);
- this.setContentView(R.layout.imageswithcer);
- setTitle("ImageSwithcer");
- mSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
- mSwitcher.setFactory(this);
- mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
- android.R.anim.fade_in));
- mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
- android.R.anim.fade_out));
- Gallery gallery = (Gallery) findViewById(R.id.gallery);
- gallery.setAdapter(new ImageAdapter(this));
- gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
- @Override
- public void onItemSelected(AdapterView<?> parent, View v,
- int position, long id) {
- mSwitcher.setImageResource(mImageIds[position]);
- }
- @Override
- public void onNothingSelected(AdapterView<?> arg0) {
- }
- });
- }
- public class ImageAdapter extends BaseAdapter {
- private Context mContext;
- public ImageAdapter(Context context) {
- mContext = context;
- }
- public int getCount() {
- return mThumbIds.length;
- }
- public Object getItem(int position) {
- return position;
- }
- public long getItemId(int position) {
- return position;
- }
- public View getView(int position, View convertView, ViewGroup parent) {
- ImageView image = new ImageView(mContext);
- image.setImageResource(mThumbIds[position]);
- image.setAdjustViewBounds(true);
- image.setLayoutParams(new Gallery.LayoutParams(
- LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
- return image;
- }
- }
- private Integer[] mThumbIds = { R.drawable.icon01, R.drawable.icon02,
- R.drawable.icon03, R.drawable.icon04, R.drawable.icon05 };
- private Integer[] mImageIds = { R.drawable.icon01, R.drawable.icon02,
- R.drawable.icon03, R.drawable.icon04, R.drawable.icon05 };
- @Override
- public View makeView() {
- ImageView image = new ImageView(this);
- image.setMinimumHeight(200);
- image.setMinimumWidth(200);
- image.setScaleType(ImageView.ScaleType.FIT_CENTER);
- image.setLayoutParams(new ImageSwitcher.LayoutParams(
- LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
- return image;
- }
- }
- 4、GridView 的 Demo
- gridview.xml
- 代码
- <?xml version="1.0" encoding="utf-8"?>
- <!--
- GridView - 网格控件
- numColumns="auto_fit" - 列数自适应
- stretchMode - 缩放模式(stretchMode="columnWidth" - 缩放与列宽大小同步)
- -->
- <GridView xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/gridView" android:layout_width="fill_parent"
- android:layout_height="fill_parent" android:padding="10px"
- android:verticalSpacing="10px" android:horizontalSpacing="10px"
- android:numColumns="auto_fit" android:columnWidth="60px"
- android:stretchMode="columnWidth" android:gravity="center">
- </GridView>
- _GridView.java
- 代码
- package com.webabcd.view;
- import android.app.Activity;
- import android.content.Context;
- import android.os.Bundle;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.BaseAdapter;
- import android.widget.GridView;
- import android.widget.ImageView;
- public class _GridView extends Activity {
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- // TODO Auto-generated method stub
- super.onCreate(savedInstanceState);
- this.setContentView(R.layout.gridview);
- setTitle("GridView");
- GridView gridView = (GridView) findViewById(R.id.gridView);
- // 指定网格控件的适配器为自定义的图片适配器
- gridView.setAdapter(new ImageAdapter(this));
- }
- // 自定义的图片适配器
- public class ImageAdapter extends BaseAdapter {
- private Context mContext;
- public ImageAdapter(Context context) {
- mContext = context;
- }
- public int getCount() {
- return mThumbIds.length;
- }
- public Object getItem(int position) {
- return position;
- }
- public long getItemId(int position) {
- return position;
- }
- public View getView(int position, View convertView, ViewGroup parent) {
- ImageView imageView;
- if (convertView == null) {
- imageView = new ImageView(mContext);
- imageView.setLayoutParams(new GridView.LayoutParams(48, 48));
- imageView.setAdjustViewBounds(false);
- imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
- imageView.setPadding(5, 5, 5, 5);
- } else {
- imageView = (ImageView) convertView;
- }
- imageView.setImageResource(mThumbIds[position]);
- return imageView;
- }
- // 网格控件所需图片数据的数据源
- private Integer[] mThumbIds = { R.drawable.icon01, R.drawable.icon02,
- R.drawable.icon03, R.drawable.icon04, R.drawable.icon05 };
- }
- }
- 5、ListView 的 Demo
- main_list_adapter.xml
- 代码
- <?xml version="1.0" encoding="utf-8"?>
- <!--
- 自定义列表适配器的 layout
- -->
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="horizontal" android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <TextView android:id="@+id/text" android:layout_width="wrap_content"
- android:layout_height="wrap_content" android:textSize="16sp">
- </TextView>
- </LinearLayout>
- MainListAdapter.java
- 代码
- package com.webabcd.view;
- import java.util.List;
- import android.content.Context;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.BaseAdapter;
- import android.widget.TextView;
- // 继承 BaseAdapter 以实现自定义的列表适配器
- public class MainListAdapter extends BaseAdapter {
- private LayoutInflater mInflater;
- private List<String> mData;
- public MainListAdapter(Context context, List<String> data) {
- mInflater = LayoutInflater.from(context);
- mData = data;
- }
- @Override
- public int getCount() {
- return mData.size();
- }
- @Override
- public Object getItem(int position) {
- return mData.get(position);
- }
- @Override
- public long getItemId(int position) {
- return position;
- }
- @Override
- public View getView(int position, View convertView, ViewGroup parent) {
- TextView text;
- if (convertView == null) {
- // 指定一个 layout 作为自定义列表适配器的 layout
- convertView = mInflater.inflate(R.layout.main_list_adapter, null);
- text = (TextView) convertView.findViewById(R.id.text);
- convertView.setTag(text);
- } else {
- text = (TextView) convertView.getTag();
- }
- String mItem = mData.get(position);
- text.setText(mItem);
- return convertView;
- }
- }
- Main.java
- 代码
- package com.webabcd.view;
- import java.util.ArrayList;
- import java.util.List;
- import android.app.ListActivity;
- import android.content.Intent;
- import android.os.Bundle;
- import android.view.View;
- import android.widget.ListView;
- // 此处要继承 ListActivity ,用以实现 ListView 的功能
- public class Main extends ListActivity {
- private List<String> mData;
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setTheme(android.R.style.Theme_Light);
- setContentView(R.layout.main);
- mData = getData();
- // 使用自定义的列表适配器来展现数据
- MainListAdapter adapter = new MainListAdapter(this, mData);
- // 如需使用系统内置的列表适配器,则可以使用类似如下的方法
- // ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_expandable_list_item_1, mData);
- this.setListAdapter(adapter);
- }
- // ListView 的数据源
- private List<String> getData() {
- List<String> items = new ArrayList<String>();
- items.add("TextView");
- items.add("Button");
- items.add("ImageButton");
- items.add("ImageView");
- items.add("CheckBox");
- items.add("RadioButton");
- items.add("AnalogClock");
- items.add("DigitalClock");
- items.add("DatePicker");
- items.add("TimePicker");
- items.add("ToggleButton");
- items.add("EditText");
- items.add("ProgressBar");
- items.add("SeekBar");
- items.add("AutoCompleteTextView");
- items.add("MultiAutoCompleteTextView");
- items.add("ZoomControls");
- items.add("Include");
- items.add("VideoView");
- items.add("WebView");
- items.add("RatingBar");
- items.add("Tab");
- items.add("Spinner");
- items.add("Chronometer");
- items.add("ScrollView");
- items.add("TextSwitcher");
- items.add("ListView");
- items.add("Gallery");
- items.add("ImageSwitcher");
- items.add("GridView");
- items.add("ExpandableList");
- return items;
- }
- // ListView 中某项被选中后的逻辑
- @Override
- protected void onListItemClick(ListView l, View v, int position, long id) {
- Intent intent = new Intent();
- intent.setClassName(this, "com.webabcd.view._" + mData.get(position));
- startActivityForResult(intent, 0);
- }
- }
- 6、ExpandableList 的 Demo
- _ExpandableList.java
- 代码
- package com.webabcd.view;
- import android.app.ExpandableListActivity;
- import android.os.Bundle;
- import android.view.ContextMenu;
- import android.view.Gravity;
- import android.view.MenuItem;
- import android.view.View;
- import android.view.ViewGroup;
- import android.view.ContextMenu.ContextMenuInfo;
- import android.widget.AbsListView;
- import android.widget.BaseExpandableListAdapter;
- import android.widget.ExpandableListAdapter;
- import android.widget.ExpandableListView;
- import android.widget.TextView;
- import android.widget.Toast;
- import android.widget.ExpandableListView.ExpandableListContextMenuInfo;
- // ExpandableList - 可展开/收缩列表
- // 继承 ExpandableListActivity 以实现列表的可展开/收缩的功能
- public class _ExpandableList extends ExpandableListActivity {
- private ExpandableListAdapter mAdapter;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- // TODO Auto-generated method stub
- super.onCreate(savedInstanceState);
- setTitle("ExpandableList");
- mAdapter = new MyExpandableListAdapter();
- setListAdapter(mAdapter);
- registerForContextMenu(this.getExpandableListView());
- }
- // 为列表的每一项创建上下文菜单(即长按后呼出的菜单)
- @Override
- public void onCreateContextMenu(ContextMenu menu, View v,
- ContextMenuInfo menuInfo) {
- menu.setHeaderTitle("ContextMenu");
- menu.add(0, 0, 0, "ContextMenu");
- }
- // 单击上下文菜单后的逻辑
- @Override
- public boolean onContextItemSelected(MenuItem item) {
- ExpandableListContextMenuInfo info = (ExpandableListContextMenuInfo) item.getMenuInfo();
- String title = ((TextView) info.targetView).getText().toString();
- int type = ExpandableListView.getPackedPositionType(info.packedPosition);
- if (type == ExpandableListView.PACKED_POSITION_TYPE_CHILD) {
- int groupPos = ExpandableListView.getPackedPositionGroup(info.packedPosition);
- int childPos = ExpandableListView.getPackedPositionChild(info.packedPosition);
- Toast.makeText(this, title + " - Group Index: " + groupPos + " Child Index: " + childPos, Toast.LENGTH_SHORT).show();
- return true;
- } else if (type == ExpandableListView.PACKED_POSITION_TYPE_GROUP) {
- int groupPos = ExpandableListView.getPackedPositionGroup(info.packedPosition);
- Toast.makeText(this, title + " - Group Index: " + groupPos, Toast.LENGTH_SHORT).show();
- return true;
- }
- return false;
- }
- public class MyExpandableListAdapter extends BaseExpandableListAdapter {
- // 父列表数据
- private String[] groups =
- {
- "group1",
- "group2",
- "group3",
- "group4"
- };
- // 子列表数据
- private String[][] children =
- {
- { "child1" },
- { "child1", "child2" },
- { "child1", "child2", "child3" },
- { "child1", "child2", "child3", "child4" }
- };
- @Override
- public Object getChild(int groupPosition, int childPosition) {
- return children[groupPosition][childPosition];
- }
- @Override
- public long getChildId(int groupPosition, int childPosition) {
- return childPosition;
- }
- @Override
- public int getChildrenCount(int groupPosition) {
- return children[groupPosition].length;
- }
- // 取子列表中的某一项的 View
- @Override
- public View getChildView(int groupPosition, int childPosition,
- boolean isLastChild, View convertView, ViewGroup parent) {
- TextView textView = getGenericView();
- textView.setText(getChild(groupPosition, childPosition).toString());
- return textView;
- }
- @Override
- public Object getGroup(int groupPosition) {
- return groups[groupPosition];
- }
- @Override
- public int getGroupCount() {
- return groups.length;
- }
- @Override
- public long getGroupId(int groupPosition) {
- return groupPosition;
- }
- // 取父列表中的某一项的 View
- @Override
- public View getGroupView(int groupPosition, boolean isExpanded,
- View convertView, ViewGroup parent) {
- TextView textView = getGenericView();
- textView.setText(getGroup(groupPosition).toString());
- return textView;
- }
- @Override
- public boolean hasStableIds() {
- return true;
- }
- @Override
- public boolean isChildSelectable(int groupPosition, int childPosition) {
- return true;
- }
- // 获取某一项的 View 的逻辑
- private TextView getGenericView() {
- AbsListView.LayoutParams lp = new AbsListView.LayoutParams(
- ViewGroup.LayoutParams.FILL_PARENT, 48);
- TextView textView = new TextView(_ExpandableList.this);
- textView.setLayoutParams(lp);
- textView.setGravity(Gravity.CENTER_VERTICAL | Gravity.LEFT);
- textView.setPadding(32, 0, 0, 0);
- return textView;
- }
- }
- }