2015年3月28日 星期六

Android中的各種Adapter View (ListView、Spinner、與Gallery)

Android中有一種類型的View,其都繼承了AdapterView類,都使用Adapter來當做顯示與資料之間的橋梁。ListView、Spinner、和Gallery是非常常見的三種AdapterView元件,在這裡我將實做簡單的ListView、Spinner、和Gallery範例,並從程式碼讓大家觀察到它們的實做程式碼有多麼的相似,在學習時應當一同學習而不是把每個元件都當成一個全新的元件來學習,方可增加學習的效率與理解。

  1. 首先,我們先為三種不同的AdapterView建立共同使用來顯示資料的Layout:
  2. my_base_adapter_layout.xml:
    <?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"
    
        android:gravity="center_vertical">
    
    
        <ImageView
    
            android:layout_width="50dp"
    
            android:layout_height="50dp"
    
            android:id="@+id/imageView" />
    
    
        <TextView
    
            android:layout_width="wrap_content"
    
            android:layout_height="wrap_content"
    
            android:textAppearance="?android:attr/textAppearanceLarge"
    
            android:text="Large Text"
    
            android:id="@+id/textView" />
    
    
    </LinearLayout>
    
    
  3. 在這裡,我在res資料夾中設置了arrays.xml,紀錄了圖片資源的名稱:
  4. <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <string-array name="pictrueNames">
            <item>菊花</item>
            <item>沙漠</item>
            <item>繡球花</item>
            <item>水母</item>
        </string-array>
    
    </resources>
    
    
    
    
  5. 再來,為展示三種不同AdapterView的Activity建立它們各自的Layout,其中都各自在右下角有一個按鈕,用來切換到不同的Activity:
  6. ListView的layout,activity_listview.xml:
    <RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    
        android:paddingRight="@dimen/activity_horizontal_margin"
    
        android:paddingTop="@dimen/activity_vertical_margin"
    
        android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    
        <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/listView"
            android:layout_centerHorizontal="true"
            android:layout_above="@+id/listviewLinearLayout" />
    
        <RelativeLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:id="@+id/listviewLinearLayout">
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Spinner示範"
                android:id="@+id/spinnerButton"
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />
    
        </RelativeLayout>
    
    </RelativeLayout>
    
    
    Spinner的layout,activity_lspinner.xml:
    <RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    
        android:paddingRight="@dimen/activity_horizontal_margin"
    
        android:paddingTop="@dimen/activity_vertical_margin"
    
        android:paddingBottom="@dimen/activity_vertical_margin"
    
        tools:context="com.example.gjun.AdapterViews_example.SpinnerActivity">
    
    
    
        <Spinner
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/spinner"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />
        <RelativeLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:id="@+id/spinnerLinearLayout">
    
    
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Gallery示範"
                android:id="@+id/galleryButton"
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />
    
        </RelativeLayout>
    
    
    
    </RelativeLayout>
    
    
    Gallery的layout,activity_gallery.xml:
    <RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    
        android:paddingRight="@dimen/activity_horizontal_margin"
    
        android:paddingTop="@dimen/activity_vertical_margin"
    
        android:paddingBottom="@dimen/activity_vertical_margin"
    
        tools:context="com.example.gjun.AdapterViews_example.GalleryActivity"
    
        android:gravity="center">
    
    
    
        <Gallery
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/gallery"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:spacing="60dp"
            android:layout_above="@+id/spinerLinearLayout" />
    
    
    
        <RelativeLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:id="@+id/spinerLinearLayout">
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ListView示範"
                android:id="@+id/listViewButton"
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />
    
        </RelativeLayout>
    
    </RelativeLayout>
    
    
  7. 最後,我們建立三個極為相似的Activity用來顯示不同的AdapterView,為了避免過多不重要的程式碼影響閱讀,這裡只寫出Activity中onCreate()方法中的程式碼:

  8. ListViewActivity.java:
     @Override
    
        protected void onCreate(Bundle savedInstanceState) {
    
            super.onCreate(savedInstanceState);
    
            setContentView(R.layout.activity_listview);
    
    
    
            final String[] pictureNames = getResources().getStringArray(R.array.pictrueNames);
    
            final int[] pictureResourceIds = new int[]{R.drawable.chrysanthemum, R.drawable.desert, R.drawable.hydrangeas, R.drawable.jellyfish};
    
            ListView listView = (ListView) findViewById(R.id.listView);
            listView.setAdapter(new BaseAdapter() {
                @Override
                public int getCount() {
                    return pictureNames.length;
                }
    
                @Override
                public Object getItem(int position) {
                    return null;
                }
    
                @Override
                public long getItemId(int position) {
                    return 0;
                }
    
                @Override
                public View getView(int position, View convertView, ViewGroup parent) {
                    LinearLayout my_base_adapter_layout = (LinearLayout) getLayoutInflater().inflate(R.layout.my_base_adapter_layout,null);
                    ImageView imageView = (ImageView) my_base_adapter_layout.findViewById(R.id.imageView);
                    TextView textView = (TextView) my_base_adapter_layout.findViewById(R.id.textView);
    
                    imageView.setImageResource(pictureResourceIds[position]);
                    textView.setText(pictureNames[position]);
    
                    return my_base_adapter_layout;
                }
            });
    
            Button spinnerButton = (Button) findViewById(R.id.spinnerButton);
            spinnerButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent = new Intent(ListViewActivity.this,SpinnerActivity.class);
                    startActivity(intent);
                }
            });
    
    
    SpinnerActivity.java:
    @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_spinner);
    
            final String[] pictureNames = getResources().getStringArray(R.array.pictrueNames);
            final int[] pictureResourceIds = new int[]{R.drawable.chrysanthemum, R.drawable.desert, R.drawable.hydrangeas, R.drawable.jellyfish};
    
            Spinner spinner = (Spinner) findViewById(R.id.spinner);
            spinner.setAdapter(new BaseAdapter() {
                @Override
                public int getCount() {
                    return pictureNames.length;
                }
    
                @Override
                public Object getItem(int position) {
                    return null;
                }
    
                @Override
                public long getItemId(int position) {
                    return 0;
                }
    
                @Override
                public View getView(int position, View convertView, ViewGroup parent) {
    
                    LinearLayout my_base_adapter_layout = (LinearLayout) getLayoutInflater().inflate(R.layout.my_base_adapter_layout,null);
    
                    ImageView imageView = (ImageView) my_base_adapter_layout.findViewById(R.id.imageView);
    
                    TextView textView = (TextView) my_base_adapter_layout.findViewById(R.id.textView);
    
                    imageView.setImageResource(pictureResourceIds[position]);
                    textView.setText(pictureNames[position]);
                    return my_base_adapter_layout;
                }
            });
    
            Button galleryButton = (Button) findViewById(R.id.galleryButton);
            galleryButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent = new Intent(SpinnerActivity.this,GalleryActivity.class);
                    startActivity(intent);
                }
            });
    
    
    GalleryActivity.java:
    @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_gallery);
    
            final String[] pictureNames = getResources().getStringArray(R.array.pictrueNames);
            final int[] pictureResourceIds = new int[]{R.drawable.chrysanthemum, R.drawable.desert, R.drawable.hydrangeas, R.drawable.jellyfish};
    
            Gallery gallery = (Gallery) findViewById(R.id.gallery);
            gallery.setAdapter(new BaseAdapter() {
                @Override
                public int getCount() {
                    return pictureNames.length;
                }
    
                @Override
                public Object getItem(int position) {
                    return null;
                }
    
                @Override
                public long getItemId(int position) {
                    return 0;
                }
    
                @Override
                public View getView(int position, View convertView, ViewGroup parent) {
                    LinearLayout my_base_adapter_layout = (LinearLayout) getLayoutInflater().inflate(R.layout.my_base_adapter_layout,null);
                    ImageView imageView = (ImageView) my_base_adapter_layout.findViewById(R.id.imageView);
                    TextView textView = (TextView) my_base_adapter_layout.findViewById(R.id.textView);
    
                    imageView.setImageResource(pictureResourceIds[position]);
                    textView.setText(pictureNames[position]);
                    return my_base_adapter_layout;
                }
            });
    
            Button listViewButton = (Button) findViewById(R.id.listViewButton);
            listViewButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent = new Intent(GalleryActivity.this,ListViewActivity.class);
                    startActivity(intent);
                }
            });
    
  9. 可以看到這三個Activity內的程式碼基本上沒有區別,只差在finvViewById得到的不同AdapterView還有在setAdapter()中的getView()裡getLayoutInflater().inflate()所給的Layout參數不同而已,最後的成品如下面影片所示:


沒有留言 :

張貼留言