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

系出名門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 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 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 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 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 };
        }
}

未完待續>>

OK
[源碼下載]

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

一統天下 flutter - dart: dart 3 新特性（元組，解構，switch 的模式匹配）

一統天下 flutter - 插件: flutter 使用 web 原生控件，並做數據通信

一統天下 flutter - 插件: flutter 與 web 原生之間的數據通信

一統天下 flutter - widget 自定義: 通過 CustomPaint 實現自定義組件

一統天下 flutter - 資源: rootBundle - 訪問程序內資源

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結