系出名门Android(8) - 控件(View)之TextSwitcher, Gallery, ImageSwitcher, GridView, ListVi

系出名门Android(8) - 控件(View)之TextSwitcher, Gallery, ImageSwitcher, GridView, ListView, ExpandableList


作者：webabcd


介绍
在 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;

         }

     }

 }